优化滚动条

src/App.vue

@@ -7,15 +7,14 @@
       @cancel="handleLoginCancel"
     />
 
-    <header v-if="!showLoginModal" class="header">
+    <header
+      v-if="!showLoginModal"
+      class="header"
+    >
       <h1 class="title">
         {{ systemTitle }}
-        <span class="title-meta"
-          >库位
-          <span class="title-meta-value"
-            >{{ availableLocationsCount }}/{{ locations.length }}</span
-          ></span
-        >
+        <span class="title-meta">库位
+          <span class="title-meta-value">{{ availableLocationsCount }}/{{ locations.length }}</span></span>
         <span class="title-fill-rate">
           <span
             class="title-meta title-fill-rate-item"
@@ -79,7 +78,11 @@
             :class="['level-select', { 'level-select-placeholder': !selectedCategory }]"
           >
             <option value="">库位类型</option>
-            <option v-for="category in categoryOptions" :key="category" :value="category">
+            <option
+              v-for="category in categoryOptions"
+              :key="category"
+              :value="category"
+            >
               {{ category }}
             </option>
           </select>
@@ -117,22 +120,34 @@
               type="text"
               placeholder="库位组"
               @keydown.enter="applyLocGroupFilter"
-            />
+            >
             <button
               v-if="locGroupKeywordInput"
               class="filter-clear-btn"
               type="button"
               @click="clearLocGroupFilter"
             >
-              <svg viewBox="0 0 16 16" aria-hidden="true" class="filter-action-icon">
+              <svg
+                viewBox="0 0 16 16"
+                aria-hidden="true"
+                class="filter-action-icon"
+              >
                 <path
                   d="M4.22 4.22a.75.75 0 0 1 1.06 0L8 6.94l2.72-2.72a.75.75 0 1 1 1.06 1.06L9.06 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L8 9.06l-2.72 2.72a.75.75 0 1 1-1.06-1.06L6.94 8 4.22 5.28a.75.75 0 0 1 0-1.06z"
                   fill="currentColor"
                 />
               </svg>
             </button>
-            <button class="filter-confirm-btn" type="button" @click="applyLocGroupFilter">
-              <svg viewBox="0 0 16 16" aria-hidden="true" class="filter-action-icon">
+            <button
+              class="filter-confirm-btn"
+              type="button"
+              @click="applyLocGroupFilter"
+            >
+              <svg
+                viewBox="0 0 16 16"
+                aria-hidden="true"
+                class="filter-action-icon"
+              >
                 <path
                   d="M6.5 2.5a4 4 0 1 0 2.47 7.15l2.69 2.68 1.06-1.06-2.68-2.69A4 4 0 0 0 6.5 2.5zm0 1.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z"
                   fill="currentColor"
@@ -149,22 +164,34 @@
               type="text"
               placeholder="库位号"
               @keydown.enter="applyLocationIdFilter"
-            />
+            >
             <button
               v-if="locationIdKeywordInput"
               class="filter-clear-btn"
               type="button"
               @click="clearLocationIdFilter"
             >
-              <svg viewBox="0 0 16 16" aria-hidden="true" class="filter-action-icon">
+              <svg
+                viewBox="0 0 16 16"
+                aria-hidden="true"
+                class="filter-action-icon"
+              >
                 <path
                   d="M4.22 4.22a.75.75 0 0 1 1.06 0L8 6.94l2.72-2.72a.75.75 0 1 1 1.06 1.06L9.06 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L8 9.06l-2.72 2.72a.75.75 0 1 1-1.06-1.06L6.94 8 4.22 5.28a.75.75 0 0 1 0-1.06z"
                   fill="currentColor"
                 />
               </svg>
             </button>
-            <button class="filter-confirm-btn" type="button" @click="applyLocationIdFilter">
-              <svg viewBox="0 0 16 16" aria-hidden="true" class="filter-action-icon">
+            <button
+              class="filter-confirm-btn"
+              type="button"
+              @click="applyLocationIdFilter"
+            >
+              <svg
+                viewBox="0 0 16 16"
+                aria-hidden="true"
+                class="filter-action-icon"
+              >
                 <path
                   d="M6.5 2.5a4 4 0 1 0 2.47 7.15l2.69 2.68 1.06-1.06-2.68-2.69A4 4 0 0 0 6.5 2.5zm0 1.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z"
                   fill="currentColor"
@@ -179,7 +206,11 @@
             :class="['level-select', { 'level-select-placeholder': !selectedZoneId }]"
           >
             <option value="">库区</option>
