✨ feat: 添加首页的导航守卫

ruoyi-ui/src/router/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import {currentRole} from "@/api/system/role";
 
 Vue.use(Router)
 
@@ -70,8 +71,26 @@ export const constantRoutes = [
         path: 'index',
         component: () => import('@/views/index'),
         name: 'Index',
-        meta: { title: '工作台', icon: 'dashboard', affix: true }
+        meta: { title: '工作台', icon: 'dashboard', affix: true },
+        beforeEnter: (to, from, next) => {
+          // 从本地存储获取角色信息
+          currentRole().then(res => {
+            const role = res.data.roleKey;
+            // console.log(role, '当前用户的权限为');
+            if (role === 'temp') {
+              next('/temp') // 重定向到临时页面
+            } else {
+              next()
+            }
+          })
+        }
       },
+      {
+        path: 'temp',
+        component: () => import('@/views/temp'),
+        name: 'Temp',
+        meta: { title: '临时页面', icon: 'dashboard', affix: true }
+      }
     ]
   },
   {
@@ -330,9 +349,11 @@ Router.prototype.replace = function push(location) {
   return routerReplace.call(this, location).catch(err => err)
 }
 
-export default new Router({
+const router = new Router({
   base: process.env.VUE_APP_CONTEXT_PATH,
   mode: 'history', // 去掉url中的#
   scrollBehavior: () => ({ y: 0 }),
   routes: constantRoutes
 })
+
+export default router

ruoyi-ui/src/views/index.vue

@@ -1,60 +1,24 @@
 <template>
   <div class="home">
-    <div v-if="currentRole.roleKey==='temp'">
+    <div>
-      <div class="onboarding-homepage">
+      <el-container style="height: 100vh;">
-        <!-- 提示信息 -->
+          <el-main>
-        <el-alert
+            <el-row :gutter="20">
-          title="欢迎加入，请尽快补充您的必要信息！"
+              <!-- 右侧展示区域 -->
-          type="info"
+              <el-col :span="18" class="content-area">
-          show-icon>
+                <announcements />
-        </el-alert>
+                <financial-charts />
-
+              </el-col>
-        <!-- 数据补充表单 -->
-        <el-form :model="employeeData" class="employee-form" label-width="80px">
-          <el-form-item label="姓名">
-            <el-input v-model="employeeData.name"></el-input>
-          </el-form-item>
-          <el-form-item label="邮箱">
-            <el-input v-model="employeeData.email"></el-input>
-          </el-form-item>
-          <!-- 根据实际需求添加更多字段 -->
-          <el-form-item>
-            <el-button type="primary" @click="submitForm">提交</el-button>
-          </el-form-item>
-        </el-form>
-
-        <!-- 流程图 -->
-        <div class="flow-chart">
-          <el-steps :active="activeStep" finish-status="success">
-            <el-step title="填写信息"></el-step>
-            <el-step title="审批中"></el-step>
-            <el-step title="完成"></el-step>
-          </el-steps>
-        </div>
-      </div>
-    </div>
-    <div v-else>
-    <el-container style="height: 100vh;">
-        <el-main>
-          <el-row :gutter="20">
-            <!-- 右侧展示区域 -->
-            <el-col :span="18" class="content-area">
-              <announcements />
-              <financial-charts />
-            </el-col>
-
-            <!-- 左侧功能区域 -->
-            <el-col :span="6" class="sidebar">
-              <quick-access />
-              <inventory />
-              <project-management />
-            </el-col>
-          </el-row>
-        </el-main>
-
-
-    </el-container>
 
+              <!-- 左侧功能区域 -->
+              <el-col :span="6" class="sidebar">
+                <quick-access />
+                <inventory />
+                <project-management />
+              </el-col>
+            </el-row>
+          </el-main>
+      </el-container>
     </div>
   </div>
 </template>
@@ -68,7 +32,6 @@ import Inventory from "../components/Inventory/index.vue";
 import Announcements from "../components/Announcements/index.vue";
 import ProjectManagement from "../components/ProjectManagement/index.vue";
 import FinancialCharts from "../components/FinancialCharts/index.vue";
-import {currentRole} from "@/api/system/role";
 
 export default {
   name: "Index",
@@ -81,14 +44,6 @@ export default {
   },
   data() {
     return {
-      // 新员工填写的信息
-      employeeData: {
-        name: "",
-        email: "",
-        // 其他必要字段
-      },
-      // 当前步骤，从 0 开始计数
-      activeStep: 0,
       version: "0.8.3",
       commandstats: null,
       usedmemory: null,
@@ -100,29 +55,13 @@ export default {
       noticeTitle: '',
       noticeContent: '',
       drawer: false,
-      currentRole:{}
     };
   },
   created() {
-    this.getCurrentUserRole();
     this.getList();
     this.getListNotice();
   },
   methods: {
-    submitForm() {
-      // 这里可以加入表单验证与提交逻辑
-      // 模拟提交后进入下一流程（例如审批中）
-      this.activeStep = 1;
-      this.$message({
-        message: "表单提交成功，进入审批流程！",
-        type: "success"
-      });
-    },
-    getCurrentUserRole(){
-      currentRole().then(res => {
-        this.currentRole = res.data;
-      })
-    },
     getList() {
       getCache().then((response) => {
         this.cache = response.data;

ruoyi-ui/src/views/temp.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="onboarding-container">
+    <!-- 动态背景装饰 -->
+    <div class="decorative-background">
+      <div class="gradient-circle blue"></div>
+      <div class="gradient-circle purple"></div>
+    </div>
+
+    <!-- 初始状态 -->
+    <div v-if="!showForm" class="initiation-card">
+      <div class="welcome-section">
+        <el-image 
+          src="https://example.com/onboarding-illustration.svg" 
+          class="welcome-illustration"
+          :preview-src-list="[]">
+          <div slot="error" class="image-slot">
+            <i class="el-icon-user-solid"></i>
+          </div>
+        </el-image>
+        <h2 class="welcome-title">欢迎加入团队！</h2>
+        <p class="welcome-subtitle">让我们开始您的入职流程</p>
+      </div>
+
+      <div class="process-steps">
+        <el-steps direction="vertical" :active="0">
+          <el-step title="准备资料"></el-step>
+          <el-step title="信息填写"></el-step>
+          <el-step title="完成认证"></el-step>
+        </el-steps>
+      </div>
+
+      <el-button 
+        type="primary" 
+        class="start-button"
+        @click="startOnboarding"
+        :loading="loading">
+        {{ loading ? '正在准备表单...' : '开启入职流程' }}
+        <i class="el-icon-right"></i>
+      </el-button>
+    </div>
+
+    <!-- 表单状态 -->
+    <transition name="el-fade-in">
+      <div v-if="showForm" class="form-container">
+        <el-skeleton :rows="5" animated v-if="loading" />
+        
+        <div v-else class="form-content">
+          <div class="form-header">
+            <h3>入职信息登记</h3>
+            <el-progress :percentage="33" :show-text="false" />
+          </div>
+          
+          <el-form 
+            :model="employeeData" 
+            class="employee-form"
+            label-position="top">
+            <!-- 原有表单字段 -->
+          </el-form>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showForm: false,
+      loading: false,
+      employeeData: {
+        name: "",
+        email: ""
+      }
+    }
+  },
+  methods: {
+    async startOnboarding() {
+      this.loading = true
+      try {
+        // 模拟API请求
+        await new Promise(resolve => setTimeout(resolve, 1500))
+        this.showForm = true
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.onboarding-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  padding: 2rem;
+}
+
+.decorative-background {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+
+  .gradient-circle {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(60px);
+    opacity: 0.15;
+
+    &.blue {
+      width: 300px;
+      height: 300px;
+      background: linear-gradient(45deg, #409EFF, #79bbff);
+      top: 20%;
+      left: 10%;
+    }
+
+    &.purple {
+      width: 250px;
+      height: 250px;
+      background: linear-gradient(45deg, #B37FEB, #9254de);
+      bottom: 15%;
+      right: 10%;
+    }
+  }
+}
+
+.initiation-card {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 16px;
+  padding: 40px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
+  backdrop-filter: blur(10px);
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 600px;
+  text-align: center;
+}
+
+.welcome-section {
+  margin-bottom: 2rem;
+
+  .welcome-illustration {
+    width: 200px;
+    height: 200px;
+    margin: 0 auto 1.5rem;
+    border-radius: 50%;
+    background: #f0f7ff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 4rem;
+    color: #409EFF;
+  }
+
+  .welcome-title {
+    font-size: 1.8rem;
+    margin-bottom: 0.5rem;
+    color: #303133;
+  }
+
+  .welcome-subtitle {
+    color: #909399;
+    font-size: 1rem;
+  }
+}
+
+.process-steps {
+  margin: 2rem 0;
+  ::v-deep .el-step__head {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.start-button {
+  width: 100%;
+  height: 50px;
+  font-size: 1.1rem;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+  }
+
+  i {
+    margin-left: 8px;
+    transition: transform 0.3s ease;
+  }
+
+  &:hover i {
+    transform: translateX(3px);
+  }
+}
+
+.form-container {
+  background: white;
+  border-radius: 16px;
+  padding: 40px;
+  width: 100%;
+  max-width: 800px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
+  position: relative;
+  z-index: 1;
+
+  .form-header {
+    margin-bottom: 2rem;
+    h3 {
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .onboarding-container {
+    padding: 1rem;
+  }
+
+  .initiation-card,
+  .form-container {
+    padding: 24px;
+  }
+
+  .welcome-illustration {
+    width: 150px !important;
+    height: 150px !important;
+  }
+}
+</style>