yml/hfb_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化首页筛选功能

Browse Source
This commit is contained in:
yml2213
2026-05-29 10:06:47 +08:00
parent 72f7d504d1
commit 2966b59c90
4 changed files with 1176 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components.d.ts
Vendored
+1
View File
@@ -34,6 +34,7 @@ declare module 'vue' {
ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption'] ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination'] ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopover: typeof import('element-plus/es')['ElPopover']
ElRadio: typeof import('element-plus/es')['ElRadio'] ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton'] ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
frontend/src/layouts/AppLayout.vue
+225 -127
View File
@@ -2,12 +2,12 @@
import { ref } from "vue"; import { ref } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { import {
Bell, ArrowDown,
ChatDotRound, ChatDotRound,
CirclePlus, CirclePlus,
House, House,
Search, Search,
Shop, Service,
SwitchButton, SwitchButton,
Tickets, Tickets,
UserFilled, UserFilled,
@@ -38,8 +38,11 @@ function handleLogout() {
<div class="pc-app-shell"> <div class="pc-app-shell">
<header class="pc-topbar"> <header class="pc-topbar">
<RouterLink class="pc-brand" to="/"> <RouterLink class="pc-brand" to="/">
<span class="pc-brand-mark">HFB</span> <span class="pc-brand-mark">锤</span>
<span class="pc-brand-text">哈夫币租号</span> <div class="pc-brand-info">
<span class="pc-brand-text">大锤商行</span>
<small class="pc-brand-sub">哈夫币租号</small>
</div>
</RouterLink> </RouterLink>
<nav class="pc-nav"> <nav class="pc-nav">
@@ -56,15 +59,22 @@ function handleLogout() {
<div class="pc-search"> <div class="pc-search">
<el-icon><Search /></el-icon> <el-icon><Search /></el-icon>
<input placeholder="搜索区服 / 段位 / 哈夫币数量" /> <input placeholder="搜索区服 / 段位 / 哈夫币数量 / 皮肤" />
</div> </div>
<div class="pc-user-actions"> <div class="pc-user-actions">
<RouterLink class="pc-icon-link service-link" to="/notifications" title="联系客服">
<el-icon><Service /></el-icon>
<span>客服</span>
</RouterLink>
<RouterLink class="pc-post-link" :to="session.isLoggedIn ? '/seller/listings/create' : '/login'">
<el-icon><CirclePlus /></el-icon>
<span>发布账号</span>
</RouterLink>
<!-- 未登录：显示登录/注册按钮 --> <!-- 未登录：显示登录/注册按钮 -->
<template v-if="!session.isLoggedIn"> <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"> <RouterLink class="pc-login-link" to="/login">
<el-icon><UserFilled /></el-icon> <el-icon><UserFilled /></el-icon>
<span>登录/注册</span> <span>登录/注册</span>
@@ -73,15 +83,12 @@ function handleLogout() {
<!-- 已登录：显示用户头像+昵称 + 下拉菜单 --> <!-- 已登录：显示用户头像+昵称 + 下拉菜单 -->
<template v-else> <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"> <div class="pc-user-block" @mouseleave="showUserDropdown = false">
<button <button
class="pc-user-trigger" class="pc-user-trigger"
@mouseenter="showUserDropdown = true" @mouseenter="showUserDropdown = true"
@click="showUserDropdown = !showUserDropdown" @click="showUserDropdown = !showUserDropdown"
:class="{ active: showUserDropdown }"
> >
<span class="pc-avatar-chip"> <span class="pc-avatar-chip">
<img <img
@@ -93,49 +100,46 @@ function handleLogout() {
<span v-else class="pc-avatar-text">{{ session.avatarText }}</span> <span v-else class="pc-avatar-text">{{ session.avatarText }}</span>
</span> </span>
<span class="pc-user-name">{{ session.displayName }}</span> <span class="pc-user-name">{{ session.displayName }}</span>
<el-icon class="arrow-icon" :class="{ rotated: showUserDropdown }"><ArrowDown /></el-icon>
</button> </button>
<Transition name="dropdown"> <Transition name="dropdown">
<div v-if="showUserDropdown" class="pc-user-dropdown"> <div v-if="showUserDropdown" class="pc-user-dropdown-container">
<RouterLink <div class="pc-user-dropdown">
class="dropdown-item" <RouterLink
to="/orders" class="dropdown-item"
@click="showUserDropdown = false" to="/orders"
> @click="showUserDropdown = false"
<el-icon><Tickets /></el-icon> >
<span>我的订单</span> <el-icon><Tickets /></el-icon>
</RouterLink> <span>我的订单</span>
<RouterLink </RouterLink>
class="dropdown-item" <RouterLink
to="/wallet" class="dropdown-item"
@click="showUserDropdown = false" to="/wallet"
> @click="showUserDropdown = false"
<el-icon><Wallet /></el-icon> >
<span>钱包</span> <el-icon><Wallet /></el-icon>
</RouterLink> <span>我的钱包</span>
<RouterLink </RouterLink>
class="dropdown-item" <RouterLink
to="/seller/listings/create" class="dropdown-item"
@click="showUserDropdown = false" to="/seller/listings/create"
> @click="showUserDropdown = false"
<el-icon><CirclePlus /></el-icon> >
<span>发布账号</span> <el-icon><CirclePlus /></el-icon>
</RouterLink> <span>发布账号</span>
<div class="dropdown-divider"></div> </RouterLink>
<button class="dropdown-item logout" @click="handleLogout"> <div class="dropdown-divider"></div>
<el-icon><SwitchButton /></el-icon> <button class="dropdown-item logout" @click="handleLogout">
<span>退出登录</span> <el-icon><SwitchButton /></el-icon>
</button> <span>退出登录</span>
</button>
</div>
</div> </div>
</Transition> </Transition>
</div> </div>
</template> </template>
<!-- 未登录时发布按钮放在外面 -->
<RouterLink v-if="!session.isLoggedIn" class="pc-post-link" to="/login">
<el-icon><CirclePlus /></el-icon>
<span>发布账号</span>
</RouterLink>
</div> </div>
</header> </header>
@@ -151,6 +155,8 @@ function handleLogout() {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
max-width: 100vw;
overflow-x: clip;
background: #f5f6f8; background: #f5f6f8;
} }
@@ -160,8 +166,10 @@ function handleLogout() {
z-index: 100; z-index: 100;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 20px;
height: 56px; min-width: 0;
max-width: 100%;
height: 64px;
padding: 0 24px; padding: 0 24px;
background: #fff; background: #fff;
border-bottom: 1px solid #eef1f5; border-bottom: 1px solid #eef1f5;
@@ -172,28 +180,39 @@ function handleLogout() {
.pc-brand { .pc-brand {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 10px;
text-decoration: none; text-decoration: none;
flex-shrink: 0; flex-shrink: 0;
} }
.pc-brand-mark { .pc-brand-mark {
display: grid; display: grid;
width: 32px; width: 38px;
height: 32px; height: 38px;
place-items: center; place-items: center;
border-radius: 8px; border-radius: 12px;
background: #1477ff; background: linear-gradient(135deg, #fff3e8 0%, #ffe4cc 100%);
color: #fff; color: #ff6a00;
font-size: 14px; font-size: 20px;
font-weight: 900; font-weight: 900;
} }
.pc-brand-info {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.pc-brand-text { .pc-brand-text {
font-size: 16px; font-size: 16px;
font-weight: 800; font-weight: 800;
color: #17233d; color: #17233d;
white-space: nowrap; }
.pc-brand-sub {
font-size: 11px;
color: #8b9cb5;
font-weight: 600;
} }
/* ========== 导航 ========== */ /* ========== 导航 ========== */
@@ -201,40 +220,51 @@ function handleLogout() {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
margin-left: 16px; margin-left: 10px;
min-width: 0;
height: 100%;
} }
.pc-nav-link { .pc-nav-link {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 5px; gap: 5px;
padding: 6px 12px; padding: 8px 14px;
border-radius: 8px; border-radius: 10px;
color: #5a6577; color: #5a6577;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 700;
text-decoration: none; text-decoration: none;
transition: background 0.15s, color 0.15s; transition: all 0.2s;
} }
.pc-nav-link:hover, .pc-nav-link:hover,
.pc-nav-link.router-link-active { .pc-nav-link.router-link-active {
background: #f0f5ff; background: #fff3e8;
color: #1477ff; color: #ff6a00;
} }
/* ========== 搜索 ========== */ /* ========== 搜索 ========== */
.pc-search { .pc-search {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 8px;
margin-left: auto; margin-left: auto;
padding: 0 12px; padding: 0 14px;
height: 36px; height: 40px;
border-radius: 10px; border-radius: 12px;
background: #f4f6f8; background: #f4f6f8;
max-width: 280px; border: 1px solid transparent;
flex: 0 1 280px; max-width: 320px;
min-width: 180px;
flex: 1;
transition: all 0.2s;
}
.pc-search:focus-within {
background: #fff;
border-color: #ff6a00;
box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.08);
} }
.pc-search input { .pc-search input {
@@ -252,6 +282,7 @@ function handleLogout() {
.pc-search .el-icon { .pc-search .el-icon {
color: #a0aab6; color: #a0aab6;
font-size: 16px;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -259,66 +290,110 @@ function handleLogout() {
.pc-user-actions { .pc-user-actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 12px;
margin-left: 12px; margin-left: 12px;
min-width: 0;
flex-shrink: 0; flex-shrink: 0;
height: 100%;
} }
.pc-icon-link { .pc-icon-link {
display: grid; display: flex;
width: 36px; align-items: center;
height: 36px; gap: 10px;
place-items: center; padding: 0 22px;
border-radius: 10px; height: 40px;
color: #6b7a90; border-radius: 12px;
border: 1px solid #eef1f5;
background: #ffffff;
color: #5a6577;
font-size: 14px;
font-weight: 700;
text-decoration: none; text-decoration: none;
transition: background 0.15s; transition: all 0.2s;
white-space: nowrap;
} }
.pc-icon-link:hover { .pc-icon-link:hover {
background: #f0f5ff; background: #fff3e8;
color: #1477ff; border-color: #ff6a00;
color: #ff6a00;
box-shadow: 0 4px 12px rgba(255, 106, 0, 0.05);
}
.service-link {
gap: 7px;
min-width: 92px;
justify-content: center;
padding: 0 18px;
border-color: rgba(255, 106, 0, 0.32);
border-radius: 10px;
background: #fff8f2;
color: #ff6a00;
font-size: 14px;
font-weight: 800;
}
.service-link .el-icon {
width: 18px;
height: 18px;
font-size: 18px;
stroke-width: 2.2;
}
.service-link:hover {
background: #fff3e8;
border-color: #ff6a00;
box-shadow: 0 6px 16px rgba(255, 106, 0, 0.1);
transform: translateY(-1px);
} }
.pc-login-link { .pc-login-link {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 5px; gap: 6px;
padding: 6px 14px; padding: 0 16px;
height: 40px;
border-radius: 10px; border-radius: 10px;
background: #1477ff; background: #f4f6f8;
color: #fff; color: #17233d;
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
transition: background 0.15s; transition: all 0.2s;
} }
.pc-login-link:hover { .pc-login-link:hover {
background: #0d5fd4; background: #eaeff5;
} }
.pc-post-link { .pc-post-link {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 5px; gap: 6px;
padding: 6px 14px; padding: 0 18px;
height: 40px;
border-radius: 10px; border-radius: 10px;
background: #ff6a00; background: #ff6a00;
color: #fff; color: #fff;
font-size: 13px; font-size: 14px;
font-weight: 700; font-weight: 800;
text-decoration: none; text-decoration: none;
transition: background 0.15s; box-shadow: 0 6px 16px rgba(255, 106, 0, 0.2);
transition: all 0.2s;
} }
.pc-post-link:hover { .pc-post-link:hover {
background: #e55d00; background: #e55d00;
transform: translateY(-1px);
} }
/* ========== 已登录 - 用户块 ========== */ /* ========== 已登录 - 用户块 ========== */
.pc-user-block { .pc-user-block {
position: relative; position: relative;
height: 40px;
display: flex;
align-items: center;
} }
.pc-user-trigger { .pc-user-trigger {
@@ -326,27 +401,29 @@ function handleLogout() {
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 4px 10px 4px 4px; padding: 4px 10px 4px 4px;
height: 36px;
border: none; border: none;
border-radius: 10px; border-radius: 999px;
background: #f4f6f8; background: #f4f6f8;
cursor: pointer; cursor: pointer;
transition: background 0.15s; transition: all 0.2s;
} }
.pc-user-trigger:hover { .pc-user-trigger:hover,
.pc-user-trigger.active {
background: #eaeff5; background: #eaeff5;
} }
.pc-avatar-chip { .pc-avatar-chip {
display: grid; display: grid;
width: 30px; width: 28px;
height: 30px; height: 28px;
place-items: center; place-items: center;
border-radius: 8px; border-radius: 50%;
overflow: hidden; overflow: hidden;
background: #1477ff; background: linear-gradient(135deg, #ff6a00 0%, #e55d00 100%);
color: #fff; color: #fff;
font-size: 14px; font-size: 13px;
font-weight: 800; font-weight: 800;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -365,89 +442,110 @@ function handleLogout() {
max-width: 100px; max-width: 100px;
overflow: hidden; overflow: hidden;
color: #17233d; color: #17233d;
font-size: 13px; font-size: 14px;
font-weight: 700; font-weight: 700;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
/* ========== 下拉菜单 ========== */ .arrow-icon {
.pc-user-dropdown { font-size: 12px;
color: #8b9cb5;
transition: transform 0.3s;
}
.arrow-icon.rotated {
transform: rotate(180deg);
}
/* ========== 下拉菜单容器 (Hover Bridge) ========== */
.pc-user-dropdown-container {
position: absolute; position: absolute;
top: calc(100% + 6px); top: 100%;
right: 0; right: 0;
z-index: 200; z-index: 200;
min-width: 180px; padding-top: 12px;
padding: 6px; }
border-radius: 12px;
.pc-user-dropdown {
min-width: 200px;
padding: 8px;
border-radius: 14px;
background: #fff; background: #fff;
border: 1px solid #eef1f5; border: 1px solid #eef1f5;
box-shadow: 0 8px 24px rgba(23, 35, 61, 0.12); box-shadow: 0 10px 30px rgba(23, 35, 61, 0.15);
} }
.dropdown-item { .dropdown-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 10px;
width: 100%; width: 100%;
padding: 9px 12px; padding: 10px 14px;
border: none; border: none;
border-radius: 8px; border-radius: 10px;
background: none; background: none;
color: #3d4e63; color: #475569;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 600;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
transition: background 0.12s; transition: all 0.2s;
} }
.dropdown-item:hover { .dropdown-item:hover {
background: #f0f5ff; background: #fff3e8;
color: #1477ff; color: #ff6a00;
transform: translateX(4px);
} }
.dropdown-item .el-icon { .dropdown-item .el-icon {
color: #8b9cb5; font-size: 16px;
flex-shrink: 0; color: #94a3b8;
transition: color 0.2s;
} }
.dropdown-item:hover .el-icon { .dropdown-item:hover .el-icon {
color: #1477ff; color: #ff6a00;
} }
.dropdown-item.logout { .dropdown-item.logout {
color: #e74c3c; color: #ef4444;
} }
.dropdown-item.logout .el-icon { .dropdown-item.logout .el-icon {
color: #e74c3c; color: #ef4444;
} }
.dropdown-item.logout:hover { .dropdown-item.logout:hover {
background: #fef0ef; background: #fff1f0;
} }
.dropdown-divider { .dropdown-divider {
height: 1px; height: 1px;
margin: 4px 8px; margin: 6px 10px;
background: #eef1f5; background: #f1f5f9;
} }
/* 下拉动画 */ /* 下拉动画 */
.dropdown-enter-active, .dropdown-enter-active,
.dropdown-leave-active { .dropdown-leave-active {
transition: opacity 0.15s ease, transform 0.15s ease; transition: opacity 0.2s ease, transform 0.2s ease;
}
.dropdown-enter-from {
opacity: 0;
transform: translateY(10px);
} }
.dropdown-enter-from,
.dropdown-leave-to { .dropdown-leave-to {
opacity: 0; opacity: 0;
transform: translateY(-4px); transform: translateY(5px);
} }
/* ========== 主体 ---------- */ /* ========== 主体 ---------- */
.pc-main { .pc-main {
flex: 1; flex: 1;
min-width: 0;
padding: 20px 24px; padding: 20px 24px;
overflow-x: clip;
} }
</style> </style>
frontend/src/styles/base.css
+8
View File
@@ -11,10 +11,18 @@
box-sizing: border-box; box-sizing: border-box;
} }
html,
body { body {
margin: 0; margin: 0;
min-width: 320px; min-width: 320px;
min-height: 100vh; min-height: 100vh;
max-width: 100%;
overflow-x: hidden;
}
#app {
max-width: 100%;
overflow-x: hidden;
} }
a { a {
frontend/src/views/public/HomeView.vue
+942 -278
View File
File diff suppressed because it is too large Load Diff