From ea2d0f75f19a4bef8cdf2880d7aafb6782ddd82e Mon Sep 17 00:00:00 2001
From: yuxuanhui <ud.k2007@gmail.com>
Date: Tue, 1 Sep 2026 22:40:24 +0800
Subject: [PATCH] refactor(web): adjust layout and styling for improved
 responsiveness and visual consistency

---
 zhixing-web/src/app/layout/app-layout.tsx     |  4 +--
 .../selection/components/pattern-score.tsx    |  7 ++--
 .../selection-results-workbench.tsx           |  2 +-
 .../components/signal-record-list.tsx         | 36 +++++++++----------
 .../pages/selection-results-page.test.tsx     |  1 -
 5 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/zhixing-web/src/app/layout/app-layout.tsx b/zhixing-web/src/app/layout/app-layout.tsx
index d81b6c8..283b20f 100644
--- a/zhixing-web/src/app/layout/app-layout.tsx
+++ b/zhixing-web/src/app/layout/app-layout.tsx
@@ -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 />
 
diff --git a/zhixing-web/src/features/selection/components/pattern-score.tsx b/zhixing-web/src/features/selection/components/pattern-score.tsx
index e2fec77..b0b5428 100644
--- a/zhixing-web/src/features/selection/components/pattern-score.tsx
+++ b/zhixing-web/src/features/selection/components/pattern-score.tsx
@@ -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}
diff --git a/zhixing-web/src/features/selection/components/selection-results-workbench.tsx b/zhixing-web/src/features/selection/components/selection-results-workbench.tsx
index b53d82f..9bb998b 100644
--- a/zhixing-web/src/features/selection/components/selection-results-workbench.tsx
+++ b/zhixing-web/src/features/selection/components/selection-results-workbench.tsx
@@ -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
diff --git a/zhixing-web/src/features/selection/components/signal-record-list.tsx b/zhixing-web/src/features/selection/components/signal-record-list.tsx
index 996d5c9..241b6f0 100644
--- a/zhixing-web/src/features/selection/components/signal-record-list.tsx
+++ b/zhixing-web/src/features/selection/components/signal-record-list.tsx
@@ -81,36 +81,36 @@ 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">
-                    {stock.signals.map((signal) => (
-                      <Badge
-                        key={signal.category}
-                        className={categoryToneClass(signal.category)}
-                        variant="outline"
-                      >
-                        {getCategoryLabel(signal.category)}
-                      </Badge>
-                    ))}
-                  </span>
+                <span className="flex min-w-0 flex-wrap gap-1">
+                  {stock.signals.map((signal) => (
+                    <Badge
+                      key={signal.category}
+                      className={categoryToneClass(signal.category)}
+                      variant="outline"
+                    >
+                      {getCategoryLabel(signal.category)}
+                    </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)}
diff --git a/zhixing-web/src/features/selection/pages/selection-results-page.test.tsx b/zhixing-web/src/features/selection/pages/selection-results-page.test.tsx
index 473f227..3b2242c 100644
--- a/zhixing-web/src/features/selection/pages/selection-results-page.test.tsx
+++ b/zhixing-web/src/features/selection/pages/selection-results-page.test.tsx
@@ -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: "查看详情" }),