fix(web): 视觉与交互 1:1（页头/侧栏/卡片/详情/动效）

对齐项（8080 vs 8081 实测，误差 ≤1px）：
- 侧栏：资料卡 224、服务面板 144、导航 143，navTop 548 与原版一致
- 分区卡：142/142/327/270 vs 142/142/326/269；标题 16/1.2、更多按钮 24px
- 应用条目：48px 圆形头像 + 10px 小认证标；hover 名字变主色（不再整行变色）
- 封面：hover 上浮 2px（0.2s ease），去掉缩放；CES 封面恢复 16/10
- 搜索框：44 高、无边框 + 卡片阴影
- 服务面板：状态药丸 22、统计 12/18、操作按钮 28、刷新时图标原地旋转
- 详情：返回链接 hover 下划线、跳转按钮 hover 深主色、view-in 淡入动画
- 菜单：hover 主色、子菜单 0.28s grid 高度动画、chevron 6px 旋转
- 回到顶部：right 30、top 50%、滚动后淡入（补内容区滚动监听）
- 主题：卡片阴影恢复 2%/6%（旧版值）

stash-web/src/App.css

@@ -6,6 +6,9 @@
   z-index: 1;
   /* 透明：让固定背景图从下面透出来（Layout 默认有底色） */
   background-color: transparent;
+  /* 旧版阴影是 2% / 6%，比库默认更深，属于主题级覆盖 */
+  --su-shadow-card: 0 6px 16px rgba(27, 26, 49, 0.02);
+  --su-shadow-hover: 0 6px 16px rgba(27, 26, 49, 0.06);
 }
 
 /* 顶部背景图：固定 65vh，底部渐隐到页面底色 */
@@ -87,6 +90,12 @@
   transform: translateX(-50%);
 }
 
+/* 旧版搜索是「无边框 + 卡片阴影」 */
+.search-row > *:first-child {
+  border-color: transparent;
+  box-shadow: var(--su-shadow-card);
+}
+
 /* ---------- 两栏骨架 ---------- */
 
 .content {
@@ -114,14 +123,57 @@
   text-align: center;
 }
 
+.profile-name {
+  line-height: 1.2;
+}
+
+.profile-role {
+  padding: 1px 8px;
+  border: 1px solid var(--su-border);
+  border-radius: var(--su-radius-pill);
+  font-size: var(--su-font-size-xs);
+  line-height: 18px;
+  color: var(--su-text-sub);
+}
+
 .profile-bio {
-  line-height: 1.8;
+  margin-top: 2px;
+  line-height: 1.55;
+}
+
+.profile-location {
+  margin-top: 2px;
+  font-size: var(--su-font-size-xs);
+  line-height: 18px;
+  color: var(--su-text-muted);
+}
+
+/* 旧版头像下面留 4px，和名字之间更松 */
+.profile-card > span:first-child {
+  margin-bottom: 4px;
 }
 
 .service-panel {
   padding: 12px 14px;
 }
 
+/* 旧版标题与统计值的行高比库默认更紧 */
+.service-panel h2 {
+  line-height: 20px;
+}
+
+/* 旧版连接状态药丸：22 高、12px */
+.service-status {
+  height: 22px;
+  padding: 0 10px;
+  font-size: var(--su-font-size-xs);
+}
+
+/* 旧版统计行是 12/18 */
+.service-stats span {
+  line-height: 18px;
+}
+
 .service-stats {
   display: flex;
   flex-direction: column;
@@ -162,6 +214,16 @@
   margin-bottom: var(--su-space-4);
 }
 
+/* 旧版分区标题是 16/1.2，更多按钮是 24px 小方按钮 */
+.section-header h2 {
+  line-height: 1.2;
+}
+
+.section-more {
+  width: 24px;
+  height: 24px;
+}
+
 .section-bar {
   width: 4px;
   height: 16px;
@@ -178,8 +240,8 @@
   border-radius: var(--su-radius-sm);
 }
 
