上传代码
This commit is contained in:
pengxiaolong
@@ -1,89 +1,205 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<Sidebar class="noneText" @activeIndex="activeIndexFn" />
|
||||
<div class="content ">
|
||||
<div v-show="activeIndexA == 1">
|
||||
<workbenches />
|
||||
</div>
|
||||
<div v-show="activeIndexA == 2">
|
||||
<hostsList />
|
||||
</div>
|
||||
<div style="position: absolute; bottom: 0; right: 0;">{{ version }}</div>
|
||||
<div class="common-layout">
|
||||
<el-container class="container">
|
||||
<el-aside :width="asideWidth" class="aside">
|
||||
<!-- logo -->
|
||||
<div class="logo" :style="{ width: isCollapse ? '4vw' : '10vw' }">
|
||||
<img
|
||||
class="logoimg"
|
||||
:style="{
|
||||
width: isCollapse ? '3vw' : '6vw',
|
||||
height: isCollapse ? '3vw' : '6vw',
|
||||
}"
|
||||
src="../assets//icon.png"
|
||||
alt="图标"
|
||||
/>
|
||||
</div>
|
||||
<!-- 收缩按钮 -->
|
||||
<div
|
||||
class="collapse-btn"
|
||||
:style="{ width: isCollapse ? '4vw' : '10vw' }"
|
||||
@click="toggleCollapse"
|
||||
>
|
||||
<el-icon v-if="isCollapse"><ArrowRightBold /></el-icon
|
||||
><el-icon v-else><ArrowLeftBold /></el-icon>
|
||||
</div>
|
||||
<!-- 菜单 -->
|
||||
<el-row class="row">
|
||||
<el-col :span="12">
|
||||
<el-menu
|
||||
default-active="/nav"
|
||||
background-color="#545c64"
|
||||
router
|
||||
text-color="#fff"
|
||||
@open="handleOpen"
|
||||
@close="handleClose"
|
||||
@select="handleSelect"
|
||||
:collapse="isCollapse"
|
||||
popper-offset="-115"
|
||||
class="menu"
|
||||
>
|
||||
<el-sub-menu index="1" class="sub-menu">
|
||||
<template #title>
|
||||
<el-icon><Tickets /></el-icon>
|
||||
<span>Ai管理</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<template #title><span>Ai</span></template>
|
||||
<el-menu-item index="/nav/scriptManagement">话术管理</el-menu-item>
|
||||
<el-menu-item index="/nav/LanguageManagement">语言管理</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-sub-menu>
|
||||
|
||||
<el-sub-menu index="2" class="sub-menu">
|
||||
<template #title>
|
||||
<el-icon><Collection /></el-icon>
|
||||
<span>小程序管理</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<template #title><span>小程序</span></template>
|
||||
<el-menu-item index="/nav/miniAM">账号管理</el-menu-item>
|
||||
<el-menu-item index="/nav/miniIntegral">积分配置</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-sub-menu>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-aside>
|
||||
|
||||
</div>
|
||||
<el-container>
|
||||
<!-- 顶部 -->
|
||||
<el-header class="header">
|
||||
<el-breadcrumb :separator-icon="ArrowRight">
|
||||
<el-breadcrumb-item :to="{ path: '/nav/Home' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item
|
||||
v-for="(item, index) in breadcrumbList"
|
||||
:key="index"
|
||||
replace="true"
|
||||
:to="{ path: handleurl(item.path) }"
|
||||
>
|
||||
{{ item.name }}
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</el-header>
|
||||
<!-- 内容 -->
|
||||
<el-main class="main">
|
||||
<router-view>
|
||||
</router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Sidebar from '../components/Sidebar.vue';
|
||||
import { RouterLink, RouterView } from 'vue-router'
|
||||
import hostsList from '@/views/hosts/hostsList.vue'
|
||||
import workbenches from '@/views/hosts/workbenches.vue'
|
||||
import { ref } from 'vue'
|
||||
import { getUser } from '@/utils/storage'
|
||||
// import { usePythonBridge } from '@/utils/pythonBridge'
|
||||
import { ref } from "vue";
|
||||
import {
|
||||
Menu as IconMenu,
|
||||
Message,
|
||||
Setting,
|
||||
Tickets,
|
||||
Collection,
|
||||
ArrowRightBold,
|
||||
ArrowLeftBold,
|
||||
} from "@element-plus/icons-vue";
|
||||
import { ArrowRight } from "@element-plus/icons-vue";
|
||||
import { RouterLink, RouterView } from "vue-router";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let activeIndexA = ref(1)
|
||||
|
||||
function activeIndexFn(data) {
|
||||
activeIndexA.value = data
|
||||
console.log(data)
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const isCollapse = ref(false);
|
||||
const asideWidth = ref("10vw");
|
||||
const breadcrumbList = ref([]);
|
||||
//路由映射
|
||||
function convertPathsToMenuItems(paths) {
|
||||
const pathMap = {
|
||||
1: "ai管理",
|
||||
2: "小程序管理",
|
||||
"/nav/scriptManagement": "话术管理",
|
||||
"/nav/miniAM": "小程序账号管理",
|
||||
"/nav/miniIntegral": "积分配置",
|
||||
"/nav/LanguageManagement": "语言管理",
|
||||
};
|
||||
return paths.map((path) => {
|
||||
const name = pathMap[path];
|
||||
if (!name) throw new Error(`未找到路径 ${path} 对应的名称`);
|
||||
return { name, path };
|
||||
});
|
||||
}
|
||||
//面包屑
|
||||
function handleSelect(index, indexPath) {
|
||||
console.log("select", convertPathsToMenuItems(indexPath));
|
||||
breadcrumbList.value = convertPathsToMenuItems(indexPath);
|
||||
}
|
||||
//面包屑地址判断
|
||||
function handleurl(indexPath) {
|
||||
if (indexPath === "1" || indexPath === "2") {
|
||||
return "";
|
||||
} else {
|
||||
return indexPath;
|
||||
}
|
||||
}
|
||||
//菜单展开
|
||||
function toggleCollapse() {
|
||||
asideWidth.value = isCollapse.value ? "10vw" : "4vw";
|
||||
isCollapse.value = isCollapse.value ? false : true;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
<style scoped>
|
||||
.common-layout {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
.aside {
|
||||
height: 100vh;
|
||||
background-color: rgb(87, 87, 87);
|
||||
transition: width 0.3s ease; /* 添加过渡效果 */
|
||||
}
|
||||
.header {
|
||||
width: 85vw;
|
||||
height: 4vh;
|
||||
background-color: rgb(255, 255, 255);
|
||||
display: flex;
|
||||
width: 1600px;
|
||||
height: 900px;
|
||||
background-color: @bg-color;
|
||||
position: relative;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.noneText {
|
||||
/* 页面无法选中 */
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 200px;
|
||||
background-color: @bg-color;
|
||||
padding: 20px;
|
||||
/* box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); */
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: 280px;
|
||||
width: 1304px;
|
||||
height: 868px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 36px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.center-justify {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 90vh;
|
||||
background-color: rgb(199, 199, 199);
|
||||
}
|
||||
.logo {
|
||||
margin-top: 10px;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 10vh;
|
||||
width: 10vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.logoimg {
|
||||
transition: width 0.3s ease; /* 添加过渡效果 */
|
||||
transition: height 0.3s ease; /* 添加过渡效果 */
|
||||
border-radius: 20%;
|
||||
}
|
||||
.row {
|
||||
width: 10vw;
|
||||
height: 80vh;
|
||||
}
|
||||
.menu {
|
||||
width: 10vw;
|
||||
font-size: 30px;
|
||||
}
|
||||
.collapse-btn {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: width 0.3s ease; /* 添加过渡效果 */
|
||||
background-color: #3b4046;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user