-            <option v-for="zoneId in zoneOptions" :key="zoneId" :value="zoneId">
+            <option
+              v-for="zoneId in zoneOptions"
+              :key="zoneId"
+              :value="zoneId"
+            >
               {{ zoneId }}
             </option>
           </select>
@@ -189,9 +220,18 @@
           class="level-select level-select-floor"
           @change="handleLevelChange"
         >
-          <option v-for="level in levelRange" :key="level" :value="level">{{ level }}层</option>
+          <option
+            v-for="level in levelRange"
+            :key="level"
+            :value="level"
+          >
+            {{ level }}层
+          </option>
         </select>
-        <div ref="refreshControlRef" class="refresh-control">
+        <div
+          ref="refreshControlRef"
+          class="refresh-control"
+        >
           <button
             class="refresh-btn"
             :disabled="loading || refreshing"
@@ -200,7 +240,11 @@
           >
             {{ refreshCountdownText }}
           </button>
-          <div v-if="showRefreshPopover" class="refresh-popover" @click.stop>
+          <div
+            v-if="showRefreshPopover"
+            class="refresh-popover"
+            @click.stop
+          >
             <input
               ref="refreshIntervalInputRef"
               v-model="refreshIntervalInput"
@@ -208,9 +252,17 @@
               type="text"
               inputmode="numeric"
               @keydown.enter="applyRefreshInterval"
-            />
-            <button class="refresh-popover-confirm" type="button" @click="applyRefreshInterval">
-              <svg viewBox="0 0 16 16" aria-hidden="true" class="filter-action-icon">
+            >
+            <button
+              class="refresh-popover-confirm"
+              type="button"
+              @click="applyRefreshInterval"
+            >
+              <svg
+                viewBox="0 0 16 16"
+                aria-hidden="true"
+                class="filter-action-icon"
+              >
                 <path
                   d="M6.46 11.03 3.43 8a.75.75 0 1 1 1.06-1.06l1.97 1.96 5.05-5.04A.75.75 0 0 1 12.57 4.9l-5.58 5.59a.75.75 0 0 1-1.06 0z"
                   fill="currentColor"
@@ -227,27 +279,40 @@
               class="toggle-input"
               type="checkbox"
               @change="handleGroupBorderToggle"
-            />
+            >
             <span class="toggle-track">
               <span class="toggle-thumb" />
             </span>
           </label>
           <label class="toggle-item">
             <span class="toggle-hint">卡片</span>
-            <input v-model="showTooltip" class="toggle-input" type="checkbox" />
+            <input
+              v-model="showTooltip"
+              class="toggle-input"
+              type="checkbox"
+            >
             <span class="toggle-track">
               <span class="toggle-thumb" />
             </span>
           </label>
           <label class="toggle-item theme-toggle">
             <span class="toggle-hint">主题</span>
-            <input v-model="isLightTheme" class="toggle-input" type="checkbox" />
+            <input
+              v-model="isLightTheme"
+              class="toggle-input"
+              type="checkbox"
+            >
             <span class="toggle-track">
               <span class="toggle-thumb" />
             </span>
           </label>
         </div>
-        <button class="logout-btn" @click="handleLogout">退出</button>
+        <button
+          class="logout-btn"
+          @click="handleLogout"
+        >
+          退出
+        </button>
       </div>
     </header>
 
@@ -261,13 +326,27 @@
       </div>
     </div>
 
-    <main v-if="!showLoginModal" class="main-content">
-      <div v-if="loading" class="loading">加载中...</div>
-      <div v-else-if="error" class="error">
+    <main
+      v-if="!showLoginModal"
+      class="main-content"
+    >
+      <div
+        v-if="loading"
+        class="loading"
+      >
+        加载中...
+      </div>
+      <div
+        v-else-if="error"
+        class="error"
+      >
         {{ error }}
       </div>
-      <div v-else class="map-container">
-    <WorkingHighlight>
+      <div
+        v-else
+        class="map-container"
+      >
+        <WorkingHighlight>
           <WarehouseMap
             :locations="locations"
             :current-level="currentLevel"

src/components/LoginModal.vue

@@ -1,18 +1,33 @@
 <template>
-  <div v-if="visible" class="modal-overlay" @click.self="handleCancel">
+  <div
+    v-if="visible"
+    class="modal-overlay"
+    @click.self="handleCancel"
+  >
     <div class="modal-content">
       <div class="modal-header">
         <h2>登录</h2>
       </div>
       <div class="modal-body">
-        <div v-if="error" class="error-message">
+        <div
+          v-if="error"
+          class="error-message"
+        >
           {{ error }}
         </div>
         <form @submit.prevent="handleSubmit">
           <div class="form-group">
             <label for="environment">环境</label>
