用户管理，实时环境，登录页面

src/router/index.ts

@@ -13,16 +13,6 @@ const routes: Array<RouteRecordRaw> = [
     redirect: '/index',
   },
   {
-    path: '/login',
-    name: 'login',
-    component: Login,
-  },
-  {
-    path: '/user',
-    name: 'user',
-    component: () => import('@/views/index/user.vue'),
-  },
-  {
     path: '/home',
     name: 'home',
     component: () => import('@/views/HomeView.vue'),
@@ -34,6 +24,17 @@ const routes: Array<RouteRecordRaw> = [
         // 添加一个meta字段，表示此页面需要登录
         meta: { requiresAuth: true },
       },
+      {
+        path: '/user',
+        name: 'user',
+        component: () => import('@/views/index/user.vue'),
+        meta: { requiresAuth: true },
+      },
+      {
+        path: '/login',
+        name: 'login',
+        component: Login,
+      },
     ],
   },
 ]
@@ -44,20 +45,15 @@ const router = createRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  // 检查目标页面是否需要登录
-  if (to.meta.requiresAuth) {
-    // 检查用户是否已登录
+  if (to.path !== '/login' && to.meta.requiresAuth) {
     if (isLoggedIn()) {
-      // 用户已登录，允许访问
-      next()
+      next();
     } else {
-      // 用户未登录，重定向到登录页面
-      next({ path: '/login' })
+      next('/login');
     }
   } else {
-    // 不需要登录，直接访问
-    next()
+    next();
   }
-})
+});
 
 export default router

src/utils/auth.ts

@@ -1,5 +1,9 @@
 // '@/utils/auth.ts'
 export function isLoggedIn(): boolean {
   // 登录状态检查逻辑
+  
+  // if (localStorage.getItem('token')) {
+  //   return true;
+  // }
   return true;
 }

src/views/LoginView.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="login-container">
         <el-form @submit.prevent="handleSubmit" :model="form" status-icon :rules="rules" ref="loginFormRef">
-            <h2>登录</h2>
+            <!-- <h2>登录</h2> -->
+            <ItemWrap class="contetn_lr-item" title="登录">
             <el-form-item prop="username">
             <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
             </el-form-item>
@@ -20,6 +21,8 @@
             <el-form-item>
                 <el-button type="primary" native-type="submit">登录</el-button>
             </el-form-item>
+          </ItemWrap>
+
         </el-form>
     </div>
 </template>
@@ -97,7 +100,8 @@ function handleSubmit() {
     }
 
     // 登录逻辑，例如跳转页面或调用API
-    console.log('登录成功');
+    ElMessage.success('登录成功');
+    localStorage.setItem('token', form.username);
     router.push('/index');
     form.username = '';
     form.password = '';
