audio/website
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish page QA experience issues

Browse Source
This commit is contained in:
Codex
2026-04-28 01:20:54 +08:00
parent 46a72f815e
commit 8697aa3fbb
2 changed files with 28 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(frontend)/[locale]/reviews/page.tsx
+23 -21
View File
@@ -183,29 +183,31 @@ function ReviewCard({ item, locale }: { item: ProductReview; locale: Locale }) {
const sourceName = truncateSourceName(item.sourceName) const sourceName = truncateSourceName(item.sourceName)
return ( return (
<a <article className="h-full">
href={item.reviewUrl} <a
target="_blank" href={item.reviewUrl}
rel="noopener noreferrer" target="_blank"
className="group flex h-full flex-col overflow-hidden rounded-[8px] bg-white shadow-[0_12px_34px_rgba(15,23,42,0.05)] ring-1 ring-black/7 transition hover:-translate-y-0.5 hover:ring-black/12" rel="noopener noreferrer"
> className="group flex h-full flex-col overflow-hidden rounded-[8px] bg-white shadow-[0_12px_34px_rgba(15,23,42,0.05)] ring-1 ring-black/7 transition hover:-translate-y-0.5 hover:ring-black/12"
<div className="h-[150px] shrink-0 bg-subtle sm:h-[138px] xl:h-[128px]"> >
{imageUrl ? <img src={imageUrl} alt="" className="h-full w-full object-cover" /> : null} <div className="h-[150px] shrink-0 bg-subtle sm:h-[138px] xl:h-[128px]">
</div> {imageUrl ? <img src={imageUrl} alt="" className="h-full w-full object-cover" /> : null}
<div className="flex flex-1 flex-col p-3.5">
<div className="flex flex-wrap items-center gap-2 text-xs uppercase tracking-[0.16em] text-text-muted">
{productLabel ? <span>{productLabel}</span> : null}
</div> </div>
<h2 className="mt-1.5 line-clamp-2 min-h-[2.75rem] text-[15px] font-medium leading-snug tracking-[-0.02em]"> <div className="flex flex-1 flex-col p-3.5">
{item.title} <div className="flex flex-wrap items-center gap-2 text-xs uppercase tracking-[0.16em] text-text-muted">
</h2> {productLabel ? <span>{productLabel}</span> : null}
{copy ? <p className="mt-2 line-clamp-2 text-[13px] leading-5 text-text-secondary">{copy}</p> : null} </div>
<div className="mt-auto flex items-end justify-between gap-3 pt-3 text-[11px] uppercase tracking-[0.14em] text-text-muted"> <h2 className="mt-1.5 line-clamp-2 min-h-[2.75rem] text-[15px] font-medium leading-snug tracking-[-0.02em]">
<span>{item.publishedAt ? formatDate(item.publishedAt, locale) : ''}</span> {item.title}
{sourceName ? <span className="max-w-[20ch] truncate text-right">{sourceName}</span> : null} </h2>
{copy ? <p className="mt-2 line-clamp-2 text-[13px] leading-5 text-text-secondary">{copy}</p> : null}
<div className="mt-auto flex items-end justify-between gap-3 pt-3 text-[11px] uppercase tracking-[0.14em] text-text-muted">
<span>{item.publishedAt ? formatDate(item.publishedAt, locale) : ''}</span>
{sourceName ? <span className="max-w-[20ch] truncate text-right">{sourceName}</span> : null}
</div>
</div> </div>
</div> </a>
</a> </article>
) )
} }
src/app/(frontend)/[locale]/support/faq/faq-browser.tsx
+5 -5
View File
@@ -58,8 +58,8 @@ export function FaqBrowser({
const totalCount = groups.reduce((total, group) => total + group.faqs.length, 0) const totalCount = groups.reduce((total, group) => total + group.faqs.length, 0)
return ( return (
<div className="grid gap-8 lg:grid-cols-[300px,minmax(0,1fr)] lg:items-start"> <div className="grid min-w-0 gap-8 lg:grid-cols-[300px,minmax(0,1fr)] lg:items-start">
<aside className="lg:sticky lg:top-24"> <aside className="min-w-0 lg:sticky lg:top-24">
<div className="border-b border-black/10 pb-5"> <div className="border-b border-black/10 pb-5">
<div className="text-[12px] font-medium uppercase tracking-[0.24em] text-black/42"> <div className="text-[12px] font-medium uppercase tracking-[0.24em] text-black/42">
{locale === 'zh' ? '检索' : 'Find Answers'} {locale === 'zh' ? '检索' : 'Find Answers'}
@@ -122,7 +122,7 @@ export function FaqBrowser({
</div> </div>
</aside> </aside>
<div> <div className="min-w-0">
<div className="mb-5 flex flex-col justify-between gap-3 border-b border-black/10 pb-5 md:flex-row md:items-end"> <div className="mb-5 flex flex-col justify-between gap-3 border-b border-black/10 pb-5 md:flex-row md:items-end">
<div> <div>
<div className="text-[12px] font-medium uppercase tracking-[0.24em] text-black/42"> <div className="text-[12px] font-medium uppercase tracking-[0.24em] text-black/42">
@@ -167,12 +167,12 @@ export function FaqBrowser({
{group.faqs.map((faq, index) => ( {group.faqs.map((faq, index) => (
<details <details
key={faq.id} key={faq.id}
className="group px-5 py-0 transition-colors open:bg-white md:px-7" className="group min-w-0 px-5 py-0 transition-colors open:bg-white md:px-7"
open={index === 0 && !deferredQuery} open={index === 0 && !deferredQuery}
> >
<summary className="cursor-pointer list-none py-5"> <summary className="cursor-pointer list-none py-5">
<div className="flex items-start justify-between gap-6"> <div className="flex items-start justify-between gap-6">
<h4 className="max-w-[760px] text-[18px] font-medium leading-7 tracking-[-0.025em] text-text-primary"> <h4 className="min-w-0 max-w-[760px] break-words text-[18px] font-medium leading-7 tracking-[-0.025em] text-text-primary">
{faq.question} {faq.question}
</h4> </h4>
<span className="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center bg-subtle text-lg leading-none text-text-muted transition group-open:rotate-45 group-open:bg-black group-open:text-white"> <span className="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center bg-subtle text-lg leading-none text-text-muted transition group-open:rotate-45 group-open:bg-black group-open:text-white">