-            <select id="environment" v-model="selectedEnvironment" class="form-select">
-              <option v-for="option in environmentOptions" :key="option.key" :value="option.key">
+            <select
+              id="environment"
+              v-model="selectedEnvironment"
+              class="form-select"
+            >
+              <option
+                v-for="option in environmentOptions"
+                :key="option.key"
+                :value="option.key"
+              >
                 {{ option.label }}
               </option>
             </select>
@@ -26,7 +41,7 @@
               placeholder="请输入账号"
               required
               autocomplete="username"
-            />
+            >
           </div>
           <div class="form-group">
             <label for="password">密码</label>
@@ -38,7 +53,7 @@
                 placeholder="请输入密码"
                 required
                 autocomplete="current-password"
-              />
+              >
               <button
                 type="button"
                 class="password-toggle"
@@ -58,7 +73,11 @@
                   stroke-linejoin="round"
                 >
                   <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-                  <circle cx="12" cy="12" r="3" />
+                  <circle
+                    cx="12"
+                    cy="12"
+                    r="3"
+                  />
                 </svg>
                 <svg
                   v-else
@@ -75,13 +94,22 @@
                   <path
                     d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
                   />
-                  <line x1="1" y1="1" x2="23" y2="23" />
+                  <line
+                    x1="1"
+                    y1="1"
+                    x2="23"
+                    y2="23"
+                  />
                 </svg>
               </button>
             </div>
           </div>
           <div class="form-actions">
-            <button type="submit" class="btn-primary" :disabled="loading">
+            <button
+              type="submit"
+              class="btn-primary"
+              :disabled="loading"
+            >
               {{ loading ? '登录中...' : '登录' }}
             </button>
           </div>

src/components/WarehouseMap.vue

@@ -1,8 +1,20 @@
 <template>
   <div :class="['warehouse-map', themeClass]">
-    <div v-if="gridData.length === 0" class="no-data">暂无数据</div>
-    <div v-else ref="mapWrapperRef" class="map-wrapper">
-      <div class="map-grid" :style="gridStyle">
+    <div
+      v-if="gridData.length === 0"
+      class="no-data"
+    >
+      暂无数据
+    </div>
+    <div
+      v-else
+      ref="mapWrapperRef"
+      class="map-wrapper"
+    >
+      <div
+        class="map-grid"
+        :style="gridStyle"
+      >
         <div
           v-for="(cell, index) in gridData"
           :key="index"
@@ -15,8 +27,14 @@
           @click="handleCellClick(cell)"
           @contextmenu.prevent="handleCellContextMenu(cell)"
         >
-          <div v-if="isLocationCell(cell) && isCellVisible(cell)" class="cell-content">
-            <div class="category-badge" :style="getCategoryStyle(cell)">
+          <div
+            v-if="isLocationCell(cell) && isCellVisible(cell)"
+            class="cell-content"
+          >
+            <div
+              class="category-badge"
+              :style="getCategoryStyle(cell)"
+            >
               {{ getHeatLabel(cell) }}
             </div>
             <div class="loc-group">
@@ -34,11 +52,22 @@
             >
               {{ cell.locationId }}
             </div>
-            <div v-if="cell.categoryMismatch" class="location-attribute-tag">热度编号异常</div>
-            <div v-if="hasAbnormalLocationAttribute(cell)" class="location-attribute-tag">
+            <div
+              v-if="cell.categoryMismatch"
+              class="location-attribute-tag"
+            >
+              热度编号异常
+            </div>
+            <div
+              v-if="hasAbnormalLocationAttribute(cell)"
+              class="location-attribute-tag"
+            >
               {{ getLocationAttributeLabel(cell) }}
             </div>
-            <div v-if="cell.containerCode" class="container-code">
+            <div
+              v-if="cell.containerCode"
+              class="container-code"
+            >
               {{ cell.containerCode }}
             </div>
           </div>
@@ -55,7 +84,11 @@
         class="cell-tooltip"
         :style="tooltipStyle"
       >
-        <div v-for="(line, index) in tooltipLines" :key="index" class="cell-tooltip-line">
+        <div
+          v-for="(line, index) in tooltipLines"
+          :key="index"
+          class="cell-tooltip-line"
+        >
           {{ line }}
         </div>
       </div>
