feat(product-center): implement Figma-designed UI, upload module, and website tests
- Redesign website homepage & product-center per Figma (fonts, logos, hero/footer/customer cases) - Add API upload module (multer) with static serving for uploads/public assets - Add OriginGood.delisted flag and SDS request retry logic - Add admin ImageUpload component and goods import/upload flows - Add vitest suite for website components and composables (32 tests) - Add skills, docs, plans and PRODUCT.md
This commit is contained in:
yeuimu
@@ -3,146 +3,44 @@ import { computed } from 'vue';
|
||||
import type { Product } from '~/composables/useProductCenter';
|
||||
import { sortTagsByGroup } from '~/composables/useProductCenter';
|
||||
|
||||
const props = defineProps<{
|
||||
product: Product;
|
||||
showCountry?: boolean;
|
||||
}>();
|
||||
|
||||
const sortedTags = computed(() => sortTagsByGroup(props.product.tags).slice(0, 4));
|
||||
|
||||
function formatPrice(price: string | null): string {
|
||||
if (!price) return '—';
|
||||
const num = Number(price);
|
||||
if (!Number.isFinite(num)) return '—';
|
||||
return `¥${num.toFixed(2)}起`;
|
||||
}
|
||||
const props = defineProps<{ product: Product; showCountry?: boolean }>();
|
||||
const visibleTags = computed(() => sortTagsByGroup(props.product.tags).slice(0, 3));
|
||||
const price = computed(() => {
|
||||
const value = Number(props.product.price);
|
||||
return Number.isFinite(value) ? value.toFixed(2) : null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article class="product-card">
|
||||
<a class="product-card" :href="`https://inkpod.vip/portal/detail/${product.id}`">
|
||||
<div class="product-media">
|
||||
<img
|
||||
v-if="product.image"
|
||||
:src="product.image"
|
||||
:alt="product.name"
|
||||
class="product-img"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div v-else class="placeholder">
|
||||
<i class="fa-solid fa-image"></i>
|
||||
</div>
|
||||
<img v-if="product.image" :src="product.image" :alt="product.name" loading="lazy" />
|
||||
<i v-else class="fa-regular fa-image" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-title" :title="product.name">{{ product.name }}</h3>
|
||||
<div v-if="sortedTags.length > 0 || showCountry" class="chips">
|
||||
<span
|
||||
v-for="tag in sortedTags"
|
||||
:key="tag.id"
|
||||
class="chip"
|
||||
:style="{ color: tag.fontColor || tag.color || '#ff6a00', background: (tag.color || '#ff6a00') + '4d', borderColor: (tag.color || '#ff6a00') + '99' }"
|
||||
>
|
||||
{{ tag.name }}
|
||||
</span>
|
||||
<span v-if="showCountry" class="chip country-chip">
|
||||
<img
|
||||
v-if="product.country.icon"
|
||||
:src="product.country.icon"
|
||||
:alt="product.country.name"
|
||||
class="country-flag"
|
||||
/>
|
||||
{{ product.country.name }}
|
||||
</span>
|
||||
<h3 :title="product.name">{{ product.name }}</h3>
|
||||
<div class="chips">
|
||||
<span v-for="tag in visibleTags" :key="tag.id" class="chip" :style="{ color: tag.fontColor || tag.color || '#21834b', backgroundColor: `${tag.color || '#eaf8ef'}30` }">{{ tag.name }}</span>
|
||||
<span v-if="showCountry" class="chip country">{{ product.country.name }}</span>
|
||||
</div>
|
||||
<div class="price">{{ formatPrice(product.price) }}</div>
|
||||
<div class="price"><template v-if="price"><small>￥</small>{{ price }}<small>起</small></template><template v-else>暂无报价</template></div>
|
||||
</div>
|
||||
</article>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.product-card {
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 28px rgba(17, 17, 17, 0.06);
|
||||
}
|
||||
|
||||
.product-media {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
background: linear-gradient(180deg, #f8f8f8, #f0f0f0);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.product-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #ccc;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.product-title {
|
||||
margin: 0 0 12px;
|
||||
font-size: 19px;
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.chips {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-bottom: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
border-radius: 5px;
|
||||
color: #ff6a00;
|
||||
background: #fff2e8;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.country-chip {
|
||||
color: #555;
|
||||
background: #f3f4f6;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.country-flag {
|
||||
width: 16px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
object-fit: cover;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #222;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
.product-card { display: block; width: 100%; height: 382px; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: inherit; text-decoration: none; transition: box-shadow .2s, transform .2s; }.product-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
|
||||
.product-media { display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #f2f2f2; color: #bbb; font-size: 32px; }
|
||||
.product-media img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.product-info { padding: 7px 12px 9px; }
|
||||
.product-info h3 { margin: 0 0 5px; overflow: hidden; color: #000; font-size: 18px; font-weight: 500; line-height: 25px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.chips { display: flex; gap: 6px; height: 21px; margin-bottom: 5px; overflow: hidden; }
|
||||
.chip { display: inline-flex; align-items: center; flex: 0 0 auto; height: 21px; padding: 0 6px; border-radius: 4px; font-size: 12px; white-space: nowrap; }
|
||||
.chip.country { color: #535353; background: #ececef; }
|
||||
.price { margin-top: 5px; color: #000; font-size: 20px; font-weight: 700; line-height: 28px; }
|
||||
.price small { font-size: 16px; font-weight: 500; }
|
||||
@media (max-width: 760px) {
|
||||
.product-card { height: auto; min-height: 0; max-width: none; overflow: visible; }
|
||||
.product-info h3 { font-size: 15px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<article class="skeleton-card">
|
||||
<div class="skeleton-media"></div>
|
||||
<div class="skeleton-media"><i class="fa-solid fa-image" aria-hidden="true"></i></div>
|
||||
<div class="skeleton-info">
|
||||
<div class="skeleton-line title"></div>
|
||||
<div class="skeleton-chips">
|
||||
@@ -31,10 +31,14 @@
|
||||
}
|
||||
|
||||
.skeleton-media {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.skeleton-media i { position: relative; z-index: 1; color: #c2c2c2; font-size: 44px; }
|
||||
|
||||
.skeleton-media::after,
|
||||
.skeleton-line::after,
|
||||
.skeleton-chip::after {
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
const portalUrl = 'https://inkpod.vip/portal/search';
|
||||
const loginUrl = 'https://inkpod.vip/user/login';
|
||||
</script>
|
||||
<template>
|
||||
<header class="header">
|
||||
<NuxtLink to="/" class="logo"><img src="/logo-unified.svg" alt="InkReach" /></NuxtLink>
|
||||
<nav><NuxtLink to="/product-center" class="active">产品中心</NuxtLink><a :href="portalUrl" target="_blank">在线设计</a><a href="#">选品推荐</a><a href="#">解决方案</a></nav>
|
||||
<div class="actions"><a :href="loginUrl" target="_blank"><i class="fa-solid fa-desktop"></i>工作台</a><a :href="loginUrl" target="_blank"><i class="fa-solid fa-cart-shopping"></i>购物车</a><a class="phone" href="tel:18588980344"><i class="fa-solid fa-circle-user"></i>18588980344<i class="fa-solid fa-chevron-down"></i></a></div>
|
||||
</header>
|
||||
</template>
|
||||
<style scoped>
|
||||
.header { position: fixed; z-index: 60; top: 0; left: 0; right: 0; display: flex; align-items: center; height: 80px; padding: 0 70px; border-bottom: 1px solid #e5e7eb; background: #fff; }
|
||||
.logo { width: 97px; height: 56px; display: grid; place-items: center; }.logo img { width: 97px; height: 56px; object-fit: contain; }
|
||||
nav { display: flex; gap: 32px; margin-left: 44px; } nav a { color: rgba(0,0,0,.5); font-size: 18px; text-decoration: none; white-space: nowrap; } nav .active { color: #000; }
|
||||
.actions { display: flex; align-items: center; gap: 24px; margin-left: auto; }.actions a { display: flex; align-items: center; gap: 8px; color: rgba(0,0,0,.62); font-size: 16px; text-decoration: none; white-space: nowrap; }.actions i { font-size: 18px; }.actions .phone { color: #222; font-size: 18px; }.phone .fa-chevron-down { margin-left: 4px; font-size: 10px; }
|
||||
@media (max-width: 1000px) { .header { padding: 0 20px; }.header nav { display: none; }.actions a:not(.phone) { display: none; } }
|
||||
@media (max-width: 520px) { .actions .phone { font-size: 0; }.actions .phone i { font-size: 20px; } }
|
||||
</style>
|
||||
@@ -1,89 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import type { Country } from '~/composables/useProductCenter';
|
||||
|
||||
defineProps<{
|
||||
countries: Country[];
|
||||
activeCountryId: string | null;
|
||||
}>();
|
||||
const props = defineProps<{ countries: Country[]; activeCountryId: string | null }>();
|
||||
const emit = defineEmits<{ 'update:activeCountryId': [id: string | null] }>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:activeCountryId': [id: string | null];
|
||||
}>();
|
||||
|
||||
function selectCountry(id: string | null): void {
|
||||
emit('update:activeCountryId', id);
|
||||
}
|
||||
const configuredCountries = computed(() => props.countries);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="country-bar">
|
||||
<button
|
||||
type="button"
|
||||
class="filter-pill"
|
||||
:class="{ active: activeCountryId === null }"
|
||||
@click="selectCountry(null)"
|
||||
>
|
||||
全部
|
||||
</button>
|
||||
<button
|
||||
v-for="country in countries"
|
||||
:key="country.id"
|
||||
type="button"
|
||||
class="filter-pill"
|
||||
:class="{ active: activeCountryId === country.id }"
|
||||
@click="selectCountry(country.id)"
|
||||
>
|
||||
<img
|
||||
v-if="country.icon"
|
||||
:src="country.icon"
|
||||
:alt="country.name"
|
||||
class="flag"
|
||||
/>
|
||||
{{ country.name }}
|
||||
</button>
|
||||
<div class="country-bar" aria-label="国家筛选">
|
||||
<button type="button" class="filter-pill" :class="{ active: activeCountryId === null }" @click="emit('update:activeCountryId', null)">全部</button>
|
||||
<template v-for="country in configuredCountries" :key="country.id">
|
||||
<button type="button" class="filter-pill" :class="{ active: activeCountryId === country.id }" @click="emit('update:activeCountryId', country.id)">
|
||||
<img v-if="country.icon" :src="country.icon" :alt="country.name" class="flag" />
|
||||
{{ country.name }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.country-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.filter-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #eee;
|
||||
background: #fff;
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.filter-pill:hover {
|
||||
border-color: #ddd;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.filter-pill.active {
|
||||
color: #ff6a00;
|
||||
border-color: #ff6a00;
|
||||
background: #fff2e8;
|
||||
}
|
||||
|
||||
.flag {
|
||||
width: 18px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.country-bar { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; max-width: 100%; flex-wrap: wrap; }
|
||||
.filter-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border: 0; border-radius: 60px; background: #f2f2f2; color: #000; font-size: 16px; white-space: nowrap; cursor: pointer; }
|
||||
.filter-pill.active { color: #ff6800; background: rgba(255, 104, 0, .06); }
|
||||
.flag { width: 22px; height: 16px; border-radius: 2px; object-fit: cover; }
|
||||
@media (max-width: 760px) { .country-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } }
|
||||
</style>
|
||||
|
||||
@@ -1,108 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import { shallowRef, watch } from 'vue';
|
||||
|
||||
const keyword = defineModel<string>('keyword', { default: '' });
|
||||
const emit = defineEmits<{
|
||||
search: [];
|
||||
}>();
|
||||
|
||||
const localKeyword = ref(keyword.value);
|
||||
|
||||
watch(keyword, (v) => {
|
||||
localKeyword.value = v;
|
||||
});
|
||||
|
||||
function onSearch(): void {
|
||||
keyword.value = localKeyword.value.trim();
|
||||
emit('search');
|
||||
}
|
||||
|
||||
function onKeydown(event: KeyboardEvent): void {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
onSearch();
|
||||
}
|
||||
}
|
||||
|
||||
function clearKeyword(): void {
|
||||
localKeyword.value = '';
|
||||
keyword.value = '';
|
||||
emit('search');
|
||||
}
|
||||
const emit = defineEmits<{ search: [] }>();
|
||||
const localKeyword = shallowRef(keyword.value);
|
||||
watch(keyword, (value) => { localKeyword.value = value; });
|
||||
function submit(): void { keyword.value = localKeyword.value.trim(); emit('search'); }
|
||||
function clear(): void { localKeyword.value = ''; keyword.value = ''; emit('search'); }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="search-box">
|
||||
<input
|
||||
v-model="localKeyword"
|
||||
type="text"
|
||||
placeholder="搜索商品"
|
||||
@keydown="onKeydown"
|
||||
/>
|
||||
<button v-if="localKeyword" type="button" class="clear-btn" @click="clearKeyword">
|
||||
<i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
<button type="button" class="search-btn" @click="onSearch">
|
||||
<i class="fa-solid fa-magnifying-glass"></i>
|
||||
</button>
|
||||
</div>
|
||||
<form class="search-box" role="search" @submit.prevent="submit">
|
||||
<i class="fa-solid fa-magnifying-glass search-icon" aria-hidden="true"></i>
|
||||
<input v-model="localKeyword" aria-label="搜索商品" placeholder="搜索商品" />
|
||||
<button v-if="localKeyword" class="clear-search" type="button" aria-label="清除搜索" @click="clear"><i class="fa-solid fa-xmark"></i></button>
|
||||
<button class="submit-search" type="submit">搜索</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
height: 38px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.search-box:focus-within {
|
||||
border-color: #ff6a00;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
width: 200px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.search-box input::placeholder {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.clear-btn:hover {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
border: 0;
|
||||
background: #ff6a00;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.search-btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.search-box { position: relative; display: flex; align-items: center; width: 220px; height: 38px; border: 1px solid #c7c7c7; border-radius: 60px; background: #fff; overflow: hidden; }
|
||||
.search-icon { position: absolute; left: 12px; color: #666; font-size: 14px; }
|
||||
.search-box input { min-width: 0; flex: 1; height: 100%; padding: 0 2px 0 34px; border: 0; outline: 0; background: transparent; font-size: 16px; }
|
||||
.search-box button { flex: 0 0 auto; height: 34px; padding: 0; border: 0; background: transparent; cursor: pointer; }
|
||||
.search-box .clear-search { width: 28px; color: #777; font-size: 14px; }.search-box .submit-search { width: 50px; color: #ff6800; font-size: 16px; }
|
||||
@media (max-width: 760px) { .search-box { width: 100%; } }
|
||||
</style>
|
||||
|
||||
@@ -1,127 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import type { Product } from '~/composables/useProductCenter';
|
||||
|
||||
const props = defineProps<{
|
||||
products: Product[];
|
||||
loading: boolean;
|
||||
showCountry?: boolean;
|
||||
}>();
|
||||
|
||||
const skeletonCount = 12;
|
||||
defineProps<{ products: Product[]; loading: boolean; showCountry?: boolean }>();
|
||||
const emit = defineEmits<{ 'clear-filters': []; 'view-all': [] }>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="loading" class="product-grid">
|
||||
<ProductCardSkeleton
|
||||
v-for="n in skeletonCount"
|
||||
:key="`skeleton-${n}`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else-if="products.length === 0" class="empty-state">
|
||||
<div class="empty-art">
|
||||
<div class="empty-box"></div>
|
||||
<div class="empty-lid"></div>
|
||||
<div class="empty-spark spark-1"></div>
|
||||
<div class="empty-spark spark-2"></div>
|
||||
</div>
|
||||
<h2>暂无匹配商品</h2>
|
||||
<p>试试清空筛选条件，或切换其他分类看看。</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="product-grid">
|
||||
<ProductCard
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
:product="product"
|
||||
:show-country="showCountry"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="loading" class="product-grid"><ProductCardSkeleton v-for="index in 8" :key="index" /></div>
|
||||
<div v-else-if="!products.length" class="empty">
|
||||
<img src="/product-empty.svg" alt="" />
|
||||
<h2>未找到相关商品</h2>
|
||||
<p>当前筛选条件下暂无匹配产品，可尝试调整关键词或减少筛选条件。</p>
|
||||
<div class="empty-actions"><button type="button" class="view-all" @click="emit('view-all')">查看全部商品</button><button type="button" class="clear" @click="emit('clear-filters')">清空筛选</button></div>
|
||||
</div>
|
||||
<div v-else class="product-grid"><ProductCard v-for="product in products" :key="product.id" :product="product" :show-country="showCountry" /></div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.product-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 480px;
|
||||
padding: 80px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-art {
|
||||
position: relative;
|
||||
width: 220px;
|
||||
height: 176px;
|
||||
margin: 0 auto 28px;
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
position: absolute;
|
||||
left: 35px;
|
||||
top: 42px;
|
||||
width: 150px;
|
||||
height: 94px;
|
||||
border-radius: 18px;
|
||||
background: #f2f2f2;
|
||||
transform: perspective(400px) rotateX(58deg) rotateZ(-8deg);
|
||||
}
|
||||
|
||||
.empty-lid {
|
||||
position: absolute;
|
||||
left: 48px;
|
||||
top: 20px;
|
||||
width: 124px;
|
||||
height: 64px;
|
||||
border-radius: 16px;
|
||||
background: #e8e8e8;
|
||||
transform: rotate(-8deg);
|
||||
}
|
||||
|
||||
.empty-spark {
|
||||
position: absolute;
|
||||
border-radius: 999px;
|
||||
background: #ff6a00;
|
||||
}
|
||||
|
||||
.spark-1 {
|
||||
left: 21px;
|
||||
top: 52px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.spark-2 {
|
||||
right: 26px;
|
||||
top: 18px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.empty-state h2 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin: 0;
|
||||
color: #777;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.product-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px 24px; }
|
||||
.empty { display: flex; flex-direction: column; align-items: center; min-height: 600px; padding-top: 86px; color: rgba(0,0,0,.6); text-align: center; }.empty img { width: 260px; height: 260px; object-fit: contain; }.empty h2 { margin: 12px 0 10px; color: #000; font-size: 22px; font-weight: 600; }.empty p { margin: 0; font-size: 14px; }.empty-actions { display: flex; gap: 24px; margin-top: 34px; }.empty-actions button { height: 38px; padding: 0 16px; border: 0; border-radius: 60px; font-size: 16px; cursor: pointer; }.empty-actions .view-all { color: #ff6800; background: rgba(255,104,0,.06); }.empty-actions .clear { min-width: 128px; color: #fff; background: #ff6800; }
|
||||
@media (max-width: 1180px) { .product-grid { gap: 16px; } }
|
||||
@media (max-width: 760px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
@media (max-width: 430px) { .product-grid { grid-template-columns: minmax(0, 1fr); } }
|
||||
</style>
|
||||
|
||||
@@ -1,249 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
total: number;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:page': [page: number];
|
||||
'update:pageSize': [size: number];
|
||||
}>();
|
||||
|
||||
const totalPages = computed(() => {
|
||||
if (props.total <= 0) return 1;
|
||||
return Math.max(1, Math.ceil(props.total / props.pageSize));
|
||||
});
|
||||
|
||||
const pageNumbers = computed<(number | string)[]>(() => {
|
||||
const total = totalPages.value;
|
||||
const current = props.page;
|
||||
if (total <= 7) {
|
||||
return Array.from({ length: total }, (_, i) => i + 1);
|
||||
}
|
||||
const pages: (number | string)[] = [1];
|
||||
const start = Math.max(2, current - 1);
|
||||
const end = Math.min(total - 1, current + 1);
|
||||
if (start > 2) pages.push('...');
|
||||
for (let i = start; i <= end; i++) pages.push(i);
|
||||
if (end < total - 1) pages.push('...');
|
||||
pages.push(total);
|
||||
return pages;
|
||||
});
|
||||
|
||||
const canPrev = computed(() => props.page > 1);
|
||||
const canNext = computed(() => props.page < totalPages.value);
|
||||
|
||||
const gotoInput = ref('');
|
||||
|
||||
function goPrev(): void {
|
||||
if (canPrev.value) emit('update:page', props.page - 1);
|
||||
}
|
||||
|
||||
function goNext(): void {
|
||||
if (canNext.value) emit('update:page', props.page + 1);
|
||||
}
|
||||
|
||||
function goToPage(page: number): void {
|
||||
if (page < 1 || page > totalPages.value || page === props.page) return;
|
||||
emit('update:page', page);
|
||||
}
|
||||
|
||||
function onPageSizeChange(event: Event): void {
|
||||
const target = event.target as HTMLSelectElement;
|
||||
const size = Number(target.value);
|
||||
if (!Number.isFinite(size) || size <= 0) return;
|
||||
emit('update:pageSize', size);
|
||||
}
|
||||
|
||||
function onGoto(): void {
|
||||
const value = Number(gotoInput.value);
|
||||
if (!Number.isFinite(value)) return;
|
||||
const clamped = Math.min(totalPages.value, Math.max(1, Math.floor(value)));
|
||||
gotoInput.value = '';
|
||||
goToPage(clamped);
|
||||
}
|
||||
|
||||
function onGotoKeydown(event: KeyboardEvent): void {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
onGoto();
|
||||
}
|
||||
}
|
||||
const props = defineProps<{ total: number; page: number; pageSize: number }>();
|
||||
const emit = defineEmits<{ 'update:page': [page: number]; 'update:pageSize': [size: number] }>();
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)));
|
||||
const pages = computed<(number | string)[]>(() => totalPages.value <= 7 ? Array.from({ length: totalPages.value }, (_, i) => i + 1) : [1, 2, 3, 4, 5, '•••', totalPages.value]);
|
||||
const goto = shallowRef('');
|
||||
function go(page: number): void { if (page >= 1 && page <= totalPages.value && page !== props.page) emit('update:page', page); }
|
||||
function jump(): void { go(Math.floor(Number(goto.value))); goto.value = ''; }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pagination">
|
||||
<div class="total-text">
|
||||
总计 <span>{{ total }}</span> 个产品
|
||||
</div>
|
||||
|
||||
<div class="page-buttons">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-btn"
|
||||
:disabled="!canPrev"
|
||||
@click="goPrev"
|
||||
>
|
||||
<i class="fa-solid fa-chevron-left"></i>
|
||||
</button>
|
||||
<button
|
||||
v-for="(item, idx) in pageNumbers"
|
||||
:key="`page-${idx}-${item}`"
|
||||
type="button"
|
||||
class="page-btn"
|
||||
:class="{
|
||||
current: item === page,
|
||||
dots: item === '...',
|
||||
}"
|
||||
:disabled="item === '...'"
|
||||
@click="typeof item === 'number' && goToPage(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="nav-btn"
|
||||
:disabled="!canNext"
|
||||
@click="goNext"
|
||||
>
|
||||
<i class="fa-solid fa-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="right-controls">
|
||||
<select :value="pageSize" class="size-select" @change="onPageSizeChange">
|
||||
<option :value="12">12 / 页</option>
|
||||
<option :value="20">20 / 页</option>
|
||||
<option :value="40">40 / 页</option>
|
||||
</select>
|
||||
<span class="goto-label">导航至</span>
|
||||
<input
|
||||
v-model="gotoInput"
|
||||
type="number"
|
||||
min="1"
|
||||
:max="totalPages"
|
||||
class="goto-input"
|
||||
@keydown="onGotoKeydown"
|
||||
/>
|
||||
<button type="button" class="goto-btn" @click="onGoto">Go</button>
|
||||
</div>
|
||||
<strong>总计{{ total }}个产品</strong>
|
||||
<button type="button" :disabled="page <= 1" aria-label="上一页" @click="go(page - 1)"><i class="fa-solid fa-chevron-left"></i></button>
|
||||
<template v-for="item in pages" :key="item"><span v-if="typeof item === 'string'" class="dots">{{ item }}</span><button v-else type="button" :class="{ current: item === page }" @click="go(item)">{{ item }}</button></template>
|
||||
<button type="button" :disabled="page >= totalPages" aria-label="下一页" @click="go(page + 1)"><i class="fa-solid fa-chevron-right"></i></button>
|
||||
<select :value="pageSize" aria-label="每页数量" @change="emit('update:pageSize', Number(($event.target as HTMLSelectElement).value))"><option :value="10">10 / 每页</option><option :value="20">20 / 每页</option><option :value="40">40 / 每页</option></select>
|
||||
<label>导航至<input v-model="goto" type="number" min="1" :max="totalPages" @keydown.enter.prevent="jump" /></label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
padding: 16px 24px;
|
||||
font-size: 14px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.total-text span {
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.page-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-btn,
|
||||
.page-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #eee;
|
||||
background: #fff;
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-btn:hover:not(:disabled),
|
||||
.page-btn:hover:not(.dots):not(.current) {
|
||||
border-color: #ff6a00;
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.nav-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.page-btn.current {
|
||||
background: #ff6a00;
|
||||
border-color: #ff6a00;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.page-btn.dots {
|
||||
border-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.right-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.size-select {
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.goto-label {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.goto-input {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
color: #222;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.goto-input:focus {
|
||||
border-color: #ff6a00;
|
||||
}
|
||||
|
||||
.goto-btn {
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #ff6a00;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: #ff6a00;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.goto-btn:hover {
|
||||
background: #ff6a00;
|
||||
color: #fff;
|
||||
}
|
||||
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 32px 0; color: rgba(0,0,0,.85); font-size: 14px; }.pagination strong { margin-right: 2px; font-size: 13px; }
|
||||
button { display: grid; place-items: center; min-width: 35px; height: 32px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; cursor: pointer; }button.current { color: #ff6800; border-color: #ff6800; }button:disabled { opacity: .4; }.dots { width: 35px; text-align: center; color: rgba(0,0,0,.3); letter-spacing: 2px; }
|
||||
select,input { height: 32px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; }select { width: 112px; padding: 0 12px; }label { display: flex; align-items: center; gap: 8px; }input { width: 55px; padding: 0 8px; }
|
||||
@media (max-width: 760px) { .pagination { flex-wrap: wrap; }.pagination strong { width: 100%; text-align: center; } }
|
||||
</style>
|
||||
|
||||
@@ -1,257 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch } from 'vue';
|
||||
|
||||
import type { Category } from '~/composables/useProductCenter';
|
||||
|
||||
const props = defineProps<{
|
||||
categories: Category[];
|
||||
activeCategoryId: string | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:activeCategoryId': [id: string | null];
|
||||
}>();
|
||||
|
||||
const expanded = ref<Record<string, boolean>>({});
|
||||
|
||||
function toggleExpand(id: string): void {
|
||||
expanded.value[id] = !expanded.value[id];
|
||||
const props = defineProps<{ categories: Category[]; activeCategoryId: string | null }>();
|
||||
const emit = defineEmits<{ 'update:activeCategoryId': [id: string | null] }>();
|
||||
const expanded = reactive<Record<string, boolean>>({});
|
||||
function selectRootCategory(category: Category): void {
|
||||
emit('update:activeCategoryId', category.id);
|
||||
if (category.children.length) expanded[category.id] = !expanded[category.id];
|
||||
}
|
||||
|
||||
function isExpanded(id: string): boolean {
|
||||
return Boolean(expanded.value[id]);
|
||||
}
|
||||
|
||||
function selectCategory(id: string | null): void {
|
||||
emit('update:activeCategoryId', id);
|
||||
}
|
||||
|
||||
function shouldAutoExpand(id: string): boolean {
|
||||
if (props.activeCategoryId === null) return false;
|
||||
if (props.activeCategoryId === id) return true;
|
||||
const cat = props.categories.find((c) => c.id === id);
|
||||
if (!cat) return false;
|
||||
return cat.children.some((c) => c.id === props.activeCategoryId);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.categories,
|
||||
(cats) => {
|
||||
for (const c of cats) {
|
||||
if (shouldAutoExpand(c.id)) {
|
||||
expanded.value[c.id] = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
watch(() => [props.categories, props.activeCategoryId] as const, () => {
|
||||
for (const category of props.categories) {
|
||||
if (category.id === props.activeCategoryId || category.children.some((item) => item.id === props.activeCategoryId)) expanded[category.id] = true;
|
||||
}
|
||||
}, { immediate: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="product-sidebar">
|
||||
<div class="category-list">
|
||||
<button
|
||||
type="button"
|
||||
class="cat-row"
|
||||
:class="{ active: activeCategoryId === null }"
|
||||
@click="selectCategory(null)"
|
||||
>
|
||||
<span class="cat-icon"></span>
|
||||
<span class="cat-name">全部商品</span>
|
||||
<nav class="sidebar" aria-label="商品分类">
|
||||
<button class="root-row" :class="{ active: activeCategoryId === null }" type="button" @click="emit('update:activeCategoryId', null)"><i class="fa-solid fa-border-all"></i><span>全部商品</span></button>
|
||||
<template v-for="category in categories" :key="category.id">
|
||||
<button class="root-row" :class="{ active: activeCategoryId === category.id }" type="button" @click="selectRootCategory(category)">
|
||||
<img v-if="category.icon" :src="category.icon" alt="" /><i v-else class="fa-regular fa-folder"></i><span>{{ category.name }}</span><i v-if="category.children.length" class="fa-solid fa-chevron-down arrow" :class="{ open: expanded[category.id] }"></i>
|
||||
</button>
|
||||
|
||||
<template v-for="cat in categories" :key="cat.id">
|
||||
<button
|
||||
type="button"
|
||||
class="cat-row"
|
||||
:class="{ active: activeCategoryId === cat.id }"
|
||||
@click="cat.children.length > 0 ? toggleExpand(cat.id) : selectCategory(cat.id)"
|
||||
>
|
||||
<span class="cat-icon"></span>
|
||||
<span class="cat-name">{{ cat.name }}</span>
|
||||
<span v-if="cat.children.length > 0" class="chevron" :class="{ expanded: isExpanded(cat.id) }"></span>
|
||||
</button>
|
||||
|
||||
<Transition name="subtree">
|
||||
<div v-if="cat.children.length > 0 && isExpanded(cat.id)" class="subtree">
|
||||
<button
|
||||
v-for="child in cat.children"
|
||||
:key="child.id"
|
||||
type="button"
|
||||
class="sub-row"
|
||||
:class="{ active: activeCategoryId === child.id }"
|
||||
@click="selectCategory(child.id)"
|
||||
>
|
||||
{{ child.name }}
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
<div v-if="categories.length === 0" class="empty-cat">暂无分类</div>
|
||||
</div>
|
||||
</aside>
|
||||
<div v-if="category.children.length && expanded[category.id]" class="children">
|
||||
<button v-for="child in category.children" :key="child.id" type="button" :class="{ active: activeCategoryId === child.id }" @click="emit('update:activeCategoryId', child.id)">{{ child.name }}</button>
|
||||
</div>
|
||||
</template>
|
||||
<p v-if="!categories.length" class="empty">暂无分类</p>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.product-sidebar {
|
||||
position: relative;
|
||||
padding-top: 26px;
|
||||
background: #ffffff;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.category-list {
|
||||
width: 216px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cat-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
margin-bottom: 12px;
|
||||
padding: 0 10px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
color: #222;
|
||||
transition: background 0.2s ease, color 0.2s ease;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cat-row:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.cat-row.active {
|
||||
color: #ff6a00;
|
||||
background: #fff2e8;
|
||||
}
|
||||
|
||||
.cat-icon {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
color: currentColor;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cat-icon::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 4px 5px;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 7px 7px 4px 4px;
|
||||
}
|
||||
|
||||
.cat-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 2px;
|
||||
width: 8px;
|
||||
height: 7px;
|
||||
border: 2px solid currentColor;
|
||||
border-bottom: 0;
|
||||
border-radius: 7px 7px 0 0;
|
||||
}
|
||||
|
||||
.cat-name {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
flex-shrink: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-right: 1.8px solid currentColor;
|
||||
border-bottom: 1.8px solid currentColor;
|
||||
transform: rotate(45deg) translateY(-2px);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.chevron.expanded {
|
||||
transform: rotate(225deg) translateY(-2px);
|
||||
}
|
||||
|
||||
.subtree {
|
||||
position: relative;
|
||||
margin: -2px 0 12px;
|
||||
padding: 0 0 0 42px;
|
||||
}
|
||||
|
||||
.subtree::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 22px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.sub-row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 10px;
|
||||
border-radius: 8px;
|
||||
color: #555;
|
||||
font-size: 15px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.sub-row::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 50%;
|
||||
width: 6px;
|
||||
height: 1px;
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.sub-row:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.sub-row.active {
|
||||
color: #ff6a00;
|
||||
background: #fff2e8;
|
||||
}
|
||||
|
||||
.empty-cat {
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.subtree-enter-active,
|
||||
.subtree-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.subtree-enter-from,
|
||||
.subtree-leave-to {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
.subtree-enter-to,
|
||||
.subtree-leave-from {
|
||||
max-height: 600px;
|
||||
}
|
||||
.sidebar { width: 216px; padding-top: 12px; }
|
||||
.root-row { display: flex; align-items: center; width: 216px; height: 45px; margin-bottom: 10px; padding: 10px; border: 0; border-radius: 6px; background: #fff; color: #000; font-size: 18px; cursor: pointer; }
|
||||
.root-row:hover, .root-row.active, .children button.active { color: #ff6800; background: #fff3eb; }.root-row img { filter: brightness(0); }.root-row.active img { filter: invert(48%) sepia(99%) saturate(3770%) hue-rotate(3deg) brightness(104%) contrast(104%); }
|
||||
.root-row img, .root-row > i:first-child { width: 24px; height: 24px; margin-right: 8px; object-fit: contain; text-align: center; line-height: 24px; }
|
||||
.root-row span { flex: 1; text-align: left; }
|
||||
.arrow { font-size: 12px; transition: transform .2s; }.arrow.open { transform: rotate(180deg); }
|
||||
.children { position: relative; margin-left: 10px; padding-left: 20px; border-left: 1px solid #e5e7eb; }
|
||||
.children button { position: relative; display: block; width: 174px; height: 45px; margin-bottom: 10px; padding: 10px; border: 0; border-radius: 6px; background: #fff; color: #000; text-align: left; font-size: 18px; cursor: pointer; }
|
||||
.children button::before { content: ''; position: absolute; top: 22px; left: -14px; width: 6px; border-top: 1px solid #e5e7eb; }
|
||||
.empty { color: #777; text-align: center; }
|
||||
</style>
|
||||
|
||||
@@ -1,191 +1,75 @@
|
||||
<script setup lang="ts">
|
||||
import type { Tag } from '~/composables/useProductCenter';
|
||||
import { computed, onBeforeUnmount, onMounted, shallowRef } from 'vue';
|
||||
import type { Tag, TagGroup } from '~/composables/useProductCenter';
|
||||
|
||||
const props = defineProps<{
|
||||
tags: Tag[];
|
||||
selectedTagIds: string[];
|
||||
}>();
|
||||
const props = defineProps<{ tags: Tag[]; tagGroups: TagGroup[]; selectedTagIds: string[] }>();
|
||||
const emit = defineEmits<{ 'toggle-tag': [id: string] }>();
|
||||
const openGroup = shallowRef<string | null>(null);
|
||||
const rootElement = shallowRef<HTMLElement | null>(null);
|
||||
const groupedTags = computed(() => {
|
||||
return props.tagGroups
|
||||
.filter((group) => group.name.includes('物流') || group.name.includes('工艺'))
|
||||
.sort((a, b) => a.sortOrder - b.sortOrder)
|
||||
.map((group) => ({
|
||||
id: group.id,
|
||||
label: group.name.includes('物流') ? '物流' : '工艺',
|
||||
tags: props.tags.filter((tag) => tag.group?.id === group.id),
|
||||
}))
|
||||
.filter((group) => group.tags.length > 0);
|
||||
});
|
||||
const selectedTagByGroup = computed(() => {
|
||||
const selectedIds = new Set(props.selectedTagIds);
|
||||
return new Map(
|
||||
props.tags
|
||||
.filter((tag) => selectedIds.has(tag.id) && tag.group)
|
||||
.map((tag) => [tag.group!.id, tag]),
|
||||
);
|
||||
});
|
||||
const selectedGroups = computed(() => groupedTags.value
|
||||
.map((group) => ({ ...group, selectedTag: selectedTagByGroup.value.get(group.id) }))
|
||||
.filter((group) => group.selectedTag));
|
||||
|
||||
const emit = defineEmits<{
|
||||
'toggle-tag': [id: string];
|
||||
}>();
|
||||
|
||||
const dropdownOpen = ref(false);
|
||||
const dropdownRef = ref<HTMLElement | null>(null);
|
||||
|
||||
function toggleDropdown(): void {
|
||||
dropdownOpen.value = !dropdownOpen.value;
|
||||
}
|
||||
|
||||
function toggleTag(id: string): void {
|
||||
function selectTag(id: string): void {
|
||||
emit('toggle-tag', id);
|
||||
openGroup.value = null;
|
||||
}
|
||||
|
||||
function isSelected(id: string): boolean {
|
||||
return props.selectedTagIds.includes(id);
|
||||
function closeOnOutsideClick(event: MouseEvent): void {
|
||||
if (!rootElement.value?.contains(event.target as Node)) openGroup.value = null;
|
||||
}
|
||||
|
||||
function onClickOutside(event: MouseEvent): void {
|
||||
if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
|
||||
dropdownOpen.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', onClickOutside);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', onClickOutside);
|
||||
});
|
||||
|
||||
const label = computed(() => {
|
||||
if (props.selectedTagIds.length === 0) return '标签';
|
||||
if (props.selectedTagIds.length === 1) {
|
||||
return props.tags.find((t) => t.id === props.selectedTagIds[0])?.name ?? '标签';
|
||||
}
|
||||
return `标签 (${props.selectedTagIds.length})`;
|
||||
});
|
||||
onMounted(() => document.addEventListener('click', closeOnOutsideClick));
|
||||
onBeforeUnmount(() => document.removeEventListener('click', closeOnOutsideClick));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="dropdownRef" class="filter-pill-wrapper">
|
||||
<button
|
||||
type="button"
|
||||
class="filter-pill"
|
||||
:class="{ active: selectedTagIds.length > 0 }"
|
||||
@click="toggleDropdown"
|
||||
>
|
||||
{{ label }}
|
||||
<span class="chevron" :class="{ expanded: dropdownOpen }"></span>
|
||||
</button>
|
||||
|
||||
<Transition name="dropdown">
|
||||
<div v-if="dropdownOpen" class="dropdown-menu">
|
||||
<button
|
||||
v-for="tag in tags"
|
||||
:key="tag.id"
|
||||
type="button"
|
||||
class="dropdown-item"
|
||||
@click="toggleTag(tag.id)"
|
||||
>
|
||||
<span class="tag-label">{{ tag.name }}</span>
|
||||
<span class="check-box" :class="{ checked: isSelected(tag.id) }">
|
||||
<i v-if="isSelected(tag.id)" class="fa-solid fa-check text-[10px]"></i>
|
||||
</span>
|
||||
<div ref="rootElement" class="tag-filters">
|
||||
<div class="filter-controls">
|
||||
<div v-for="group in groupedTags" :key="group.id" class="filter-group">
|
||||
<div class="dropdown">
|
||||
<button type="button" class="filter-button" :class="{ open: openGroup === group.id }" @click="openGroup = openGroup === group.id ? null : group.id">{{ group.label }}<i class="fa-solid fa-chevron-down"></i></button>
|
||||
<div v-if="openGroup === group.id" class="menu">
|
||||
<button v-for="tag in group.tags" :key="tag.id" type="button" :class="{ selected: selectedTagIds.includes(tag.id) }" @click="selectTag(tag.id)"><span>{{ tag.name }}</span><span class="checkbox"><i v-if="selectedTagIds.includes(tag.id)" class="fa-solid fa-check"></i></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="selectedGroups.length" class="selected-tags" :class="{ 'craft-only': selectedGroups.length === 1 && selectedGroups[0]?.label === '工艺' }">
|
||||
<div v-for="group in selectedGroups" :key="group.id" class="selected-tag">
|
||||
<span>{{ group.selectedTag?.name }}</span>
|
||||
<button type="button" class="selected-tag-remove" :aria-label="`取消${group.selectedTag?.name}筛选`" @click="emit('toggle-tag', group.selectedTag!.id)">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.filter-pill-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filter-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 38px;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #eee;
|
||||
background: #fff;
|
||||
font-size: 15px;
|
||||
color: #222;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.filter-pill:hover {
|
||||
border-color: #ddd;
|
||||
}
|
||||
|
||||
.filter-pill.active {
|
||||
color: #ff6a00;
|
||||
border-color: #ff6a00;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-right: 1.8px solid currentColor;
|
||||
border-bottom: 1.8px solid currentColor;
|
||||
transform: rotate(45deg) translateY(-2px);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.chevron.expanded {
|
||||
transform: rotate(225deg) translateY(-2px);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
min-width: 180px;
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 28px rgba(17, 17, 17, 0.08);
|
||||
padding: 6px 0;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.tag-label {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.check-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1.5px solid #ccc;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.check-box.checked {
|
||||
background: #ff6a00;
|
||||
border-color: #ff6a00;
|
||||
}
|
||||
|
||||
.dropdown-enter-active,
|
||||
.dropdown-leave-active {
|
||||
transition: all 0.15s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dropdown-enter-from,
|
||||
.dropdown-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
.tag-filters { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }.filter-controls, .selected-tags { display: flex; align-items: flex-start; gap: 12px; }.filter-group { display: flex; align-items: flex-start; }.dropdown { position: relative; }
|
||||
.filter-button { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border: 1px solid #c7c7c7; border-radius: 60px; background: #fff; color: #000; font-size: 16px; cursor: pointer; }.filter-button i { color: #777; font-size: 11px; transition: transform .2s; }.filter-button.open i { transform: rotate(180deg); }
|
||||
.menu { position: absolute; z-index: 40; top: 50px; left: -2px; width: 141px; padding: 6px; border-radius: 6px; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.25); }
|
||||
.menu button { display: flex; align-items: center; justify-content: space-between; width: 129px; height: 36px; padding: 6px; border: 0; background: #fff; color: #000; text-align: left; font-size: 16px; cursor: pointer; }.menu button:hover { background: #fafafa; }
|
||||
.checkbox { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid #c7c7c7; border-radius: 4px; color: #fff; font-size: 11px; }.menu button.selected .checkbox { border-color: #ff6800; background: #ff6800; }
|
||||
.selected-tag { display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 16px; border-radius: 60px; background: #f2f2f2; color: #000; font-size: 16px; line-height: normal; white-space: nowrap; }.selected-tag-remove { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; background: transparent; color: #000; font-size: 16px; cursor: pointer; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user