From c3c523b8f25ecb9cc8bc18c058393e8ef48321c7 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期四, 17 十月 2024 19:44:59 +0800
Subject: [PATCH] 登录去掉长度限制、wss
---
src/views/home/components/user-panel/index.vue | 120 +++++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 78 insertions(+), 42 deletions(-)
diff --git a/src/views/home/components/user-panel/index.vue b/src/views/home/components/user-panel/index.vue
index c6220f2..ed38c2b 100644
--- a/src/views/home/components/user-panel/index.vue
+++ b/src/views/home/components/user-panel/index.vue
@@ -3,14 +3,33 @@
<el-card class="card">
<div class="panel-content flex flex-col items-center">
<!-- 瀛︾敓淇℃伅 -->
- <div class="avatar-container w-40 h-40 rounded-full overflow-hidden" @click="quit()">
- <div class="avatar-content" v-if="userInfo.imagePath">
- <img :src="userInfo.imagePath" class="avatar-img" alt="">
+ <el-dropdown>
+ <div
+ class="avatar-container w-40 h-40 rounded-full overflow-hidden el-dropdown-link"
+ @click="stateClick()"
+ >
+ <div class="avatar-content" v-if="userInfo.imagePath">
+ <img :src="userInfo.imagePath?'api/files/' + userInfo.imagePath:'/static/icons/touxiang.png'" class="avatar-img" alt="" />
+ </div>
+ <div
+ class="avatar-content"
+ :style="{ backgroundColor: getColor }"
+ v-else
+ >
+ <div class="name text-5xl font-bold text-white">
+ {{ getFirstName }}
+ </div>
+ </div>
</div>
- <div class="avatar-content" :style="{backgroundColor: getColor}" v-else>
- <div class="name text-5xl font-bold text-white">{{ getFirstName }}</div>
- </div>
- </div>
+ <template #dropdown>
+ <el-dropdown-menu>
+ <el-dropdown-item @click="goPersonalCenter()"
+ >涓汉涓績</el-dropdown-item
+ >
+ <el-dropdown-item @click="quit()">閫�鍑虹櫥褰�</el-dropdown-item>
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
<div class="name-container text-lg font-bold mt-5 mb-2">
{{ userInfo.realName }}
@@ -21,56 +40,55 @@
</div>
<!-- 瀛︾敓閫夐」 -->
<div class="tool-container grid grid-cols-3 gap-10">
- <div class="tool-item text-center cursor-pointer" v-for="item in toolList" @click="toolClick(item)">
+ <div
+ class="tool-item text-center cursor-pointer"
+ v-for="item in toolList"
+ @click="toolClick(item)"
+ >
<div class="tool-icon mb-1">
- <img :src="item.iconPath" class="width-img" alt="">
+ <img :src="item.iconPath" class="width-img" alt="" />
</div>
<div class="tool-title">
{{ item.title }}
</div>
</div>
</div>
-
</div>
</el-card>
</div>
</template>
<script setup>
-import { ref, computed } from 'vue';
-import randomColor from '@/utils/randomColor.js';
-import { useRouter } from 'vue-router';
-import { storeToRefs } from 'pinia';
-import { useUserStore } from '@/store/index.js';
-import { logout } from '@/api/modules/user.js';
+import { ref, computed } from "vue";
+import randomColor from "@/utils/randomColor.js";
+import { useRouter } from "vue-router";
+import { storeToRefs } from "pinia";
+import { useUserStore } from "@/store/index.js";
+import { logout } from "@/api/modules/user.js";
const userStore = useUserStore();
-const { userInfo } = storeToRefs(userStore
-
-)
-
-
+const { userInfo } = storeToRefs(userStore);
const router = useRouter();
// 鑾峰彇鍒楄〃
const toolList = ref([
{
id: 1,
- title: '鍦ㄧ嚎鍩硅',
- iconPath: new URL('@/assets/icons/icon1.png', import.meta.url).href,
- path: '/train'
+ title: "鍦ㄧ嚎鍩硅",
+ iconPath: new URL("@/assets/icons/icon1.png", import.meta.url).href,
+ path: "/train",
},
{
id: 2,
- title: '鎴戠殑鑰冭瘯',
- iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href,
- path: '/exam-list'
+ title: "鎴戠殑鑰冭瘯",
+ iconPath: new URL("@/assets/icons/icon2.png", import.meta.url).href,
+ path: "/exam-list",
},
{
id: 3,
- title: '鎴戠殑鎴愮哗',
- iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href,
- path: '/grade-list'
+ title: "鎴戠殑鎴愮哗",
+ iconPath: new URL("@/assets/icons/icon2.png", import.meta.url).href,
+ path: "/grade-list",
},
]);
@@ -87,23 +105,29 @@
if (item.path) {
router.push(item.path);
}
-}
+};
+
+// 鐢ㄦ埛閫夐」
+const dropdownRef = ref();
// 閫�鍑虹櫥褰�
const quit = () => {
- logout().then(() =>{
- router.push('/login').then(()=>{
- userStore.setUserInfo(null)
- localStorage.clear("user")
- })
- }).catch((err) =>{
- console.log("閫�鍑虹櫥褰曞け璐�,澶辫触鍘熷洜;",err)
+ logout()
+ .then(() => {
+ router.push("/login").then(() => {
+ userStore.setUserInfo(null);
+ localStorage.clear("user");
+ });
})
-}
+ .catch((err) => {
+ console.log("閫�鍑虹櫥褰曞け璐�,澶辫触鍘熷洜;", err);
+ });
+};
+const goPersonalCenter = () => {
+ router.push("/personal-center");
+};
</script>
<style lang="scss" scoped>
-
-
.card {
border-radius: 30px;
}
@@ -121,4 +145,16 @@
height: 100%;
object-fit: cover;
}
-</style>
\ No newline at end of file
+.avatar-container {
+ cursor: pointer;
+ color: var(--el-color-primary);
+ display: flex;
+ align-items: center;
+}
+.example-showcase .el-dropdown-link {
+ cursor: pointer;
+ color: var(--el-color-primary);
+ display: flex;
+ align-items: center;
+}
+</style>
--
Gitblit v1.8.0