@@ -354,36 +387,59 @@ const gridStyle = computed(() => {
   if (!gridMetrics.value) return {}
 
   const gap = 2
-  const horizontalPadding = 24
-  const verticalPadding = 12
+  const horizontalPadding = 12
+  const verticalPadding = 8
   const availableWidth = Math.max(wrapperSize.value.width - horizontalPadding, 0)
   const availableHeight = Math.max(wrapperSize.value.height - verticalPadding, 0)
 
-  const cellWidth =
+  const minX = gridBounds.value?.minX ?? 0
+  const minY = gridBounds.value?.minY ?? 0
+  const rowHasLocation = Array.from({ length: gridMetrics.value.rows }, () => false)
+  const colHasLocation = Array.from({ length: gridMetrics.value.cols }, () => false)
+  const isLocation = (cell: MapCell) => !('type' in cell)
+  for (const cell of gridData.value) {
+    if (!isLocation(cell)) continue
+    const rowIndex = cell.gridRow - minX
+    const colIndex = cell.gridCol - minY
+    if (rowIndex >= 0 && rowIndex < rowHasLocation.length) rowHasLocation[rowIndex] = true
+    if (colIndex >= 0 && colIndex < colHasLocation.length) colHasLocation[colIndex] = true
+  }
+
+  const compressedScale = 2 / 3
+  const rowScales = rowHasLocation.map((hasLocation) => (hasLocation ? 1 : compressedScale))
+  const colScales = colHasLocation.map((hasLocation) => (hasLocation ? 1 : compressedScale))
+  const rowScaleSum = rowScales.reduce((total, scale) => total + scale, 0)
+  const colScaleSum = colScales.reduce((total, scale) => total + scale, 0)
+
+  const baseCellWidth =
     availableWidth > 0
-      ? Math.max((availableWidth - (gridMetrics.value.cols - 1) * gap) / gridMetrics.value.cols, 28)
+      ? Math.max((availableWidth - (gridMetrics.value.cols - 1) * gap) / colScaleSum, 28)
       : 72
-  const cellHeight =
+  const baseCellHeight =
     availableHeight > 0
-      ? Math.max(
-          (availableHeight - (gridMetrics.value.rows - 1) * gap) / gridMetrics.value.rows,
-          24
-        )
+      ? Math.max((availableHeight - (gridMetrics.value.rows - 1) * gap) / rowScaleSum, 24)
       : 60
-  const compactSize = Math.min(cellWidth, cellHeight)
+  const compactSize = Math.min(baseCellWidth, baseCellHeight)
 
   const showBadge = compactSize > 38 ? 'inline-flex' : 'none'
   const showGroup = compactSize > 58 ? 'block' : 'none'
-  const badgeFontSize = compactSize <= 42 ? 7 : compactSize <= 56 ? 8 : 9
-  const textFontSize = compactSize <= 56 ? 8 : 9
-  const idFontSize = compactSize <= 34 ? 8 : compactSize <= 42 ? 9 : compactSize <= 56 ? 9 : 10
+  const badgeFontSize = Math.max(compactSize <= 42 ? 7 : compactSize <= 56 ? 8 : 9, 8)
+  const textFontSize = Math.max(compactSize <= 56 ? 8 : 9, 8)
+  const idFontSize = Math.max(
+    compactSize <= 34 ? 8 : compactSize <= 42 ? 9 : compactSize <= 56 ? 9 : 10,
+    9
+  )
   const contentGap = compactSize <= 42 ? 1 : 3
-  const contentPadding = compactSize <= 42 ? 1 : 3
+  const contentPadding = Math.max(compactSize <= 42 ? 1 : 3, 1)
   const groupBorderWidth = compactSize <= 34 ? 1 : 2
 
   return {
-    gridTemplateColumns: `repeat(${gridMetrics.value.cols}, ${cellWidth.toFixed(2)}px)`,
-    gridAutoRows: `${cellHeight.toFixed(2)}px`,
+    gridTemplateColumns: colScales
+      .map((scale) => `${(baseCellWidth * scale).toFixed(2)}px`)
+      .join(' '),
+    gridTemplateRows: rowScales
+      .map((scale) => `${(baseCellHeight * scale).toFixed(2)}px`)
+      .join(' '),
     '--cell-badge-font-size': `${badgeFontSize}px`,
     '--cell-group-font-size': `${textFontSize}px`,
     '--cell-id-font-size': `${idFontSize}px`,
@@ -893,7 +949,7 @@ onBeforeUnmount(() => {
 .map-grid {
   display: grid;
   gap: 2px;
-  padding: 0 12px 12px;
+  padding: 0 6px 8px;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
@@ -1096,6 +1152,7 @@ onBeforeUnmount(() => {
   color: var(--special-label);
   letter-spacing: 1px;
   user-select: none;
+  padding: 1px;
 }
 
 .special-cell-label-elevator {