<template>
|
<div class="index">
|
<div class="left">
|
<div class="logo">
|
<img style="width: 60px;height: 60px" src="@/assets/img/logo.png"/>
|
</div>
|
<div class="menu">
|
<div :class="{tab: true, activeTab: activeTab === 0}" @click="changeTab(0)">
|
<svg t="1742895429099" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1205" width="18" height="18">
|
<path d="M174.72 855.68l130.048-43.392 23.424 11.392C382.4 849.984 444.352 864 512 864c223.744 0 384-159.872 384-352 0-192.832-159.104-352-384-352S128 319.168 128 512a341.12 341.12 0 0 0 69.248 204.288l21.632 28.8-44.16 110.528z m-45.248 82.56A32 32 0 0 1 89.6 896l56.512-141.248A405.12 405.12 0 0 1 64 512C64 299.904 235.648 96 512 96s448 203.904 448 416-173.44 416-448 416c-79.68 0-150.848-17.152-211.712-46.72l-170.88 56.96z" p-id="1206" :fill="activeTab === 0 ? 'blue' : 'grey'">
|
</path></svg>
|
<span style="margin-left: 10px">对话</span></div>
|
<div :class="{tab: true, activeTab: activeTab === 1}" style="margin-top: 2px" @click="changeTab(1)">
|
<svg style="margin-left: -1px" t="1742895849411" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1227" width="20" height="20"><path d="M921.6 366.592L512 102.4 102.4 366.592l409.6 264.192z m-409.6-153.6L759.296 358.4 512 503.296 264.704 358.4z m0 621.568l-361.472-224.256-48.128 47.104L512 921.6l409.6-264.192-48.64-48.128z m0-145.408L150.528 464.896 102.4 512l409.6 264.192L921.6 512l-48.64-48.128z" p-id="1228" :fill="activeTab === 1 ? 'blue' : 'grey'"></path></svg>
|
<span style="margin-left: 8px">知识库管理</span>
|
</div>
|
</div>
|
<div class="setting">
|
这是配置板块
|
</div>
|
</div>
|
<div class="right">
|
<router-view></router-view>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "IndexView",
|
data() {
|
return {
|
activeTab: 0
|
}
|
},
|
mounted() {
|
this.changeRoute(this.activeTab)
|
},
|
methods: {
|
changeTab(index) {
|
if (index !== this.activeTab) {
|
this.activeTab = index
|
this.changeRoute(index)
|
}
|
},
|
changeRoute(index) {
|
console.log(this.$router.currentRoute.path, "路由")
|
if (index === 0 && this.$router.currentRoute.path !== "/chat") {
|
this.$router.push("/chat")
|
} else if (index === 1 && this.$router.currentRoute.path !== "/knowledge") {
|
this.$router.push("/knowledge")
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.index {
|
display: flex;
|
}
|
.left {
|
width: 250px;
|
height: calc(100vh - 20px);
|
background-color: #f3f3f3;
|
padding: 0px 40px;
|
}
|
.right {
|
width: 1600px;
|
}
|
.logo {
|
width: 100%;
|
height: 80px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.menu {
|
height: 150px;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
}
|
.tab {
|
width: 100%;
|
line-height: 30px;
|
padding-left: 16px;
|
display: flex;
|
justify-content: flex-start;
|
border-radius: 8px;
|
align-items: center;
|
}
|
.activeTab {
|
background-color: #bed7f5;
|
color: blue;
|
}
|
.tab:hover {
|
cursor: pointer;
|
background-color: #bed7f5;
|
color: blue;
|
}
|
|
</style>
|