@@ -125,12 +129,12 @@ onMounted(() => {
     border-radius: 5px;
 }
 .login-container {
-  width: 400px;
-  margin: 150px auto;
-  background-color: #282c34;
+  width: 500px;
+  margin: 300px auto;
+  /* background-color: #282c34; */
   padding: 40px;
   border-radius: 10px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
 }
 
 .login-container h2 {
@@ -183,4 +187,7 @@ label {
   width: 100px;
   margin-left: 10px;
 }
+.contetn_lr-item {
+  height: 310px;
+}
 </style>

src/views/header.vue

@@ -29,7 +29,7 @@ timeFn()
     <div class="guang"></div>
     <div class="d-flex jc-center">
       <div class="title">
-        <span class="title-text">档案管理可视化平台</span>
+        <span class="title-text">智慧档案管理可视化平台</span>
       </div>
     </div>
     <div class="timers">

src/views/index/adduser.vue

@@ -0,0 +1,7 @@
+<template>
+    <ItemWrap class="contetn_left-bottom contetn_lr-item" title="添加用户">
+        
+    </ItemWrap>
+</template>
+<script setup lang="ts"></script>
+<style scoped></style>

src/views/index/index.vue

@@ -24,11 +24,7 @@ import User from "./user.vue";
       <ItemWrap class="contetn_left-center contetn_lr-item" title="馆藏统计">
         <LeftCenter />
       </ItemWrap>
-      <ItemWrap
-        class="contetn_left-bottom contetn_lr-item"
-        title="设备提醒"
-        style="padding: 0 10px 16px 10px"
-      >
+      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="设备提醒" style="padding: 0 10px 16px 10px">
         <LeftBottom />
       </ItemWrap>
     </div>
@@ -37,26 +33,23 @@ import User from "./user.vue";
       <ItemWrap class="contetn_center-bottom" title="安装计划">
         <CenterBottom />
       </ItemWrap> -->
-      
+
     </div>
     <div class="contetn_bottom">
-      <el-button type="primary" onclick="./" class="tech-button">数据中心</el-button>
+      <el-button type="primary" @click="this.$router.push('/')" class="tech-button">数据中心</el-button>
       <el-button type="primary" class="tech-button">消息中心</el-button>
       <el-button type="primary" class="tech-button">档案管理</el-button>
+      <el-button type="primary" class="tech-button">设备管理</el-button>
       <el-button type="primary" class="tech-button">实时监控</el-button>
       <el-button type="primary" class="tech-button">报表管理</el-button>
-      <el-button type="primary" class="tech-button">用户管理</el-button>
+      <el-button type="primary" class="tech-button" @click="this.$router.push('/user')">用户管理</el-button>
       <el-button type="primary" class="tech-button">系统设置</el-button>
     </div>
     <div class="contetn_right">
       <ItemWrap class="contetn_left-bottom contetn_lr-item" title="温湿度实时曲线">
         <RightTop />
       </ItemWrap>
-      <ItemWrap
-        class="contetn_left-bottom contetn_lr-item"
-        title="实时环境"
-        style="padding: 0 10px 16px 10px"
-      >
+      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="实时环境" style="padding: 0 10px 16px 10px">
         <RightCenter />
       </ItemWrap>
       <ItemWrap class="contetn_left-bottom contetn_lr-item" title="系统消息">
@@ -74,6 +67,7 @@ import User from "./user.vue";
   justify-content: space-between;
   align-items: stretch;
 }
+
 //左边 右边 结构一样
 .contetn_left,
 .contetn_right {
@@ -86,12 +80,14 @@ import User from "./user.vue";
   flex-shrink: 0;
   margin: 0 -20px;
 }
+
 .contetn_center {
   flex: 1;
   margin: 0 54px;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
+
   .contetn_center-bottom {
     height: 315px;
   }
@@ -100,22 +96,33 @@ import User from "./user.vue";
 .contetn_lr-item {
   height: 310px;
 }
+
 .contetn_bottom {
-  width: 100%; /* 占据整个宽度 */
-  margin-top: auto; /* 使用margin-top:auto来将内容推到最底部 */
+  width: 100%;
+  /* 占据整个宽度 */
+  margin-top: auto;
+  /* 使用margin-top:auto来将内容推到最底部 */
   position: absolute;
   bottom: 0;
-  left: 30%;
+  left: 24%;
 }
+
 .tech-button {
   transition: all 0.3s;
-  background-color: rgba(41, 58, 151, 0.5); /* 使用RGBA，降低不透明度 */
-  color: white;
-  border: 2px solid transparent; /* 添加透明边框 */
+  background-color: rgba(41, 58, 151, 0.5);
+  /* 使用RGBA，降低不透明度 */
+  color: #31abe3;
+  border: 2px solid transparent;
+  /* 添加透明边框 */
   padding: 10px 20px;
+  min-width: 56px;
+  min-height: 48px;
+  font-size: large;
+  text-shadow: 0 0 10px rgb(0, 204, 255, 0.5), 0 0 20px rgba(13, 91, 247, 0.5);
 
   &:hover {
-    background-color: rgba(48, 63, 159, 0.8); /* 同样使用RGBA */
+    background-color: rgba(48, 63, 159, 0.8);
+    /* 同样使用RGBA */
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   }
 
@@ -123,11 +130,13 @@ import User from "./user.vue";
     content: "";
     position: absolute;
     z-index: -1;
-    width: calc(100% + 4px); /* 边框宽度的两倍 */
+    width: calc(100% + 4px);
+    /* 边框宽度的两倍 */
     height: calc(100% + 4px);
     left: -2px;
     top: -2px;
-    background: linear-gradient(to right, rgba(65, 91, 237, 0.8), rgba(48, 63, 159, 0.8)); /* 渐变也使用RGBA */
+    background: linear-gradient(to right, rgba(65, 91, 237, 0.8), rgba(48, 63, 159, 0.8));
+    /* 渐变也使用RGBA */
     transform: scale3d(1, 1, 1);
     transition: transform 0.3s ease-out;
   }

src/views/index/user.vue

@@ -28,16 +28,105 @@ const tableData = [
 </script>
 
 <template>
-    <el-table :data="tableData" style="width: 100%">
-      <el-table-column prop="date" label="Date" width="180" />
-      <el-table-column prop="name" label="Name" width="180" />
-      <el-table-column prop="address" label="Address" />
+      <el-button type="primary" @click="this.$router.push('/')" class="back-home-btn">返回首页</el-button>
+  <ItemWrap class="contetn_left-bottom contetn_lr-item" title="用户管理">
+    <el-button type="primary"  class="back-home-btn btn-add">添加用户</el-button>
+    <div class="user_skills" style="margin-top:20px;">
+    <el-table :data="tableData" class="eltables">
+      <el-table-column prop="date" label="时间" width="180"/>
+      <el-table-column prop="name" label="用户名" width="180" />
+      <el-table-column prop="address" label="地址" />
+      <el-table-column  label="操作" >
+        <el-button type="primary" size="mini" @click="handleEdit">编辑</el-button>
+        <el-button type="danger" size="mini" @click="handleEdit">删除</el-button>
+      </el-table-column>
     </el-table>
+  </div>
+  </ItemWrap>
   </template>
 
-<style scoped lang="scss">
-.right_bottom {
-  box-sizing: border-box;
-  padding: 0 16px;
+<style scoped>
+.contetn_lr-item{
+  font-size: 30px;
+  margin-top: 80px;
+  height: 800px;
 }
+.eltables{
+  width: 100%;
+  font-size: large;
+  text-align: center;
+  margin-top: 50px;
+}
+.back-home-btn {
+  background-color: transparent;
+  position: absolute;
+  margin-top: 30px;
+  top: 10px;
+  left: 10px;
+}
+.btn-add{
+  margin-top: 50px;
+  margin-left: 85%;
+}
+.user_skills{
+   width: 100%;
+   margin-top: 50%;
+   text-align: center;
+   font-size: larger;
+}
+.user_skills /deep/ .el-table--fit{
+    padding: 20px;
+}
+.user_skills /deep/  .el-table, .el-table__expanded-cell {
+    background-color: transparent;
+}
+
+.user_skills /deep/ .el-table tr {
+    background-color: transparent!important;
+}
+.user_skills /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
+   background-color: transparent;
+}
+.el-table::before {
+	 left: 0;
+	 bottom: 0;
+	 width: 100%;
+	 height: 0px;
+}
+.user_skills ::v-deep .el-table__body tr:hover > td {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.user_skills ::v-deep .el-table thead th {
+  background-color: transparent;
+}
+
+.user_skills ::v-deep .el-table__body tr:hover > td {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.user_skills ::v-deep .el-table {
+  border: none;
+}
+.user_skills ::v-deep .el-table::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  border-bottom: none !important;
+  /* 如果需要，可以增加下面的属性以确保伪元素的高度为0 */
+  height: 0;
+}
+.user_skills ::v-deep .el-table td, .user_skills ::v-deep .el-table th {
+  text-align: center;
+  color: aqua;
+  border: none;
+  height: 0px;
+}
+.user_skills ::v-deep .el-table,
+.user_skills ::v-deep .el-table * {
+  border: none !important;
+  box-shadow: none !important;
+  
+}
+
 </style>