✨ feat: 修改temp页面结构和路由，修复聊天框

ruoyi-ui/src/layout/components/ChatComponent/index.vue

@@ -57,11 +57,10 @@ export default {
   name: 'ChatComponent',
   props:{
     drawerVisible:Boolean,
-
   },
+  
   data() {
     return {
-
       contacts: [], // 联系人列表
       selectedContact: null, // 当前选中的联系人
       chatHistory: [], // 当前聊天记录
@@ -82,7 +81,10 @@ export default {
 
     // 关闭聊天窗口
     handleClose() {
-      this.drawerVisible = false;
+      console.log("关闭聊天窗口");
+      // props是只读的，不能直接修改，需要通过$emit通知父组件关闭
+      // this.drawerVisible = false;
+      this.$emit('close'); // 通知父组件关闭聊天窗口
     },
 
 

ruoyi-ui/src/layout/components/Navbar.vue

@@ -14,8 +14,8 @@
 
         <div style="position: absolute;top: 0;right: 300px;font-weight: 200">
           <!--          <i style="position: relative;top: -7px;font-size: small;right: -20px;background-color: red;border-radius: 50%;color: white;width: 50px">99</i>-->
-          <el-button class="el-icon-s-comment" @click="chat=true" style="">打开聊天</el-button>
-          <chat-component :drawerVisible="chat" ref="chatComponent"/>
+          <el-button class="el-icon-s-comment" @click="chat=true" style="" >打开聊天</el-button>
+          <chat-component :drawerVisible="chat" ref="chatComponent" @close="hiddenChat"/>
         </div>
         <screenfull id="screenfull" class="right-menu-item hover-effect"/>
         <el-tooltip content="用户" effect="dark" placement="bottom">
@@ -142,6 +142,11 @@ export default {
       this.$store.dispatch('app/toggleSideBar')
     },
 
+    hiddenChat() {
+      this.chat = false;
+      console.log(this.chat, '关闭chat');
+    },
+
     getUser() {
       getUserProfile().then(response => {
         this.user = response.data.user;

ruoyi-ui/src/router/index.js

@@ -85,14 +85,25 @@ export const constantRoutes = [
           })
         }
       },
-      {
-        path: 'temp',
-        component: () => import('@/views/temp'),
-        name: 'Temp',
-        meta: { title: '临时页面', icon: 'dashboard', affix: true }
-      }
     ]
   },
+  {
+    path: '/temp',
+    component: () => import('@/views/temp'),
+    name: 'Temp',
+    meta: { title: '临时页面', icon: 'dashboard', affix: true },
+    beforeEnter: (to, from, next) => {
+      // 从本地存储获取角色信息
+      currentRole().then(res => {
+        const role = res.data.roleKey;
+        if (role === 'temp') {
+          next()
+        } else {
+          next('/index') // 重定向到工作台
+        }
+      })
+    }
+  },
   {
     path: '/tool',
     component: Layout,

ruoyi-ui/src/views/index.vue

@@ -2,7 +2,7 @@
   <div class="home">
     <div>
       <el-container style="height: 100vh;">
-          <el-main>
+        <el-main>
             <el-row :gutter="20">
               <!-- 右侧展示区域 -->
               <el-col :span="18" class="content-area">

ruoyi-ui/src/views/temp.vue

@@ -1,5 +1,14 @@
 <template>
   <div class="onboarding-container">
+    <!-- 全局步骤条 -->
+    <div class="global-steps">
+      <el-steps :active="currentStep" align-center>
+        <el-step title="开启流程" description="启动入职流程"></el-step>
+        <el-step title="填写资料" description="完善个人信息"></el-step>
+        <el-step title="等待审核" description="提交审批"></el-step>
+      </el-steps>
+    </div>
+
     <!-- 动态背景装饰 -->
     <div class="decorative-background">
       <div class="gradient-circle blue"></div>
@@ -7,7 +16,7 @@
     </div>
 
     <!-- 初始状态 -->
-    <div v-if="!showForm" class="initiation-card">
+    <div v-if="currentStep === 0" class="initiation-card">
       <div class="welcome-section">
         <el-image 
           src="https://example.com/onboarding-illustration.svg" 
@@ -21,14 +30,6 @@
         <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"
@@ -37,28 +38,57 @@
         {{ loading ? '正在准备表单...' : '开启入职流程' }}
         <i class="el-icon-right"></i>
       </el-button>
+      <el-button
+        type="danger"
+        class="logout-button"
+        @click="logout"
+      >
+        退出登录
+      </el-button>
     </div>
 
     <!-- 表单状态 -->
     <transition name="el-fade-in">
-      <div v-if="showForm" class="form-container">
+      <div v-if="currentStep === 1" 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" />
+            <h3>入职信息登记（1/2）</h3>
+            <el-progress :percentage="50" :show-text="false" />
           </div>
           
           <el-form 
             :model="employeeData" 
             class="employee-form"
             label-position="top">
-            <!-- 原有表单字段 -->
+            <!-- 表单字段 -->
+            <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>
+            
+            <div class="form-actions">
+              <el-button @click="currentStep = 0">上一步</el-button>
+              <el-button type="primary" @click="submitForm">提交审核</el-button>
+            </div>
           </el-form>
         </div>
       </div>
     </transition>
+
+    <!-- 审核状态 -->
+    <transition name="el-fade-in">
+      <div v-if="currentStep === 2" class="review-status">
+        <el-result
+          icon="success"
+          title="提交成功"
+          subTitle="您的资料已提交审核，请等待审批">
+        </el-result>
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -66,7 +96,7 @@
 export default {
   data() {
     return {
-      showForm: false,
+      currentStep: 0, // 0-开启流程 1-填写资料 2-等待审核
       loading: false,
       employeeData: {
         name: "",
@@ -78,18 +108,68 @@ export default {
     async startOnboarding() {
       this.loading = true
       try {
-        // 模拟API请求
         await new Promise(resolve => setTimeout(resolve, 1500))
-        this.showForm = true
+        this.currentStep = 1
       } finally {
         this.loading = false
       }
-    }
+    },
+    submitForm() {
+      // 这里添加实际提交逻辑
+      this.currentStep = 2
+    },
+    async logout() {
+      this.$confirm('确定注销并退出系统吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$store.dispatch('LogOut').then(() => {
+          location.href = process.env.VUE_APP_CONTEXT_PATH + "index";
+        })
+      }).catch(() => {
+      });
+    },
   }
 }
 </script>
 
 <style scoped lang="scss">
+.global-steps {
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 90%;
+  max-width: 800px;
+  z-index: 2;
+  background: rgba(255, 255, 255, 0.9);
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+}
+
+.onboarding-container {
+  padding-top: 100px; /* 为步骤条留出空间 */
+}
+
+.review-status {
+  background: white;
+  border-radius: 16px;
+  padding: 40px;
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
+}
+
+.form-actions {
+  margin-top: 40px;
+  display: flex;
+  justify-content: space-between;
+}
+
+/* 调整原有样式适应新结构 */
 .onboarding-container {
   display: flex;
   align-items: center;
@@ -97,6 +177,7 @@ export default {
   position: relative;
   overflow: hidden;
   padding: 2rem;
+  height: 100vh;
 }
 
 .decorative-background {
@@ -178,12 +259,14 @@ export default {
   }
 }
 
-.start-button {
+.start-button, .logout-button {
   width: 100%;
   height: 50px;
   font-size: 1.1rem;
   border-radius: 12px;
   transition: all 0.3s ease;
+  margin-left: 0;
+  margin-top: 10px;
 
   &:hover {
     transform: translateY(-2px);
@@ -234,4 +317,24 @@ export default {
     height: 150px !important;
   }
 }
+
+.initiation-card {
+  margin-top: 60px;
+}
+
+@media (max-width: 768px) {
+  .global-steps {
+    top: 10px;
+    width: 95%;
+    padding: 10px;
+    
+    ::v-deep .el-step__title {
+      font-size: 12px;
+    }
+  }
+  
+  .onboarding-container {
+    padding-top: 80px;
+  }
+}
 </style>