807个人

src/components/layout/header.vue

@@ -5,23 +5,29 @@
       <div class="ve_logo_time">{{ currentTime }}</div>
       <div class="ve_logo_text">数据驱动飞行器智能优化设计平台</div>
       <div class="ve_logo_user">
-        <el-avatar  :icon="UserFilled" :size="24" />
+        <el-avatar :icon="UserFilled" :size="24" />
         <el-dropdown trigger="hover" class="user-dropdown">
           <span class="el-dropdown-link">
             {{ nickName }}
           </span>
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item>
-                <el-icon><User /></el-icon>
+              <el-dropdown-item @click="openUserInfo">
+                <el-icon>
+                  <User />
+                </el-icon>
                 <span>个人信息</span>
               </el-dropdown-item>
-              <el-dropdown-item>
-                <el-icon><Key /></el-icon>
+              <el-dropdown-item @click="openChangePwd">
+                <el-icon>
+                  <Key />
+                </el-icon>
                 <span>修改密码</span>
               </el-dropdown-item>
               <el-dropdown-item divided @click="handleLogout" style="color: #F56C6C;">
-                <el-icon><SwitchButton /></el-icon>
+                <el-icon>
+                  <SwitchButton />
+                </el-icon>
                 <span>登出</span>
               </el-dropdown-item>
             </el-dropdown-menu>
@@ -29,6 +35,8 @@
         </el-dropdown>
       </div>
     </div>
+    <!-- 用户信息组件 -->
+    <userinfo ref="userinfoRef" />
 
   </div>
 
@@ -40,10 +48,14 @@ import { UserFilled, ArrowDown, User, Key, SwitchButton } from '@element-plus/ic
 
 import useCurrentTime from "@/utils/useCurrentTime";
 import { useUserStore } from '@/store/user'
-import { removeToken,removeUserId} from "@/utils/token";
+import { removeToken, removeUserId } from "@/utils/token";
 import { useRouter } from 'vue-router'
 
-import {message} from "@/utils/message";
+import { message } from "@/utils/message";
+
+import userinfo from "../user/userinfo.vue";
+
+const userinfoRef = ref(null)
 
 const userStore = useUserStore()
 const router = useRouter()
@@ -52,6 +64,18 @@ const nickName = computed(() => userStore.userInfo?.nickName || '用户登录')
 
 const { currentTime } = useCurrentTime()
 
