优化pc端 --初步优化
This commit is contained in:
yml
@@ -1,14 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import {
|
||||
Bell,
|
||||
CirclePlus,
|
||||
House,
|
||||
Search,
|
||||
Shop,
|
||||
SwitchButton,
|
||||
Tickets,
|
||||
UserFilled,
|
||||
Wallet,
|
||||
} from "@element-plus/icons-vue";
|
||||
import { useSessionStore } from "@/stores/session";
|
||||
|
||||
const session = useSessionStore();
|
||||
const router = useRouter();
|
||||
|
||||
const navItems = [
|
||||
{ label: "首页", to: "/", icon: House },
|
||||
@@ -16,6 +23,14 @@ const navItems = [
|
||||
{ label: "我的订单", to: "/orders", icon: Tickets },
|
||||
{ label: "钱包", to: "/wallet", icon: Wallet },
|
||||
];
|
||||
|
||||
const showUserDropdown = ref(false);
|
||||
|
||||
function handleLogout() {
|
||||
session.logout();
|
||||
showUserDropdown.value = false;
|
||||
router.replace("/");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -44,14 +59,79 @@ const navItems = [
|
||||
</div>
|
||||
|
||||
<div class="pc-user-actions">
|
||||
<RouterLink class="pc-icon-link" to="/notifications" aria-label="通知">
|
||||
<el-icon><Bell /></el-icon>
|
||||
</RouterLink>
|
||||
<RouterLink class="pc-login-link" to="/login">
|
||||
<el-icon><UserFilled /></el-icon>
|
||||
<span>登录/注册</span>
|
||||
</RouterLink>
|
||||
<RouterLink class="pc-post-link" to="/seller/listings/create">
|
||||
<!-- 未登录：显示登录/注册按钮 -->
|
||||
<template v-if="!session.isLoggedIn">
|
||||
<RouterLink class="pc-icon-link" to="/notifications" aria-label="通知">
|
||||
<el-icon><Bell /></el-icon>
|
||||
</RouterLink>
|
||||
<RouterLink class="pc-login-link" to="/login">
|
||||
<el-icon><UserFilled /></el-icon>
|
||||
<span>登录/注册</span>
|
||||
</RouterLink>
|
||||
</template>
|
||||
|
||||
<!-- 已登录：显示用户头像+昵称 + 下拉菜单 -->
|
||||
<template v-else>
|
||||
<RouterLink class="pc-icon-link" to="/notifications" aria-label="通知">
|
||||
<el-icon><Bell /></el-icon>
|
||||
</RouterLink>
|
||||
|
||||
<div class="pc-user-block" @mouseleave="showUserDropdown = false">
|
||||
<button
|
||||
class="pc-user-trigger"
|
||||
@mouseenter="showUserDropdown = true"
|
||||
@click="showUserDropdown = !showUserDropdown"
|
||||
>
|
||||
<span class="pc-avatar-chip">
|
||||
<img
|
||||
v-if="session.avatarUrl"
|
||||
:src="session.avatarUrl"
|
||||
alt=""
|
||||
class="pc-avatar-img"
|
||||
/>
|
||||
<span v-else class="pc-avatar-text">{{ session.avatarText }}</span>
|
||||
</span>
|
||||
<span class="pc-user-name">{{ session.displayName }}</span>
|
||||
</button>
|
||||
|
||||
<Transition name="dropdown">
|
||||
<div v-if="showUserDropdown" class="pc-user-dropdown">
|
||||
<RouterLink
|
||||
class="dropdown-item"
|
||||
to="/orders"
|
||||
@click="showUserDropdown = false"
|
||||
>
|
||||
<el-icon><Tickets /></el-icon>
|
||||
<span>我的订单</span>
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item"
|
||||
to="/wallet"
|
||||
@click="showUserDropdown = false"
|
||||
>
|
||||
<el-icon><Wallet /></el-icon>
|
||||
<span>钱包</span>
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item"
|
||||
to="/seller/listings/create"
|
||||
@click="showUserDropdown = false"
|
||||
>
|
||||
<el-icon><CirclePlus /></el-icon>
|
||||
<span>发布账号</span>
|
||||
</RouterLink>
|
||||
<div class="dropdown-divider"></div>
|
||||
<button class="dropdown-item logout" @click="handleLogout">
|
||||
<el-icon><SwitchButton /></el-icon>
|
||||
<span>退出登录</span>
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 未登录时发布按钮放在外面 -->
|
||||
<RouterLink v-if="!session.isLoggedIn" class="pc-post-link" to="/login">
|
||||
<el-icon><CirclePlus /></el-icon>
|
||||
<span>发布账号</span>
|
||||
</RouterLink>
|
||||
@@ -63,3 +143,310 @@ const navItems = [
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* ========== 顶部栏 ========== */
|
||||
.pc-app-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background: #f5f6f8;
|
||||
}
|
||||
|
||||
.pc-topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
height: 56px;
|
||||
padding: 0 24px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eef1f5;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* ========== 品牌 ========== */
|
||||
.pc-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pc-brand-mark {
|
||||
display: grid;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
background: #1477ff;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.pc-brand-text {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: #17233d;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ========== 导航 ========== */
|
||||
.pc-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.pc-nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 8px;
|
||||
color: #5a6577;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.pc-nav-link:hover,
|
||||
.pc-nav-link.router-link-active {
|
||||
background: #f0f5ff;
|
||||
color: #1477ff;
|
||||
}
|
||||
|
||||
/* ========== 搜索 ========== */
|
||||
.pc-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-left: auto;
|
||||
padding: 0 12px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
background: #f4f6f8;
|
||||
max-width: 280px;
|
||||
flex: 0 1 280px;
|
||||
}
|
||||
|
||||
.pc-search input {
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: #17233d;
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pc-search input::placeholder {
|
||||
color: #a0aab6;
|
||||
}
|
||||
|
||||
.pc-search .el-icon {
|
||||
color: #a0aab6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ========== 用户操作区 ========== */
|
||||
.pc-user-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pc-icon-link {
|
||||
display: grid;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
place-items: center;
|
||||
border-radius: 10px;
|
||||
color: #6b7a90;
|
||||
text-decoration: none;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.pc-icon-link:hover {
|
||||
background: #f0f5ff;
|
||||
color: #1477ff;
|
||||
}
|
||||
|
||||
.pc-login-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 6px 14px;
|
||||
border-radius: 10px;
|
||||
background: #1477ff;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.pc-login-link:hover {
|
||||
background: #0d5fd4;
|
||||
}
|
||||
|
||||
.pc-post-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 6px 14px;
|
||||
border-radius: 10px;
|
||||
background: #ff6a00;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.pc-post-link:hover {
|
||||
background: #e55d00;
|
||||
}
|
||||
|
||||
/* ========== 已登录 - 用户块 ========== */
|
||||
.pc-user-block {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pc-user-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 10px 4px 4px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background: #f4f6f8;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.pc-user-trigger:hover {
|
||||
background: #eaeff5;
|
||||
}
|
||||
|
||||
.pc-avatar-chip {
|
||||
display: grid;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #1477ff;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pc-avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.pc-avatar-text {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.pc-user-name {
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
color: #17233d;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ========== 下拉菜单 ========== */
|
||||
.pc-user-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
right: 0;
|
||||
z-index: 200;
|
||||
min-width: 180px;
|
||||
padding: 6px;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
border: 1px solid #eef1f5;
|
||||
box-shadow: 0 8px 24px rgba(23, 35, 61, 0.12);
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 9px 12px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: none;
|
||||
color: #3d4e63;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background: #f0f5ff;
|
||||
color: #1477ff;
|
||||
}
|
||||
|
||||
.dropdown-item .el-icon {
|
||||
color: #8b9cb5;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dropdown-item:hover .el-icon {
|
||||
color: #1477ff;
|
||||
}
|
||||
|
||||
.dropdown-item.logout {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.dropdown-item.logout .el-icon {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.dropdown-item.logout:hover {
|
||||
background: #fef0ef;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
height: 1px;
|
||||
margin: 4px 8px;
|
||||
background: #eef1f5;
|
||||
}
|
||||
|
||||
/* 下拉动画 */
|
||||
.dropdown-enter-active,
|
||||
.dropdown-leave-active {
|
||||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
.dropdown-enter-from,
|
||||
.dropdown-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
/* ========== 主体 ---------- */
|
||||
.pc-main {
|
||||
flex: 1;
|
||||
padding: 20px 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,67 +1,80 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
import { fetchMe, loginWithSms, updateMe, type AuthUser } from '@/api/auth'
|
||||
import { fetchMe, loginWithSms, updateMe, type AuthUser } from "@/api/auth";
|
||||
|
||||
export const useSessionStore = defineStore('session', {
|
||||
export const useSessionStore = defineStore("session", {
|
||||
state: () => ({
|
||||
token: localStorage.getItem('access_token') || '',
|
||||
refreshToken: localStorage.getItem('refresh_token') || '',
|
||||
userId: Number(localStorage.getItem('user_id') || 0),
|
||||
phone: localStorage.getItem('phone') || '',
|
||||
nickname: localStorage.getItem('nickname') || '',
|
||||
avatarUrl: localStorage.getItem('avatar_url') || '',
|
||||
realnameStatus: localStorage.getItem('realname_status') || 'unknown',
|
||||
token: localStorage.getItem("access_token") || "",
|
||||
refreshToken: localStorage.getItem("refresh_token") || "",
|
||||
userId: Number(localStorage.getItem("user_id") || 0),
|
||||
phone: localStorage.getItem("phone") || "",
|
||||
nickname: localStorage.getItem("nickname") || "",
|
||||
avatarUrl: localStorage.getItem("avatar_url") || "",
|
||||
realnameStatus: localStorage.getItem("realname_status") || "unknown",
|
||||
}),
|
||||
getters: {
|
||||
isLoggedIn: (state) => Boolean(state.token),
|
||||
displayName: (state) =>
|
||||
state.nickname ||
|
||||
(state.phone
|
||||
? `用户${state.phone.slice(-6)}`
|
||||
: `用户${state.userId || 0}`),
|
||||
avatarText: (state) => (state.nickname || state.phone || "U").slice(0, 1),
|
||||
},
|
||||
actions: {
|
||||
async login(phone: string, code: string) {
|
||||
const result = await loginWithSms(phone, code)
|
||||
this.applySession(result.user, result.tokens.access_token, result.tokens.refresh_token)
|
||||
return result
|
||||
const result = await loginWithSms(phone, code);
|
||||
this.applySession(
|
||||
result.user,
|
||||
result.tokens.access_token,
|
||||
result.tokens.refresh_token
|
||||
);
|
||||
return result;
|
||||
},
|
||||
async loadMe() {
|
||||
const user = await fetchMe()
|
||||
this.applyUser(user)
|
||||
return user
|
||||
const user = await fetchMe();
|
||||
this.applyUser(user);
|
||||
return user;
|
||||
},
|
||||
async updateProfile(payload: { nickname: string; avatar_url: string }) {
|
||||
const user = await updateMe(payload)
|
||||
this.applyUser(user)
|
||||
return user
|
||||
const user = await updateMe(payload);
|
||||
this.applyUser(user);
|
||||
return user;
|
||||
},
|
||||
logout() {
|
||||
this.token = ''
|
||||
this.refreshToken = ''
|
||||
this.userId = 0
|
||||
this.phone = ''
|
||||
this.realnameStatus = 'unknown'
|
||||
localStorage.removeItem('access_token')
|
||||
localStorage.removeItem('refresh_token')
|
||||
localStorage.removeItem('user_id')
|
||||
localStorage.removeItem('phone')
|
||||
localStorage.removeItem('nickname')
|
||||
localStorage.removeItem('avatar_url')
|
||||
localStorage.removeItem('realname_status')
|
||||
this.token = "";
|
||||
this.refreshToken = "";
|
||||
this.userId = 0;
|
||||
this.phone = "";
|
||||
this.realnameStatus = "unknown";
|
||||
localStorage.removeItem("access_token");
|
||||
localStorage.removeItem("refresh_token");
|
||||
localStorage.removeItem("user_id");
|
||||
localStorage.removeItem("phone");
|
||||
localStorage.removeItem("nickname");
|
||||
localStorage.removeItem("avatar_url");
|
||||
localStorage.removeItem("realname_status");
|
||||
},
|
||||
applySession(user: AuthUser, accessToken: string, refreshToken: string) {
|
||||
this.token = accessToken
|
||||
this.refreshToken = refreshToken
|
||||
this.userId = user.id
|
||||
localStorage.setItem('access_token', accessToken)
|
||||
localStorage.setItem('refresh_token', refreshToken)
|
||||
localStorage.setItem('user_id', String(user.id))
|
||||
this.applyUser(user)
|
||||
this.token = accessToken;
|
||||
this.refreshToken = refreshToken;
|
||||
this.userId = user.id;
|
||||
localStorage.setItem("access_token", accessToken);
|
||||
localStorage.setItem("refresh_token", refreshToken);
|
||||
localStorage.setItem("user_id", String(user.id));
|
||||
this.applyUser(user);
|
||||
},
|
||||
applyUser(user: AuthUser) {
|
||||
this.userId = user.id
|
||||
localStorage.setItem('user_id', String(user.id))
|
||||
this.phone = user.phone
|
||||
localStorage.setItem('phone', user.phone)
|
||||
this.nickname = user.nickname
|
||||
localStorage.setItem('nickname', user.nickname)
|
||||
this.avatarUrl = user.avatar_url
|
||||
localStorage.setItem('avatar_url', user.avatar_url)
|
||||
this.realnameStatus = user.realname_status
|
||||
localStorage.setItem('realname_status', user.realname_status)
|
||||
this.userId = user.id;
|
||||
localStorage.setItem("user_id", String(user.id));
|
||||
this.phone = user.phone;
|
||||
localStorage.setItem("phone", user.phone);
|
||||
this.nickname = user.nickname;
|
||||
localStorage.setItem("nickname", user.nickname);
|
||||
this.avatarUrl = user.avatar_url;
|
||||
localStorage.setItem("avatar_url", user.avatar_url);
|
||||
this.realnameStatus = user.realname_status;
|
||||
localStorage.setItem("realname_status", user.realname_status);
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user