修改成管理系统

src/assets/main.css

@@ -1,9 +1,8 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
+  width: 100%;
-  margin: 0 auto;
+  min-height: 100vh;
-  padding: 2rem;
   font-weight: normal;
 }
 
@@ -21,15 +20,4 @@ a,
   }
 }
 
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
 
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}

src/layout/Layout.vue

@@ -0,0 +1,249 @@
+<template>
+  <el-container class="layout-container">
+    <el-aside :width="isCollapse ? '64px' : '200px'" class="sidebar">
+      <div class="logo">
+        <img src="@/assets/img/logo.svg" alt="logo" />
+        <span v-if="!isCollapse">综合系统</span>
+      </div>
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="isCollapse"
+        router
+        background-color="#304156"
+        text-color="#bfcbd9"
+        active-text-color="#409eff"
+      >
+        <template v-for="(item, index) in menuList" :key="index">
+          <el-menu-item v-if="item.show" :index="item.path">
+            <el-icon><component :is="item.icon" /></el-icon>
+            <template #title>{{ item.title }}</template>
+          </el-menu-item>
+        </template>
+      </el-menu>
+    </el-aside>
+    <el-container class="main-container">
+      <el-header class="header">
+        <div class="header-left">
+          <el-icon class="collapse-btn" @click="toggleCollapse">
+            <Fold v-if="!isCollapse" />
+            <Expand v-else />
+          </el-icon>
+        </div>
+        <div class="header-right">
+          <el-dropdown @command="handleCommand">
+            <span class="user-info">
+              <el-icon><User /></el-icon>
+              {{ username }}
+              <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+            </span>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="projectSelect">项目选择</el-dropdown-item>
+                <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </el-header>
+      <el-main class="main-content">
+        <router-view />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import {
+  Fold,
+  Expand,
+  User,
+  ArrowDown,
+  VideoCamera,
+  Monitor,
+  Setting,
+  Document,
+  Tools,
+  ChatDotRound,
+  UserFilled,
+  OfficeBuilding,
+  Connection,
+} from "@element-plus/icons-vue";
+
+const router = useRouter();
+const route = useRoute();
+const isCollapse = ref(false);
+const username = ref(localStorage.getItem("username") || "用户");
+
+const activeMenu = computed(() => route.path);
+
+const menuList = ref([
+  {
+    path: "/videoList",
+    title: "视频列表",
+    icon: VideoCamera,
+    show: localStorage.getItem("video_func") === "true",
+  },
+  {
+    path: "/device",
+    title: "设备管理",
+    icon: Monitor,
+    show: localStorage.getItem("device_func") === "true",
+  },
+  {
+    path: "/cid",
+    title: "集成部署",
+    icon: Setting,
+    show: localStorage.getItem("cid_func") === "true",
+  },
+  {
+    path: "/cidlog",
+    title: "部署日志",
+    icon: Document,
+    show: localStorage.getItem("cid_func") === "true",
+  },
+  {
+    path: "/file",
+    title: "文件",
+    icon: Document,
+    show: localStorage.getItem("role") === "admin",
+  },
+  {
+      path: "/shell",
+      title: "执行命令",
+      icon: Tools,
+      show: localStorage.getItem("role") === "admin",
+    },
+  {
+    path: "/user",
+    title: "用户",
+    icon: UserFilled,
+    show: true,
+  },
+  {
+    path: "/chat",
+    title: "聊天",
+    icon: ChatDotRound,
+    show: true,
+  },
+  {
+    path: "/group",
+    title: "群组",
+    icon: OfficeBuilding,
+    show: true,
+  },
+  {
+    path: "/im",
+    title: "即时通讯",
+    icon: Connection,
+    show: true,
+  },
+]);
+
+const toggleCollapse = () => {
+  isCollapse.value = !isCollapse.value;
+};
+
+const handleCommand = (command) => {
+  if (command === "logout") {
+    if (confirm("确定退出登录吗？")) {
+      localStorage.clear();
+      router.push("/login");
+    }
+  } else if (command === "projectSelect") {
+    router.push("/projectSelect");
+  }
+};
+</script>
+
+<style scoped>
+.layout-container {
+  height: 100vh;
+  width: 100%;
+}
+
+.sidebar {
+  background-color: #304156;
+  transition: width 0.3s;
+  overflow-x: hidden;
+}
+
+.logo {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #263445;
+  color: #fff;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.logo img {
+  width: 32px;
+  height: 32px;
+  margin-right: 10px;
+}
+
+.logo span {
+  white-space: nowrap;
+}
+
+.main-container {
+  display: flex;
+  flex-direction: column;
+  background-color: #f0f2f5;
+}
+
+.header {
+  background-color: #fff;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.collapse-btn {
+  font-size: 20px;
+  cursor: pointer;
+  color: #606266;
+}
+
+.collapse-btn:hover {
+  color: #409eff;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  color: #606266;
+}
+
+.user-info:hover {
+  color: #409eff;
+}
+
+.main-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  background-color: #f0f2f5;
+}
+
+.el-menu {
+  border-right: none;
+}
+</style>

