Skip to content

D
dsk-cr20g
Commit e32e4f2f authored by 远方不远's avatar 远方不远
Browse files
Options

hy

parent d3e43bec
Show whitespace changes
Inline Side-by-side
Showing with 366 additions and 49 deletions
dsk-operate-ui/src/assets/icons/svg/dot.svg 0 → 100644
View file @ e32e4f2f
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="2" height="2" viewBox="0 0 2 2"><g style="mix-blend-mode:passthrough"><ellipse cx="1" cy="1" rx="1" ry="1" fill="#344062" fill-opacity="1"/></g></svg>
\ No newline at end of file
dsk-operate-ui/src/assets/icons/svg/dots.svg 0 → 100644
View file @ e32e4f2f
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="2" height="2" viewBox="0 0 2 2"><g style="mix-blend-mode:passthrough"><ellipse cx="1" cy="1" rx="1" ry="1" fill="#FFFFFF" fill-opacity="1"/></g></svg>
\ No newline at end of file
dsk-operate-ui/src/assets/styles/sidebar.scss
View file @ e32e4f2f
...@@ -23,9 +23,25 @@ ...@@ -23,9 +23,25 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1001; z-index: 1001;
overflow: hidden; // overflow: hidden;
-webkit-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); box-shadow: 2px 0 6px rgba(0,21,41,.35);
//展开、收起箭头
.side-expand{
position: absolute;
top: 180px;
width: 21px;
height: 62px;
cursor: pointer;
animation: left-right .2s;
animation-fill-mode: forwards;
z-index: 1002;
}
@keyframes left-right{
0%{right: 0;}
100%{right: -21px;}
}
// reset element-ui css // reset element-ui css
.horizontal-collapse-transition { .horizontal-collapse-transition {
...@@ -43,6 +59,7 @@ ...@@ -43,6 +59,7 @@
.el-scrollbar { .el-scrollbar {
height: 100%; height: 100%;
} }
...@@ -84,7 +101,9 @@ ...@@ -84,7 +101,9 @@
.el-menu--inline .nest-menu .el-menu-item{ .el-menu--inline .nest-menu .el-menu-item{
width: 100%!important; width: 100%!important;
min-width: 128px; min-width: 128px;
font-size: 12px;
color: #fff!important; color: #fff!important;
padding-left: 23px!important;
} }
.el-menu-item, .el-submenu__title { .el-menu-item, .el-submenu__title {
...@@ -112,6 +131,9 @@ ...@@ -112,6 +131,9 @@
color: #fff!important; color: #fff!important;
border: 1px solid #2b3f69; border: 1px solid #2b3f69;
} }
&:before{
background: #fff!important;
}
} }
...@@ -136,6 +158,27 @@ ...@@ -136,6 +158,27 @@
border: 1px solid #2b3f69; border: 1px solid #2b3f69;
} }
.sidebar-container .el-submenu .el-menu-item:before, .sidebar-container .nest-menu .el-submenu>.el-submenu__title:before {
position: absolute;
width: 2px;
height: 2px;
border-radius: 50%;
background: #344062;
left: 16px;
top: 50%;
content: "";
}
.sidebar-container .el-submenu .el-menu-item:hover:before, .sidebar-container .nest-menu .el-submenu>.el-submenu__title:hover:before{
position: absolute;
width: 2px;
height: 2px;
border-radius: 50%;
background: #fff;
left: 16px;
top: 50%;
content: "";
}
.hideSidebar { .hideSidebar {
.sidebar-container { .sidebar-container {
width: 48px !important; width: 48px !important;
...@@ -276,3 +319,79 @@ ...@@ -276,3 +319,79 @@
} }
} }
} }
.side-popover{
min-width: 80px;
font-size: 12px;
color: #232323;
padding: 0 8px 32px 8px;
margin-left: 16px !important;
.side-title{
font-size: 16px;
height: 54px;
line-height: 58px;
padding: 0 6px;
border-bottom: 1px solid #F0F0F0;
}
.side-list{
li{
padding: 24px 6px 0 6px;
&:hover{
color: #3D3D3D;
}
}
}
}
.side-retract {
height: 40px;
line-height: 48px;
border: 1px solid #141B2F;
margin-bottom: 6px;
padding: 0 6px !important;
text-align: center;
cursor: pointer;
&:hover {
background-color: #1E2C4C !important;
border-radius: 10px;
border: 1px solid #2B3F69;
}
.svg-icon {
margin-right: 0 !important;
}
}
.side-one-popover{
min-width: 52px;
padding-bottom: 0;
.side-title{
font-size: 12px;
height: 24px;
line-height: 24px;
border-bottom: 0;
}
}
.side-logo-popover{
width: 120px;
padding-top: 16px;
padding-bottom: 0;
margin-left: 16px !important;
.sidebar-logo{
width: 24px;
height: 24px;
background: #F5F5F5;
margin: 0 auto;
text-align: center;
img{
width: 16px;
height: 23px;
}
}
.side-title{
text-align: center;
font-size: 12px;
height: auto;
line-height: 18px;
border-bottom: 0;
padding-top: 6px;
padding-bottom: 10px;
}
}
\ No newline at end of file
dsk-operate-ui/src/assets/styles/variables.scss
View file @ e32e4f2f
...@@ -40,9 +40,18 @@ $base-sub-menu-hover:#001528; ...@@ -40,9 +40,18 @@ $base-sub-menu-hover:#001528;
$base-menu-background:#141b2f; $base-menu-background:#141b2f;
$base-menu-light-background: #fff; // 选中菜单的字体颜色 $base-menu-light-background: #fff; // 选中菜单的字体颜色
$base-logo-light-title-color: #fff; // 对应base-logo-title-color $base-logo-light-title-color: #fff; // 对应base-logo-title-color
$menuText:#FFFFFF;
$menuActiveText:#FFFFFF;
$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
$menuBg:#141B2F;
$menuHover:#263445;
$subMenuBg:#1f2d3d;
$subMenuHover:#001528;
$base-sidebar-width: 144px; $base-sidebar-width: 144px;
$sideBarWidth: 144px;
//系统默认颜色 //系统默认颜色
$systemColor:#0081FF; $systemColor:#0081FF;
...@@ -50,14 +59,23 @@ $systemColor:#0081FF; ...@@ -50,14 +59,23 @@ $systemColor:#0081FF;
// the :export directive is the magic sauce for webpack // the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export { :export {
menuText: $menuText;
menuActiveText: $menuActiveText;
subMenuActiveText: $subMenuActiveText;
menuBg: $menuBg;
menuHover: $menuHover;
subMenuBg: $subMenuBg;
subMenuHover: $subMenuHover;
sideBarWidth: $sideBarWidth;
menuColor: $base-menu-color; menuColor: $base-menu-color;
menuLightColor: $base-menu-light-color; menuLightColor: $base-menu-light-color;
menuColorActive: $base-menu-color-active; menuColorActive: $base-menu-color-active;
menuBackground: $base-menu-background; menuBackground: $base-menu-background;
menuLightBackground: $base-menu-light-background; menuLightBackground: $base-menu-light-background;
subMenuBackground: $base-sub-menu-background; subMenuBackground: $base-sub-menu-background;
subMenuHover: $base-sub-menu-hover; // subMenuHover: $base-sub-menu-hover;
sideBarWidth: $base-sidebar-width; // sideBarWidth: $base-sidebar-width;
logoTitleColor: $base-logo-title-color; logoTitleColor: $base-logo-title-color;
logoLightTitleColor: $base-logo-light-title-color; logoLightTitleColor: $base-logo-light-title-color;
systemColor: $systemColor systemColor: $systemColor
......
dsk-operate-ui/src/layout/components/Sidebar/Item.vue
View file @ e32e4f2f
...@@ -15,8 +15,7 @@ export default { ...@@ -15,8 +15,7 @@ export default {
render(h, context) { render(h, context) {
const { icon, title } = context.props const { icon, title } = context.props
const vnodes = [] const vnodes = []
if (icon&&icon!='#') {
if (icon) {
vnodes.push(<svg-icon icon-class={icon}/>) vnodes.push(<svg-icon icon-class={icon}/>)
} }
......
dsk-operate-ui/src/layout/components/Sidebar/SidebarItem.vue
View file @ e32e4f2f
<template> <template>
<div v-if="!item.hidden"> <div v-if="!item.hidden">
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"> <!-- 展开 -->
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)"> <template v-if="!isCollapse">
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}"> <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" /> <item :icon="sideIcon(item, onlyOneChild)" :title="onlyOneChild.meta.title" />
</el-menu-item> </el-menu-item>
</app-link> </app-link>
</template> </template>
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body> <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
<template slot="title"> <template slot="title">
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" /> <item v-if="item.meta" :icon="sideIcon(item)" :title="item.meta.title" />
</template> </template>
<sidebar-item <sidebar-item
v-for="child in item.children" v-for="child in item.children"
...@@ -18,9 +19,53 @@ ...@@ -18,9 +19,53 @@
:is-nest="true" :is-nest="true"
:item="child" :item="child"
:base-path="resolvePath(child.path)" :base-path="resolvePath(child.path)"
:active-menu="activeMenu"
class="nest-menu" class="nest-menu"
/> />
</el-submenu> </el-submenu>
</template>
<!-- 收起 -->
<template v-else>
<div v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow" class="side-retract">
<el-popover
placement="right-start"
popper-class="side-popover side-one-popover"
:visible-arrow="true"
trigger="hover"
:disabled="onlyOneChild.meta||item.meta?false:true"
>
<div class="side-container">
<div class="side-title">
<app-link v-if="onlyOneChild.meta || item.meta" :to="resolvePath(onlyOneChild.path || item.path)">
{{ onlyOneChild.meta.title || item.meta.title }}
</app-link>
</div>
</div>
<item v-if="onlyOneChild.meta" slot="reference" :icon="sideIcon(item, onlyOneChild)" />
</el-popover>
</div>
<div v-else class="side-retract">
<el-popover
placement="right-start"
popper-class="side-popover"
:visible-arrow="true"
trigger="hover"
:disabled="item.meta?false:true"
>
<div class="side-container">
<div class="side-title">{{ item.meta.title }}</div>
<ul class="side-list">
<li v-for="child in item.children" :key="child.path">
<app-link v-if="child.meta" :to="resolvePath(child.path)">
{{ child.meta.title }}
</app-link>
</li>
</ul>
</div>
<item v-if="item.meta" slot="reference" :icon="sideIcon(item)" />
</el-popover>
</div>
</template>
</div> </div>
</template> </template>
...@@ -41,6 +86,10 @@ export default { ...@@ -41,6 +86,10 @@ export default {
type: Object, type: Object,
required: true required: true
}, },
isCollapse: {
type: Boolean,
default: false
},
isNest: { isNest: {
type: Boolean, type: Boolean,
default: false default: false
...@@ -48,12 +97,52 @@ export default { ...@@ -48,12 +97,52 @@ export default {
basePath: { basePath: {
type: String, type: String,
default: '' default: ''
},
activeMenu: {
type: String,
default: ''
} }
}, },
data() { data() {
this.onlyOneChild = null this.onlyOneChild = null
return {} return {}
}, },
computed: {
sideIcon() {
return function(item, onlyOneChild) {
let icon = ''
if (onlyOneChild) {
if(onlyOneChild.meta.icon || (item.meta && item.meta.icon&&item.meta.icon!='#')){
icon = onlyOneChild.meta.icon || (item.meta && item.meta.icon)
}
let tempPath = ''
if (onlyOneChild.path) {
tempPath = this.resolvePath(onlyOneChild.path)
console.log(tempPath);
console.log(this.activeMenu);
if (this.activeMenu === tempPath&&onlyOneChild.meta.icon!='#') {
icon = onlyOneChild.meta.icon+'s'
}
} else {
tempPath = this.resolvePath(item.path).substring(0, this.resolvePath(item.path).lastIndexOf('/'))
if (this.activeMenu === tempPath&&item.meta.icon!='#') {
icon = item.meta.icon+'s'
}
}
} else {
if(item.meta && item.meta.icon&&item.meta.icon!='#'){
icon = item.meta.icon
}
const tempPath = this.activeMenu.substring(0, this.activeMenu.indexOf('/', this.activeMenu.indexOf('/') + 1))
if (this.resolvePath(item.path) === tempPath&&item.meta.icon!='#') {
icon = item.meta.icon+'s'
}
}
console.log(icon);
return icon
}
}
},
methods: { methods: {
hasOneShowingChild(children = [], parent) { hasOneShowingChild(children = [], parent) {
if (!children) { if (!children) {
......
dsk-operate-ui/src/layout/components/Sidebar/index.vue
View file @ e32e4f2f
<template> <template>
<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> <div :class="{'has-logo':showLogo}" @mouseenter="sideEnter" @mouseleave="sideLeave" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<logo v-if="showLogo" :collapse="isCollapse" /> <logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper"> <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
<el-menu <el-menu
:default-active="activeMenu" :default-active="activeMenu"
:collapse="isCollapse" :collapse="isCollapse"
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground" :background-color="variables.menuBg"
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor" :text-color="variables.menuText"
:unique-opened="true" :unique-opened="true"
:active-text-color="settings.theme" :active-text-color="settings.theme"
:collapse-transition="false" :collapse-transition="false"
...@@ -14,12 +14,21 @@ ...@@ -14,12 +14,21 @@
> >
<sidebar-item <sidebar-item
v-for="(route, index) in sidebarRouters" v-for="(route, index) in sidebarRouters"
:key="route.path + index" :key="route.path + index"
:is-collapse="isCollapse"
:active-menu="activeMenu"
:item="route" :item="route"
:base-path="route.path" :base-path="route.path"
:class="route.fixed&&route.fixed.isFixed?'sideFoot':''"
:style="route.fixed&&route.fixed.isFixed?{'bottom': route.fixed.number*50+'px'}: bottomMenu&&index==routes.length-bottomMenu-2?{'padding-bottom': bottomMenu*50+'px'}:''"
/> />
</el-menu> </el-menu>
</el-scrollbar> </el-scrollbar>
<div v-show="isExpand" class="side-expand" @click="toggleSideBar">
<img :src="isCollapse?require('@/assets/images/sidebar_right.png'):require('@/assets/images/sidebar_left.png')">
</div>
</div> </div>
</template> </template>
...@@ -30,7 +39,13 @@ import SidebarItem from "./SidebarItem"; ...@@ -30,7 +39,13 @@ import SidebarItem from "./SidebarItem";
import variables from "@/assets/styles/variables.scss"; import variables from "@/assets/styles/variables.scss";
export default { export default {
components: { SidebarItem, Logo }, components: { SidebarItem, Logo },
data() {
return {
isExpand: false
}
},
computed: { computed: {
...mapState(["settings"]), ...mapState(["settings"]),
...mapGetters(["sidebarRouters", "sidebar"]), ...mapGetters(["sidebarRouters", "sidebar"]),
...@@ -43,6 +58,14 @@ export default { ...@@ -43,6 +58,14 @@ export default {
} }
return path; return path;
}, },
device() {
return this.$store.state.app.device
},
bottomMenu() {
const routeArr = this.$router.options.routes
const navFixed = routeArr.filter(item => item.fixed && item.fixed.isFixed)
return navFixed.length
},
showLogo() { showLogo() {
return this.$store.state.settings.sidebarLogo; return this.$store.state.settings.sidebarLogo;
}, },
...@@ -51,7 +74,23 @@ export default { ...@@ -51,7 +74,23 @@ export default {
}, },
isCollapse() { isCollapse() {
return !this.sidebar.opened; return !this.sidebar.opened;
},
},
methods: {
toggleSideBar(){
this.$emit('handleBar', this.isCollapse ? '-96' : '96'); // 96为展开宽度和收起宽度之差
this.$store.dispatch('app/toggleSideBar');
},
sideEnter(){
if (this.device !== 'mobile') {
this.isExpand = true;
} }
},
sideLeave(){
if (this.device !== 'mobile') {
this.isExpand = false;
} }
},
},
}; };
</script> </script>
dsk-operate-ui/src/layout/index.vue
View file @ e32e4f2f
<template> <template>
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"> <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
<sidebar v-if="!sidebar.hide" class="sidebar-container"/> <sidebar v-if="!sidebar.hide" class="sidebar-container" @handleBar="handleSideBar"/>
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container"> <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
<div :class="{'fixed-header':fixedHeader}"> <div :class="{'fixed-header':fixedHeader}">
<navbar/> <navbar :is-side-bar="isSideBar"/>
<tags-view v-if="needTagsView"/> <tags-view v-if="needTagsView"/>
</div> </div>
<app-main/> <app-main/>
...@@ -33,6 +33,11 @@ export default { ...@@ -33,6 +33,11 @@ export default {
TagsView TagsView
}, },
mixins: [ResizeMixin], mixins: [ResizeMixin],
data() {
return {
isSideBar: ''
}
},
computed: { computed: {
...mapState({ ...mapState({
theme: state => state.settings.theme, theme: state => state.settings.theme,
...@@ -57,6 +62,9 @@ export default { ...@@ -57,6 +62,9 @@ export default {
methods: { methods: {
handleClickOutside() { handleClickOutside() {
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false }) this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
},
handleSideBar(val) {
this.isSideBar = val
} }
} }
} }
......
dsk-operate-ui/src/router/index.js
View file @ e32e4f2f
...@@ -70,7 +70,7 @@ export const constantRoutes = [ ...@@ -70,7 +70,7 @@ export const constantRoutes = [
path: 'index', path: 'index',
component: () => import('@/views/index'), component: () => import('@/views/index'),
name: 'Index', name: 'Index',
meta: { title: '首页', icon: 'dashboard', affix: true } meta: { title: '首页', icon: 'index', affix: true }
} }
] ]
}, },
......
dsk-operate-ui/src/views/enterpriseData/index.vue 0 → 100644
View file @ e32e4f2f
<template>
<div class="app-container">
<iframe ref="companyIframe" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" width="100%" :height="iframeHight" src="https://pre.jiansheku.com/enterprise/56546856314e567a69/" />
</div>
</template>
<script>
export default {
name: 'EnterpriseData',
components: {
},
data() {
return {
iframeHight: null,
iframeWin: {}
}
},
computed: {
},
created() {
},
mounted() {
this.getInframeHight()
},
methods: {
getInframeHight() {
const _this = this
window.addEventListener('message', function(e) {
const data = e.data
if (data && typeof data === 'object' && data.height) {
_this.iframeHight = data.height
}
})
}
}
}
</script>
<style lang="scss" scoped>
</style>
dsk-operate-ui/src/views/system/menu/index.vue
View file @ e32e4f2f
...@@ -135,7 +135,7 @@ ...@@ -135,7 +135,7 @@
@show="$refs['iconSelect'].reset()" @show="$refs['iconSelect'].reset()"
> >
<IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" /> <IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" />
<el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly> <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" >
<svg-icon <svg-icon
v-if="form.icon" v-if="form.icon"
slot="prefix" slot="prefix"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment