UI/细节调整

src/modules/devtools/DevToolsModule.vue

@@ -4,7 +4,6 @@ import { ArrowLeft, Search } from '@lucide/vue'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
-import { ScrollArea } from '@/components/ui/scroll-area'
 import { Separator } from '@/components/ui/separator'
 import { useSearchStore } from '@/stores/searchStore'
 import { registerAllTools, TOOLS_META } from './tools'
@@ -77,21 +76,46 @@ watch(selectedId, () => {
 </script>
 
 <template>
-  <div class="h-full p-6 overflow-hidden flex flex-col">
+  <!--
+    # 滚动归属：只有主滚动区滚（2026-09-22 由内滚动改为外滚动）
+
+    此前本模块的列表页与详情页各自套一层 `ScrollArea`（`h-full overflow-hidden`
+    的模块根 + 内部滚动），与 monitor / music / clipboard / 设置页的形态不一致 ——
+    那些模块的模块根是 `min-h-full p-*`，整页在 ModuleContainer 的主滚动区里滚。
+    两套滚动归属混用会带来一串副作用：Tab 行/工具条要不要固定、内边距该加在
+    滚动容器根还是内层、卡片阴影被视口裁（`-mx-3 px-3` 就是在补这个）。
+
+    现在统一到外滚动：模块根 `min-h-full p-5`，内容自然增高，滚动交给主滚动区。
+    p-5 属于**滚动内容**（模块根在主滚动区内部），因此卡片阴影四周都有余量，
+    不再需要任何负外边距补偿。
+
+    工具自身需要限高的地方（正则结果、diff 输出等）仍保留各自的 `max-h-*` 内滚动
+    盒子 —— 那是「一块有边界的输出区」，与页面级滚动不是一回事。
+  -->
+  <div class="min-h-full p-5 flex flex-col">
     <!-- 列表视图 -->
     <template v-if="!selectedTool">
-      <div class="flex items-center gap-3 mb-4 shrink-0 flex-wrap">
+      <div class="flex items-center gap-3 mb-4 flex-wrap">
         <div class="relative flex-1 min-w-[180px] max-w-xs">
           <Search class="absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
           <Input v-model="query" placeholder="搜索工具..." class="h-8 pl-8 text-sm" />
         </div>
+        <!--
+          分类筛选：选中态用主题色软底（与 SegmentedNav 及其余模块的筛选 chip 同一
+          口径）。此前写的是 `bg-secondary text-foreground` —— 灰底黑字读起来像
+          「禁用」，也是全项目唯一用实心灰表达选中的地方。
+        -->
         <Button
           v-for="cat in (['all', ...CATEGORY_ORDER] as const)"
           :key="cat"
           size="sm"
           variant="ghost"
           class="h-7 px-2.5 text-xs"
-          :class="category === cat ? 'bg-secondary text-foreground' : 'text-muted-foreground'"
+          :class="
+            category === cat
+              ? 'bg-primary-soft font-medium text-primary-soft-text'
+              : 'text-fg-secondary hover:text-foreground'
+          "
           @click="category = cat as typeof category"
         >
           {{ cat === 'all' ? '全部' : CATEGORY_LABEL[cat as DevTool['category']] }}
@@ -99,12 +123,16 @@ watch(selectedId, () => {
         <span class="text-xs text-muted-foreground ml-auto">{{ (category === 'all' ? allTools : filteredTools).length }} 个工具</span>
       </div>
 
-      <ScrollArea class="flex-1 min-h-0 -mr-3 pr-3">
-        <div v-if="filteredTools.length === 0" class="h-full flex items-center justify-center text-muted-foreground text-sm">
-          没有找到匹配的工具
-        </div>
+      <!-- 空态：flex-1 撑住剩余高度，短页面时也能垂直居中 -->
+      <div
+        v-if="filteredTools.length === 0"
+        class="flex-1 flex items-center justify-center text-muted-foreground text-sm"
+      >
+        没有找到匹配的工具
+      </div>
 
-        <!-- 按分类分组 -->
+      <!-- 按分类分组 -->
+      <div v-else>
         <div v-for="group in groupedTools" :key="group.category" class="mb-5">
           <div class="flex items-center gap-2 mb-2">
             <span class="text-xs font-medium text-muted-foreground">{{ group.label }}</span>
@@ -129,12 +157,12 @@ watch(selectedId, () => {
             </Card>
           </div>
         </div>
-      </ScrollArea>
+      </div>
     </template>
 
     <!-- 工具详情视图 -->
     <template v-else>
-      <div class="flex items-center gap-3 mb-4 shrink-0">
+      <div class="flex items-center gap-3 mb-4">
         <Button size="sm" variant="ghost" class="gap-1 h-8" @click="selectedId = null">
           <ArrowLeft class="size-4" />
           返回
@@ -147,11 +175,7 @@ watch(selectedId, () => {
           <span class="text-xs text-muted-foreground leading-snug">{{ selectedTool.description }}</span>
         </div>
       </div>
-      <ScrollArea class="flex-1 min-h-0 -mr-3 pr-3">
-        <div class="max-w-3xl px-1 pb-6">
-          <component :is="selectedTool.component" />
-        </div>
-      </ScrollArea>
+      <component :is="selectedTool.component" />
     </template>
   </div>
 </template>