src/router/index.js

@@ -1,5 +1,6 @@
 import {createWebHistory, createRouter} from "vue-router";
 
+import Layout from "@/layout/Layout.vue";
 import LoginVue from "@/views/Login.vue";
 import VideoVue from "@/views/Video.vue";
 import VideoListVue from "@/views/VideoList.vue";
@@ -25,78 +26,81 @@ const routes = [
         component: LoginVue
     },
     {
-        path: '/video',
+        path: '/',
-        name: 'Video',
+        component: Layout,
-        component: VideoVue
+        redirect: '/user',
-    },
+        children: [
-    {
+            {
-        path: '/videoList',
+                path: 'video',
-        name: 'VideoList',
+                name: 'Video',
-        component: VideoListVue
+                component: VideoVue
-    },
+            },
-    {
+            {
-        path: '/device',
+                path: 'videoList',
-        name: 'Device',
+                name: 'VideoList',
-        component: DeviceListVue
+                component: VideoListVue
-    },
+            },
-    {
+            {
-        path: '/deviceRealVP',
+                path: 'device',
-        name: 'DeviceRealVP',
+                name: 'Device',
-        component: DeviceRealVP
+                component: DeviceListVue
-    },
+            },
-    {
+            {
-        path: '/im',
+                path: 'deviceRealVP',
-        name: 'Im',
+                name: 'DeviceRealVP',
-        component: ImVue
+                component: DeviceRealVP
-    },
+            },
-    {
+            {
-        path: '/user',
+                path: 'im',
-        name: 'User',
+                name: 'Im',
-        component: UserListVue
+                component: ImVue
-    },
+            },
-    {
+            {
-        path: '/cid',
+                path: 'user',
-        name: 'CID',
+                name: 'User',
-        component: CIDListVue
+                component: UserListVue
-    },
+            },
-    {
+            {
-        path: "/group",
+                path: 'cid',
-        name: "Group",
+                name: 'CID',
-        component: Group
+                component: CIDListVue
-    },
+            },
-    {
+            {
-        path: '/cidlog',
+                path: 'group',
-        name: 'CIDLog',
+                name: 'Group',
-        component: CIDLog
+                component: Group
-    },
+            },
-    {
+            {
-        path:"/chat",
+                path: 'cidlog',
-        name:"chat",
+                name: 'CIDLog',
-        component:Chat
+                component: CIDLog
-    },
+            },
-    {
+            {
-        path:"/file",
+                path: 'chat',
-        name:"file",
+                name: 'chat',
-        component:File
+                component: Chat
-    },
+            },
-    {
+            {
-        path:"/shell",
+                path: 'file',
-        name:"shell",
+                name: 'file',
-        component:Shell
+                component: File
+            },
+            {
+                path: 'shell',
+                name: 'shell',
+                component: Shell
+            },
+            {
+                path: 'projectSelect',
+                name: 'projectSelect',
+                component: projectSelect
+            }
+        ]
     },
     {
         path: '/callback',
         name: 'callback',
         component: callback
-    },
-    {
-        path: '/projectSelect',
-        name: 'projectSelect',
-        component: projectSelect
-    },
-    {
-        path: '/',
-        redirect: '/login'
     }
 ]
 

src/views/CIDList.vue

@@ -7,7 +7,7 @@ import { addCIDService } from "@/api/cid.js";
 import { deleteCIDService } from "@/api/cid.js";
 import { updateCIDService,getCIDRuningListService } from "@/api/cid.js";
 import router from "@/router/index.js";
-import Menu from "@/views/Menu.vue";
+
 
 import {ElMessage, ElLoading} from "element-plus";
 