+const openUserInfo = () => {
+  if (userinfoRef.value) {
+    userinfoRef.value.visible = true
+  }
+}
+
+const openChangePwd = () => {
+  if (userinfoRef.value) {
+    userinfoRef.value.changePwdVisible = true
+  }
+}
+
 const handleLogout = () => {
   userStore.clearUserInfo();
   removeToken();
@@ -106,7 +130,7 @@ const handleLogout = () => {
       pointer-events: none;
     }
 
-    .ve_logo_user{
+    .ve_logo_user {
       position: absolute;
       top: 40%;
       right: 2%;

src/components/user/userinfo.vue

@@ -0,0 +1,125 @@
+<template>
+  <!-- 个人信息 -->
+  <el-dialog v-model="visible" align-center :append-to-body="true" width="500" class="dialog_class" draggable>
+    <template #header="{ titleId, titleClass }">
+      <div class="my-header">
+        <h4 :id="titleId" :class="titleClass">个人信息</h4>
+      </div>
+    </template>
+    <el-descriptions :column="2" border>
+      <el-descriptions-item label="昵称">{{ userInfo.nickName }}</el-descriptions-item>
+      <el-descriptions-item label="用户名">{{ userInfo.userName }}</el-descriptions-item>
+      <el-descriptions-item label="邮箱">{{ userInfo.email }}</el-descriptions-item>
+      <el-descriptions-item label="手机号">{{ userInfo.mobileNo }}</el-descriptions-item>
+      <el-descriptions-item label="用户类型">{{ userInfo.userType }}</el-descriptions-item>
+      <el-descriptions-item label="注册时间">{{ userInfo.regTime }}</el-descriptions-item>
+    </el-descriptions>
+    <template #footer>
+      <el-button @click="visible = false">关闭</el-button>
+      <el-button @click="handleEdit">编辑</el-button>
+      <el-button @click="handleChangePassword">修改密码</el-button>
+    </template>
+  </el-dialog>
+
+  <!-- 编辑个人信息 -->
+  <el-dialog v-model="editVisible" align-center :append-to-body="true" width="500" class="dialog_class" draggable>
+    <template #header>
+      <h4>编辑个人信息</h4>
+    </template>
+    
+    <el-form label-position="left">
+      <el-form-item label="昵称" :label-width="LabelWidth">
+        <el-input v-model="userInfo.nickName"></el-input>
+      </el-form-item>
+      <el-form-item label="邮箱" :label-width="LabelWidth">
+        <el-input v-model="userInfo.email"></el-input>
+      </el-form-item>
+      <el-form-item label="手机号" :label-width="LabelWidth">
+        <el-input v-model="userInfo.mobileNo"></el-input>
+      </el-form-item>
+    </el-form>
+    
+    <template #footer>
+      <el-button @click="editVisible = false">取消</el-button>
+      <el-button @click="handleSave">保存</el-button>
+    </template>
+  </el-dialog>
+
+  <!-- 修改密码 -->
+  <el-dialog v-model="changePwdVisible" align-center :append-to-body="true" width="500" class="dialog_class" draggable>
+    <template #header>
+      <h4>修改密码</h4>
+    </template>
+    <el-form>
+      <el-form-item label="旧密码">
+        <el-input type="password" v-model="oldPassword"></el-input>
+      </el-form-item>
+      <el-form-item label="新密码">
+        <el-input type="password" v-model="newPassword"></el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="changePwdVisible = false">取消</el-button>
+      <el-button type="primary" @click="ChangePassword">确定</el-button>
+    </template>
+  </el-dialog>
+
+
+
+</template>
+
+<script setup>
+import { useUserStore } from '@/store/user'
+
+
+const visible = ref(false)
+const changePwdVisible = ref(false)
+const editVisible = ref(false)
+
+const LabelWidth = '80px'
+
+const userStore = useUserStore()
+
+const userInfo = reactive({
+  nickName: userStore.userInfo?.nickName || '用户登录',
+  email: userStore.userInfo?.email || '未设置',
+  mobileNo: userStore.userInfo?.mobileNo || '未设置',
+  regTime: userStore.userInfo?.regTime || '未设置',
+  userType: userStore.userInfo?.userType || '未设置',
+  userName: userStore.userInfo?.userName || '未设置',
+})
+
+const oldPassword = ref('')
+const newPassword = ref('')
+
+const handleEdit = () => {
+  // 触发编辑逻辑
+  console.log('编辑用户信息')
+  visible.value = false;
+  editVisible.value = true;
+}
+
+const handleSave = () => {
+  // 触发保存逻辑
+  console.log('保存用户信息')
+  editVisible.value = false;
+}
+
+const handleChangePassword = () => {
+  // 触发修改密码逻辑
+  console.log('修改密码')
+  visible.value = false;
+  changePwdVisible.value = true;
+}
+
+const ChangePassword = () => {
+  // 这里添加修改密码的逻辑
+  console.log('旧密码:', oldPassword.value)
+  console.log('新密码: ', newPassword.value)
+  // 清空输入框
+  oldPassword.value = ''
+  newPassword.value = ''
+  changePwdVisible.value = false
+}
+defineExpose({ visible, changePwdVisible })
+</script>

src/views/mainContent/leftaside/opRun.vue

@@ -5,11 +5,26 @@
       <template #header>
         <span>优化运行</span>
       </template>
-
+      <div class="container">
+        <div>
+          <img src="@/assets/img/start.png" class="container-img" alt="Experiment Icon" />
+        </div>
+        <div>
+          <img src="@/assets/img/stop.png" class="container-img" alt="Experiment Icon" />
+        </div>
+      </div>
     </el-card>
   </div>
 </template>
 
 <script setup>
 
-</script>
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+}
+</style>