Browse Source

fix: 稳定总览看板范围选择器下拉高度

固定三级级联面板高度,各列独立滚动,避免后续列内容撑高前面列。

Co-authored-by: Cursor <cursoragent@cursor.com>
0235699曾露 3 months ago
parent
commit
a27be42630

+ 10 - 10
src/app/shared/components/dashboard-scope-picker/dashboard-scope-picker.component.html

@@ -11,14 +11,14 @@
 
   @if (open()) {
     <div
-      class="absolute left-1/2 -translate-x-1/2 z-50 mt-2 flex rounded-lg border border-surface-200 dark:border-surface-300 bg-white dark:bg-surface-100 shadow-lg overflow-hidden"
+      class="absolute left-1/2 -translate-x-1/2 z-50 mt-2 flex h-80 rounded-lg border border-surface-200 dark:border-surface-300 bg-white dark:bg-surface-100 shadow-lg overflow-hidden"
     >
       <!-- 一级 · 城市 -->
-      <div class="w-40 shrink-0 border-r border-surface-100 dark:border-surface-300">
-        <div class="px-3 py-2 text-xs text-surface-400 border-b border-surface-100 dark:border-surface-300 bg-surface-50">
+      <div class="w-40 shrink-0 flex flex-col h-full min-h-0 border-r border-surface-100 dark:border-surface-300">
+        <div class="shrink-0 px-3 py-2 text-xs text-surface-400 border-b border-surface-100 dark:border-surface-300 bg-surface-50">
           一级 · 城市
         </div>
-        <ul class="max-h-72 overflow-y-auto py-1">
+        <ul class="flex-1 min-h-0 overflow-y-auto py-1">
           <li>
             <button
               type="button"
@@ -38,13 +38,13 @@
       <!-- 二级 · 行政区(悬停全上海后显示) -->
       @if (menuDepth() >= 2) {
         <div
-          class="w-40 shrink-0 border-r border-surface-100 dark:border-surface-300"
+          class="w-40 shrink-0 flex flex-col h-full min-h-0 border-r border-surface-100 dark:border-surface-300"
           (mouseenter)="hoverCity()"
         >
-          <div class="px-3 py-2 text-xs text-surface-400 border-b border-surface-100 dark:border-surface-300 bg-surface-50">
+          <div class="shrink-0 px-3 py-2 text-xs text-surface-400 border-b border-surface-100 dark:border-surface-300 bg-surface-50">
             二级 · 行政区
           </div>
-          <ul class="max-h-72 overflow-y-auto py-1">
+          <ul class="flex-1 min-h-0 overflow-y-auto py-1">
             @for (d of districts; track d) {
               <li>
                 <button
@@ -72,13 +72,13 @@
       <!-- 三级 · 客户群(悬停行政区后显示) -->
       @if (menuDepth() >= 3 && activeDistrict()) {
         <div
-          class="w-52 shrink-0"
+          class="w-52 shrink-0 flex flex-col h-full min-h-0"
           (mouseenter)="hoverDistrict(activeDistrict()!)"
         >
-          <div class="px-3 py-2 text-xs text-surface-400 border-b border-surface-100 dark:border-surface-300 bg-surface-50 truncate">
+          <div class="shrink-0 px-3 py-2 text-xs text-surface-400 border-b border-surface-100 dark:border-surface-300 bg-surface-50 truncate">
             三级 · {{ activeDistrict() }}
           </div>
-          <ul class="max-h-72 overflow-y-auto py-1">
+          <ul class="flex-1 min-h-0 overflow-y-auto py-1">
             @for (g of groupsInActiveDistrict(); track g.roomId) {
               <li>
                 <button