@@ -301,8 +301,7 @@ export default {
 
 <template>
   <div>
-    <Menu></Menu>
+    <el-container style="min-height: calc(100vh - 40px); background: #fff; border-radius: 4px;">
-    <el-container style="height: 700px; border: 1px solid #eee">
       <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
         >集成部署项目</el-header
       >

src/views/CIDLog.vue

@@ -7,7 +7,7 @@ import { addCIDService } from "@/api/cid.js";
 import { deleteCIDService } from "@/api/cid.js";
 import { updateCIDService } from "@/api/cid.js";
 import router from "@/router/index.js";
-import Menu from "@/views/Menu.vue";
+
 
 export default {
   data() {
@@ -191,8 +191,7 @@ export default {
 
 <template>
   <div>
-    <Menu></Menu>
+    <el-container style="min-height: calc(100vh - 40px); background: #fff; border-radius: 4px;">
-    <el-container style="height: 700px; border: 1px solid #eee">
       <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
         >集成部署项目日志{{ tokenData.id }}</el-header
       >

src/views/DeviceList.vue

@@ -8,7 +8,7 @@ import { deleteDeviceService } from "@/api/device.js";
 import { updateDeviceService } from "@/api/device.js";
 import router from "@/router/index.js";
 import { ElMessage } from 'element-plus';  
-import Menu from "@/views/Menu.vue";
+
 import VideoStream from "@/views/DeviceRealVPV2.vue";
 
 export default {
@@ -254,8 +254,7 @@ export default {
 
 <template>
   <div>
-    <Menu></Menu>
+    <el-container style="min-height: calc(100vh - 40px); background: #fff; border-radius: 4px;">
-    <el-container style="height: 700px; border: 1px solid #eee">
       <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
         >监控设备列表</el-header
       >

src/views/FileList.vue

@@ -2,7 +2,7 @@
 import router from "@/router/index.js";
 import { autoResizerProps, ElMessage } from "element-plus";
 import CryptoJS from "crypto-js";
-import Menu from "@/views/Menu.vue";
+
 
 import { getConfigFileListService } from "@/api/file.js";
 import { addConfigFileService } from "@/api/file.js";
@@ -328,8 +328,7 @@ export default {
 
 <template>
   <div>
-    <Menu></Menu>
+    <el-container style="min-height: calc(100vh - 40px); background: #fff; border-radius: 4px;">
-    <el-container style="height: 700px; border: 1px solid #eee">
       <el-header style="font-size: 28px; font-weight: 500; background-color: #f5f7fa; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid #e4e7ed;"
         >配置文件管理</el-header
       >

src/views/Group.vue

@@ -16,7 +16,7 @@ import {DelFGService} from "@/api/user.js";
 import { updateDeviceService } from "@/api/device.js";
 import router from "@/router/index.js";
 import { ElMessage } from 'element-plus';  
-import Menu from "@/views/Menu.vue";
+
 
 
 export default {
@@ -431,8 +431,7 @@ export default {
 
 <template>
   <div>
-    <Menu></Menu>
+    <el-container style="min-height: calc(100vh - 40px); background: #fff; border-radius: 4px;">
-    <el-container style="height: 700px; border: 1px solid #eee">
       <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
         >群组</el-header
       >

src/views/Login.vue

@@ -72,12 +72,7 @@ const param = reactive({
 onMounted(async () => {
  // 保存登录参数到本地存储
    let res = await getMyUserInfo(localStorage.getItem("userId"));
-  if(res.code === 0){
+
-    // 如果已经登录，跳转到用户页面
-     router.push("/user");
-   }else{
-     window.location.href = "https://sv.ljsea.top/#/login?site=gs-vp";  //https://sv.ljsea.top/
-  }
  });
 
 // 表单验证规则

src/views/ShellList.vue

@@ -1,7 +1,7 @@
 <script>
 import router from "@/router/index.js";
 import { ElMessage } from "element-plus";
-import Menu from "@/views/Menu.vue";
+
 
 import { getConfigShellListService } from "@/api/shell.js";
 import { addConfigShellService } from "@/api/shell.js";
@@ -336,8 +336,7 @@ export default {
 
 <template>
   <div>
-    <Menu></Menu>
+    <el-container style="min-height: calc(100vh - 40px); background: #fff; border-radius: 4px;">
-    <el-container style="height: 700px; border: 1px solid #eee">
       <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
         >命令分发</el-header
       >

src/views/UserList.vue

@@ -17,7 +17,7 @@ import { getFriendListService } from "@/api/chat.js";
 import {sendMessageService} from "@/api/chat.js";
 import { ElMessage } from 'element-plus';
 import CryptoJS from 'crypto-js';
-import Menu from "@/views/Menu.vue";
+
 
 export default {
   data() {
@@ -454,8 +454,7 @@ export default {
 
 <template>
   <div>
-    <Menu></Menu>
+    <el-container style="min-height: calc(100vh - 40px); background: #fff; border-radius: 4px;">
-    <el-container style="height: 700px; border: 1px solid #eee">
       <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
         >用户搜索列表</el-header
       >

src/views/VideoList.vue

@@ -9,7 +9,7 @@ import { delayVideoService } from "@/api/video.js";
 import router from "@/router/index.js";
 import Cookies from "js-cookie";
 import { ElMessage } from "element-plus";
-import Menu from "@/views/Menu.vue";
+
 import VideoPlayer from "@/views/Video.vue";
 
 export default {
@@ -265,8 +265,7 @@ export default {
 
 <template>
   <div>
-    <Menu></Menu>
+    <el-container style="min-height: calc(100vh - 40px); background: #fff; border-radius: 4px;">
-    <el-container style="height: 700px; border: 1px solid #eee">
       <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
         >监控视频列表</el-header
       >