<template>
|
<el-menu
|
class="common-side-bar"
|
:default-active="$store.state.routerName"
|
background-color="#F5F5F5"
|
text-color="#262626"
|
active-text-color="#318DF1"
|
@select="select"
|
>
|
<el-menu-item index="ProjectList">
|
<i class="iconfont"></i> 首 页
|
</el-menu-item>
|
|
<template v-for="item of side_menu">
|
<el-menu-item
|
v-if="!item.children"
|
:key="item.url"
|
:index="item.url"
|
:disabled="$store.state.routerName === 'ProjectList'"
|
>
|
<span class="iconfont" v-html="item.code"></span> {{
|
item.name
|
}}
|
</el-menu-item>
|
|
<el-submenu
|
v-if="item.children"
|
:key="item.url"
|
:index="item.url"
|
:disabled="$store.state.routerName === 'ProjectList'"
|
>
|
<template slot="title">
|
<span class="iconfont" v-html="item.code"></span
|
> {{ item.name }}
|
</template>
|
<el-menu-item
|
v-for="subItem in item.children"
|
:key="subItem.url"
|
:index="subItem.url"
|
>
|
{{ subItem.name }}
|
</el-menu-item>
|
</el-submenu>
|
</template>
|
</el-menu>
|
</template>
|
|
<script>
|
export default {
|
name: "Side",
|
data() {
|
return {
|
side_menu: [
|
{ name: "项目概况", url: "ProjectDetail", code: "" },
|
{ name: "接口管理", url: "RecordApi", code: "" },
|
{
|
name: "测试用例",
|
url: "TestCase",
|
code: "",
|
children: [
|
{ name: "添加用例", url: "AutoTest" },
|
{ name: "录制用例", url: "RecordCase" }
|
]
|
},
|
{ name: "配置管理", url: "RecordConfig", code: "" },
|
{ name: "全局变量", url: "GlobalEnv", code: "" },
|
{ name: "驱动代码", url: "DebugTalk", code: "" },
|
{ name: "定时任务", url: "Tasks", code: "" },
|
{ name: "测试报告", url: "Reports", code: "" },
|
{
|
name: "日志管理",
|
url: "Logging",
|
code: "",
|
children: [{ name: "登录日志", url: "LoginLog" }]
|
}
|
]
|
};
|
},
|
methods: {
|
select(url) {
|
this.$store.commit("setRouterName", url);
|
this.$router.push({ name: url }).catch(err => {
|
// 忽略NavigationDuplicated错误
|
if (err.name !== "NavigationDuplicated") {
|
// 如果错误不是NavigationDuplicated，则继续抛出错误
|
throw err;
|
}
|
});
|
this.setLocalValue("routerName", url);
|
let projectName = "";
|
if (url !== "ProjectList") {
|
projectName = this.$store.state.projectName;
|
}
|
this.$store.commit("setProjectName", projectName);
|
}
|
},
|
mounted() {
|
if (this.$store.state.show_hosts) {
|
this.side_menu.splice(5, 0, {
|
name: "Hosts管理",
|
url: "HostIP",
|
code: ""
|
});
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.common-side-bar {
|
position: fixed;
|
top: 48px;
|
border-right: 1px solid #eaeaea;
|
height: calc(100% - 48px);
|
width: 200px;
|
background-color: #fff;
|
box-shadow: 2px 0 15px rgba(0, 0, 0, 0.03);
|
border-radius: 0 12px 12px 0;
|
z-index: 10;
|
}
|
|
.el-menu {
|
border-right: none;
|
padding: 8px 0;
|
}
|
|
.el-menu-item, .el-submenu__title {
|
height: 44px;
|
line-height: 44px;
|
margin: 4px 12px;
|
border-radius: 6px;
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
font-size: 14px;
|
font-weight: 500;
|
}
|
|
.el-menu-item:hover, .el-submenu__title:hover {
|
background-color: #f5f9ff !important;
|
color: #318DF1 !important;
|
transform: translateX(2px);
|
}
|
|
.el-menu-item.is-active {
|
background-color: #e6f0ff !important;
|
color: #318DF1 !important;
|
font-weight: 600;
|
}
|
|
.iconfont {
|
font-size: 18px;
|
vertical-align: middle;
|
margin-right: 8px;
|
}
|
|
.el-submenu .el-menu-item {
|
padding-left: 48px !important;
|
height: 36px;
|
line-height: 36px;
|
margin: 2px 12px;
|
font-size: 13px;
|
min-width: 0; /* 添加这行防止宽度溢出 */
|
width: auto; /* 添加这行让宽度自适应 */
|
}
|
|
.el-submenu /deep/ .el-submenu__title {
|
min-width: 0; /* 添加这行防止标题宽度溢出 */
|
}
|
|
.el-submenu .el-menu-item:hover {
|
background-color: #f0f7ff !important;
|
}
|
</style>
|
