refactor(web): adjust layout and styling for improved responsiveness and visual consistency #25

Merged
sakibcc merged 1 commits from develop into main 2026-09-01 22:42:12 +08:00
5 changed files with 23 additions and 27 deletions
Showing only changes of commit ea2d0f75f1 - Show all commits
+2 -2
View File
@@ -37,7 +37,7 @@ export function AppLayout() {
const [moreOpen, setMoreOpen] = useState(false)
return (
<div className="flex h-svh min-h-0 flex-col overflow-hidden bg-background text-foreground md:grid md:grid-cols-[64px_minmax(0,1fr)] lg:grid-cols-[232px_minmax(0,1fr)]">
<div className="flex h-svh min-h-0 flex-col overflow-hidden bg-background text-foreground md:grid md:grid-cols-[64px_minmax(0,1fr)] lg:grid-cols-[192px_minmax(0,1fr)]">
<DesktopSidebar activePath={activePath} />
<div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
<TopBar
@@ -64,7 +64,7 @@ function DesktopSidebar({ activePath }: { activePath: string }) {
return (
<aside
aria-label="主导航"
className="hidden shrink-0 flex-col border-r border-border bg-card/95 px-2 py-4 md:flex md:w-16 lg:w-[232px] lg:px-3.5"
className="hidden shrink-0 flex-col border-r border-border bg-card/95 px-2 py-4 md:flex md:w-16 lg:w-48 lg:px-3"
>
<Brand />
@@ -19,13 +19,10 @@ export function PatternScoreSummary({ score }: PatternScoreProps) {
return <Badge variant="destructive">评分暂不可用</Badge>
}
return (
<span className="space-y-0.5">
<strong className="block tabular-nums text-primary">
<span className="inline-flex min-w-0 items-center gap-1">
<strong className="tabular-nums text-primary">
{formatScore(score.value)} 分
</strong>
<span className="block text-[10px] text-muted-foreground">
{score.case?.name ?? "最佳案例未知"}
</span>
{score.status === "below_threshold" ? (
<Badge variant="outline">低于阈值</Badge>
) : null}
@@ -105,7 +105,7 @@ export function SelectionResultsWorkbench({
}
return (
<div className="flex min-h-0 min-w-0 flex-1 flex-col gap-2 overflow-hidden md:grid md:grid-cols-[minmax(0,1fr)_minmax(0,3fr)]">
<div className="flex min-h-0 min-w-0 flex-1 flex-col gap-2 overflow-hidden md:grid md:grid-cols-[320px_minmax(0,1fr)]">
<section className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-md border border-border/80 bg-card">
<div className="flex shrink-0 flex-wrap items-center gap-1.5 border-b border-border/60 p-2.5">
<Input
@@ -81,24 +81,23 @@ export function SignalRecordList({
data-selected={selected}
>
<button
className="min-h-11 w-full text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
className="flex min-h-11 w-full flex-col gap-1 text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
onClick={() => onSelect(stock)}
onKeyDown={(event) => handleSelectKeyDown(event, stock)}
type="button"
>
<span className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
<span className="font-medium text-foreground">
<span className="flex min-w-0 items-baseline gap-x-2">
<span className="min-w-0 truncate font-medium text-foreground">
{stock.name}
</span>
<span className="font-mono text-[10px] text-muted-foreground">
<span className="shrink-0 font-mono text-[10px] text-muted-foreground">
{stock.ts_code}
</span>
<span className="ml-auto font-medium tabular-nums text-foreground">
<span className="ml-auto shrink-0 font-medium tabular-nums text-foreground">
¥ {stock.close.toFixed(2)}
</span>
</span>
<span className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">
<span className="flex flex-wrap gap-1">
<span className="flex min-w-0 flex-wrap gap-1">
{stock.signals.map((signal) => (
<Badge
key={signal.category}
@@ -109,8 +108,9 @@ export function SignalRecordList({
</Badge>
))}
</span>
<span className="flex items-center gap-x-2 text-xs">
<PatternScoreSummary score={stock.score} />
<span className="tabular-nums text-muted-foreground">
<span className="ml-auto shrink-0 tabular-nums text-muted-foreground">
J&nbsp;
<strong className="font-semibold text-foreground">
{getStockJValue(stock)}
@@ -182,7 +182,6 @@ describe("SelectionResultsPage", () => {
expect(within(record).getByText("12")).toBeInTheDocument()
expect(within(record).queryByText("13")).not.toBeInTheDocument()
expect(within(record).getByText("¥ 10.50")).toBeInTheDocument()
expect(within(record).getByText("华纳药厂")).toBeInTheDocument()
expect(screen.getByRole("button", { name: /平安银行/ })).toBeInTheDocument()
expect(
screen.queryByRole("button", { name: "查看详情" }),