用户管理页面开发

src/components/common/commonTable.vue

@@ -11,11 +11,12 @@
 
     <div class="table-container">
       <el-table
+        style="width: 100%"
         :data="tableData"
-        :height="height"
+        :height="tableHeight"
         :max-height="maxHeight"
         :stripe="stripe"
-        :border="border"
+        border
         :size="size"
         :fit="fit"
         :show-header="showTableHeader"
@@ -165,7 +166,10 @@ const props = defineProps({
     default: true,
   },
   // 表格高度
-  height: [String, Number],
+  tableHeight: {
+    type: [String, Number],
+    default: "auto",
+  },
   // 表格最大高度
   maxHeight: [String, Number],
   // 是否为斑马纹表格
@@ -516,32 +520,7 @@ const handleNextClick = (val) => {
   }
 }
 
-// 响应式设计
-@media (max-width: 768px) {
-  .common-table {
-    padding: 12px;
-
-    .table-header {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 12px;
-    }
-
-    .table-footer {
-      justify-content: center;
-
-      .el-pagination {
-        justify-content: center;
-      }
-    }
-  }
-}
 :deep(.el-table) {
-  th.el-table__cell {
-    // background-color: var(--el-table-header-bg-color);
-    // background-color: #e8ebf0;
-    background-color: #f2f6fd;
-  }
   thead {
     color: var(--el-table-header-text-color);
   }
@@ -556,14 +535,10 @@ const handleNextClick = (val) => {
   .el-pagination.is-background {
     .el-pager li {
       border: 1px solid #e7e9ee;
-      // background-color: #fff;
       font-weight: 400;
-      // color: #333;
     }
     .el-pager li:not(.disabled).is-active {
-      // background: rgba(91, 183, 59, 0.1);
       border: none;
-      // color: var(--el-color-primary);
       font-weight: 400;
     }
     .btn-prev,
@@ -571,48 +546,23 @@ const handleNextClick = (val) => {
       background-color: var(--el-disabled-bg-color);
     }
   }
-  .el-table__fixed-right-patch {
-    top: 0;
-    border: 1px solid #fff;
-  }
+}
+:deep(.el-table) {
   th.el-table__cell {
-    border-right: 1px solid #ebeef5;
+    background: #f5f7fa;
+    height: 50px;
+    text-align: center;
   }
-  .el-table__fixed-right {
-    top: -1px;
+  .el-table__body {
+    td.el-table__cell {
+      height: 45px;
+      line-height: 45px;
     }
-  .el-table--border,
-  .el-table--group {
-    border: 0px;
   }
   .el-table__cell {
-    border-right: 0;
-  }
-  &::before {
-    width: 0px;
+    .cell {
+      text-align: center;
     }
-  &::after {
-    width: 0px;
   }
-  .el-table__border-left-patch {
-    width: 0;
-  }
-}
-:deep(.el-table__header .cell) {
-  display: flex;
-  align-items: center;
-}
-:deep(.el-table) {
-  background-color: rgba(255, 255, 255, 0.5);
-}
-.common-table {
-  background: rgb(157 188 218 / 40%);
-}
-:deep(.el-table th.el-table__cell) {
-  background: rgba(4, 66, 126, 0.4);
-  color: #fff;
-}
-:deep(.el-table tr) {
-  background: rgb(157 188 218 / 40%);
 }
 </style>

src/layouts/MainLayout.vue

@@ -33,23 +33,32 @@
           router
         >
           <template v-for="route in menuRoutes" :key="route.path">
-            <el-menu-item v-if="!route.meta?.parent" :index="route.path">
+            <!-- 无子菜单的项目 -->
+            <el-menu-item
+              v-if="!route.children || route.children.length === 0"
+              :index="route.path"
+            >
               <el-icon><component :is="route.meta?.icon || 'menu'" /></el-icon>
               <span>{{ route.meta?.menuName || route.name }}</span>
             </el-menu-item>
-            <el-sub-menu v-else :index="route.meta.parent">
+
+            <!-- 有子菜单的项目 -->
+            <el-sub-menu v-else :index="route.path">
               <template #title>
                 <el-icon
                   ><component :is="route.meta?.icon || 'menu'"
                 /></el-icon>
-                <span>{{ route.meta.parent }}</span>
+                <span>{{ route.meta?.menuName || route.name }}</span>
               </template>
+              <template v-for="child in route.children" :key="child.path">
                 <el-menu-item
-                :index="route.path"
-                style="padding-left: 70px !important"
+                  :index="child.path"
+                  style="padding-left: 20px !important"
                 >
-                {{ route.meta.menuName }}
+                  <el-icon><component :is="child.meta?.icon || ''" /></el-icon>
+                  <span>{{ child.meta?.menuName || child.name }}</span>
                 </el-menu-item>
+              </template>
             </el-sub-menu>
           </template>
         </el-menu>
@@ -64,7 +73,7 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, h, resolveComponent } from "vue";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
@@ -72,7 +81,11 @@ const router = useRouter();
 // 计算菜单路由
 const menuRoutes = computed(() => {
   const mainRoute = router.options.routes.find((route) => route.path === "/");
-  return mainRoute?.children && mainRoute?.children.filter(route => !route.meta || route.meta.showInMenu !== false ) || [];
+  if (!mainRoute?.children) return [];
+
+  return mainRoute.children.filter(
+    (route) => !route.meta || route.meta.showInMenu !== false
+  );
 });
 
 // 处理退出登录
@@ -92,7 +105,7 @@ const handleLogout = () => {
 }
 
 /* 选中菜单项样式 */
-.el-menu-item{
+.el-menu-item {
   color: #666;
   background-color: #fff;
 }
@@ -102,6 +115,12 @@ const handleLogout = () => {
   border-right: 4px solid #3d84ee;
 }
 
+/* 完全去掉系统管理子菜单的背景色 */
+:deep(.el-sub-menu__title) {
+  color: #666;
+  background-color: #fff !important;
+}
+
 .city-header {
   width: 100%;
   height: 64px;

src/router/index.js

@@ -20,7 +20,7 @@ const routes = [
         name: '数据大屏',
         title: 'dataSummary',
         component: () => import('@/views/homePage/index.vue'),
-        meta: { menuName: '数据大屏', icon: 'home' }
+        meta: { menuName: '数据大屏', icon: 'platform' }
       },
       {
         path: '/projectManage',
@@ -38,8 +38,24 @@ const routes = [
           menuName: '新增项目',
           showInMenu: false // 不在菜单中显示
         }
+      },
+      {
+        path: '/systemManage',
+        name: '系统管理',
+        title: 'systemManage',
+        // component: () => import('@/views/systemManage/index.vue'),
+        meta: { menuName: '系统管理', icon: 'tools' },
+        children: [
+          {
+            path: '/systemManage/userManage',
+            name: '用户管理',
+            title: 'userManage',
+            component: () => import('@/views/systemManage/userManage.vue'),
+            meta: { menuName: '用户管理',}
           }
         ]
+      },
+    ]
   }
 ]
 

src/style.css

-全局样式重置和滚动条控制
+/* 全局样式重置和滚动条控制 */
 * {
   margin: 0;
   padding: 0;
@@ -18,6 +18,7 @@ html, body {
 #app {
   height: 100vh;
   width: 100vw;
+  background: #f5f5f5;
   overflow: hidden; /* 确保应用容器不产生滚动条 */
 }
 

src/views/components/Construct.vue → src/views/homePage/components/Construct.vue

@@ -147,7 +147,7 @@ const recycleList = reactive([
             .vw(left,65);
             height: 30%;
             max-width: 83%;
-            background-image: url(/src/assets/images/baseRateRel.png);
+            background-image: url(/src/assets/images/progress.png);
             background-size: 100% 100%;
             background-repeat: no-repeat;
           }

src/views/homePage/index.vue

@@ -71,9 +71,9 @@
 </template>
 
 <script setup>
-import Construct from "../components/Construct.vue";
-import ProjectApproval from "../components/ProjectApproval.vue";
-import Operation from "../components/Operation.vue";
+import Construct from "./components/Construct.vue";
+import ProjectApproval from "./components/ProjectApproval.vue";
+import Operation from "./components/Operation.vue";
 import { reactive, ref } from "vue";
 
 const selectedLeftBtn = ref("equity");

src/views/systemManage/index.vue

+<template>
+  <div>系统管理 setting</div>
+</template>
+
+<script setup></script>
+
+<style scoped lang="less"></style>