-.app-card:hover {
+.app-card:hover .app-card-name {
-  background-color: var(--su-bg-subtle);
+  color: var(--su-color-primary);
 }
 
 .app-card-info {
@@ -189,10 +251,29 @@
   min-width: 0;
 }
 
+/* 旧版应用头像是 48px 圆形，右下角是 10px 小认证标 */
+.app-card-avatar {
+  width: 48px;
+  height: 48px;
+  font-size: 18px;
+}
+
+.app-card-avatar > span + span {
+  width: 10px;
+  height: 10px;
+  border-width: 1px;
+  font-size: 6px;
+}
+
 /* ---------- 图文白卡 ---------- */
 
 .ces-card {
   overflow: hidden;
+  transition: transform var(--su-duration-fast) var(--su-ease-in-out);
+}
+
+.ces-card:hover {
+  transform: translateY(-2px);
 }
 
 .ces-body {
@@ -227,10 +308,6 @@
   padding: 12px var(--su-space-5);
 }
 
-.detail-nav > * {
-  width: 100%;
-}
-
 .detail-back {
   color: var(--su-color-primary);
   font-size: var(--su-font-size-md);
@@ -239,7 +316,11 @@
 }
 
 .detail-back:hover {
-  opacity: 0.8;
+  text-decoration: underline;
+}
+
+.detail-nav > * {
+  width: 100%;
 }
 
 .detail-hero {
@@ -363,7 +444,7 @@
 }
 
 .item-jump:hover:not(:disabled) {
-  opacity: 0.8;
+  background-color: var(--su-color-primary-hover);
 }
 
 .item-jump:disabled {
@@ -454,6 +535,56 @@
 
 /* ---------- 通用 ---------- */
 
+/* 服务面板的两个操作按钮：旧版是 12px / 28 高 / 等分 / 描边 */
+.service-action {
+  flex: 1;
+  height: 28px;
+  padding: 0 var(--su-space-2);
+  font-size: var(--su-font-size-xs);
+  border-radius: var(--su-radius-cover);
+}
+
+.service-action:hover:not(:disabled) {
+  border-color: var(--su-color-primary);
+  background-color: var(--su-color-primary-soft);
+  color: var(--su-color-primary);
+}
+
+/* 页头图标按钮：旧版 hover 是浅灰底 + 深色字 */
+.site-header-inner button:hover {
+  background-color: var(--su-bg-light);
+  color: var(--su-text-main);
+}
+
+/* 分区卡右上角 •••：旧版 hover 只有浅灰底 */
+.section-more:hover {
+  background-color: var(--su-bg-light);
+  color: var(--su-text-sub);
+}
+
+/* 详情 / 文章切换时的淡入上浮（旧版 view-in） */
+@keyframes view-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.detail-view {
+  animation: view-in 0.22s ease both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .detail-view {
+    animation: none;
+  }
+}
+
 .link-button {
   display: inline-flex;
   align-items: center;

stash-web/src/App.tsx

@@ -103,20 +103,32 @@ export default function App() {
     return []
   }, [itemView, itemCategory])
 
-  // 切换视图时回到顶部（页面整体滚动）
+  // 切换视图时把内容区（内部滚动）和窗口都回到顶部
   useEffect(() => {
+    const scroller = document.getElementById('content-scroll')
+    scroller?.scrollTo({ top: 0 })
     window.scrollTo({ top: 0 })
   }, [view])
 
+  /**
+   * 滚动状态同时驱动「顶部渐隐」和「回到顶部」。
+   * 桌面端滚的是内容容器（scroll 事件不冒泡），所以用捕获阶段监听。
+   */
   useEffect(() => {
     const sync = () => {
-      const next = window.scrollY > 4
+      const inner = document.getElementById('content-scroll')?.scrollTop ?? 0
+      const next = Math.max(inner, window.scrollY) > 4
       setScrolled((current) => (current === next ? current : next))
     }
 
     sync()
     window.addEventListener('scroll', sync, { passive: true })
-    return () => window.removeEventListener('scroll', sync)
+    document.addEventListener('scroll', sync, { passive: true, capture: true })
+
+    return () => {
+      window.removeEventListener('scroll', sync)
+      document.removeEventListener('scroll', sync, { capture: true })
+    }
   }, [])
 
   /**

stash-web/src/components/common/BackToTop.tsx

@@ -9,5 +9,5 @@ type BackToTopProps = {
 }
 
 export function BackToTop({ visible }: BackToTopProps) {
-  return <ScrollTop visible={visible} targetId="content-scroll" />
+  return <ScrollTop visible={visible} targetId="content-scroll" offset={30} />
 }

stash-web/src/components/content/AppCard.tsx

@@ -24,8 +24,9 @@ export function AppCard({ item, onOpen }: AppCardProps) {
       }}
     >
       <Avatar
-        size="md"
+        size="lg"
-        shape="square"
+        tone="primary"
+        className="app-card-avatar"
         src={item.cover}
         fallback={item.icon}
         verified={item.hot === true}

stash-web/src/components/content/CesCard.tsx

@@ -27,9 +27,8 @@ export function CesCard({ item, onOpen }: CesCardProps) {
       <Cover
         src={item.cover}
         alt={item.title}
-        ratio="article"
+        ratio={16 / 10}
         radius="none"
-        hoverZoom
         onClick={onOpen === undefined ? undefined : () => onOpen(item.id)}
       />
       {onOpen === undefined ? (

stash-web/src/components/content/SectionCard.tsx

@@ -21,7 +21,7 @@ export function SectionCard({ title, count, barColor, onMore, children }: Sectio
       <div className="section-header">
         <Space gap="sm">
           <span className="section-bar" style={{ backgroundColor: barColor }} aria-hidden="true" />
-          <Title level={3} as="h2">
+          <Title level={3} as="h2" weight="semibold">
             {title}
           </Title>
           <Badge count={count} tone="danger" />
@@ -30,6 +30,7 @@ export function SectionCard({ title, count, barColor, onMore, children }: Sectio
         {onMore !== undefined && (
           <IconButton
             size="xs"
+            className="section-more"
             label={`查看${title}全部`}
             icon={<Icon name="more_1_line" />}
             onClick={onMore}

stash-web/src/components/search/SearchBar.tsx

@@ -29,6 +29,7 @@ export function SearchBar({ value, onChange, inputRef }: SearchBarProps) {
     <div className="search-row">
       <Input
         inputRef={inputRef}
+        size="lg"
         icon="search_3_line"
         value={value}
         placeholder="搜索本地项目…"

stash-web/src/components/sidebar/ProfileCard.tsx

@@ -9,18 +9,20 @@ export function ProfileCard() {
   const { name, role, bio, location } = PLACEHOLDER_PROFILE
 
   return (
-    <Card padding="lg" className="profile-card">
+    <Card padding="none" className="profile-card">
       <Avatar size="xl" tone="primary" icon={<Icon name="user_3_line" />} verified />
-      <Title level={3}>{name}</Title>
+
-      <Text size="xs" tone="muted">
+      <Title level={4} weight="semibold" className="profile-name">
-        {role}
+        {name}
-      </Text>
+      </Title>
+
+      <span className="profile-role">{role}</span>
+
       <Text size="xs" tone="sub" className="profile-bio">
         {bio}
       </Text>
-      <Text size="xs" tone="muted">
+
-        IP 属地：{location}
+      <span className="profile-location">IP属地：{location}</span>
-      </Text>
     </Card>
   )
 }

stash-web/src/components/sidebar/ServicePanel.tsx

@@ -18,26 +18,26 @@ export function ServicePanel({ projects, live, refreshing, onRefresh }: ServiceP
   return (
     <Card padding="none" className="service-panel">
       <Space justify="between">
-        <Title level={4} as="h2">
+        <Title level={4} as="h2" weight="semibold">
           本地服务
         </Title>
-        <Tag tone={live ? 'success' : 'neutral'} dot>
+        <Tag tone={live ? 'success' : 'neutral'} dot className="service-status">
           {live ? '已连接' : '未连接'}
         </Tag>
       </Space>
 
       <div className="service-stats">
         <Space justify="between">
-          <Text size="sm" tone="sub">
+          <Text size="xs" tone="sub">
             项目数
           </Text>
-          <Text strong>{projects.length}</Text>
+          <Text size="xs" strong>{projects.length}</Text>
         </Space>
         <Space justify="between">
-          <Text size="sm" tone="sub">
+          <Text size="xs" tone="sub">
             访问地址
           </Text>
-          <Text size="sm" truncate title={host} className="service-host">
+          <Text size="xs" truncate title={host} className="service-host">
             {host}
           </Text>
         </Space>
@@ -47,7 +47,8 @@ export function ServicePanel({ projects, live, refreshing, onRefresh }: ServiceP
         <Button
           size="sm"
           variant="secondary"
-          loading={refreshing}
+          className="service-action"
+          spinning={refreshing}
           icon={<Icon name="refresh_3_line" />}
           onClick={onRefresh}
           title="重新扫描项目"