优化

src/App.vue

@@ -72,6 +72,50 @@
         </span>
       </h1>
       <div class="controls">
+        <label class="filter-item filter-input-item">
+          <span class="filter-input-wrap">
+            <input
+              v-model="locationKeywordInput"
+              class="filter-input"
+              type="text"
+              placeholder="库位号/组"
+              @keydown.enter="applyLocationKeywordFilter"
+            >
+            <button
+              v-if="locationKeywordInput"
+              class="filter-clear-btn"
+              type="button"
+              @click="clearLocationKeywordFilter"
+            >
+              <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="applyLocationKeywordFilter"
+            >
+              <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"
+                />
+              </svg>
+            </button>
+          </span>
+        </label>
         <label class="filter-item">
           <select
             v-model="selectedCategory"
@@ -118,50 +162,6 @@
             <option value="N">无</option>
           </select>
         </label>
-        <label class="filter-item filter-input-item">
-          <span class="filter-input-wrap">
-            <input
-              v-model="locationIdKeywordInput"
-              class="filter-input"
-              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"
-              >
-                <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"
-              >
-                <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"
-                />
-              </svg>
-            </button>
-          </span>
-        </label>
         <label class="filter-item">
           <select
             v-model="selectedZoneId"
@@ -179,50 +179,6 @@
             </option>
           </select>
         </label>
-        <label class="filter-item filter-input-item">
-          <span class="filter-input-wrap">
-            <input
-              v-model="locGroupKeywordInput"
-              class="filter-input"
-              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"
-              >
-                <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"
-              >
-                <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"
-                />
-              </svg>
-            </button>
-          </span>
-        </label>
         <select
           v-model.number="currentLevel"
           class="level-select level-select-floor"
@@ -486,9 +442,8 @@ const categoryColorVisibility = ref<Record<'A' | 'B' | 'C', boolean>>({
   B: true,
   C: true
 })
-const locGroupKeywordInput = ref('')
+const locationKeywordInput = ref('')
 const appliedLocGroupKeyword = ref('')
-const locationIdKeywordInput = ref('')
 const appliedLocationIdKeyword = ref('')
 const showGroupBorder = ref(false)
 const showTooltip = ref(true)
@@ -736,23 +691,29 @@ const copyText = async (text: string) => {
   document.body.removeChild(textarea)
 }
 
-const applyLocGroupFilter = () => {
-  appliedLocGroupKeyword.value = locGroupKeywordInput.value.trim()
-  triggerWorkingHighlightRefresh()
-}
+const countHyphen = (text: string) => text.split('-').length - 1
+
+const applyLocationKeywordFilter = () => {
+  const keyword = locationKeywordInput.value.trim()
+  const hyphenCount = countHyphen(keyword)
+
+  if (hyphenCount === 3) {
+    appliedLocationIdKeyword.value = keyword
+    appliedLocGroupKeyword.value = ''
+  } else if (hyphenCount === 2) {
+    appliedLocGroupKeyword.value = keyword
+    appliedLocationIdKeyword.value = ''
+  } else {
+    appliedLocGroupKeyword.value = ''
+    appliedLocationIdKeyword.value = ''
+  }
 
-const applyLocationIdFilter = () => {
-  appliedLocationIdKeyword.value = locationIdKeywordInput.value.trim()
   triggerWorkingHighlightRefresh()
 }
 
-const clearLocGroupFilter = () => {
-  locGroupKeywordInput.value = ''
+const clearLocationKeywordFilter = () => {
+  locationKeywordInput.value = ''
   appliedLocGroupKeyword.value = ''
-}
-
-const clearLocationIdFilter = () => {
-  locationIdKeywordInput.value = ''
   appliedLocationIdKeyword.value = ''
 }
 
@@ -888,28 +849,26 @@ const handleLoginSuccess = () => {
 const handleSelectLocGroup = async (locGroup1: string) => {
   await copyText(locGroup1)
   if (appliedLocGroupKeyword.value === locGroup1) {
-    locGroupKeywordInput.value = ''
+    locationKeywordInput.value = ''
     appliedLocGroupKeyword.value = ''
     return
   }
 
-  locGroupKeywordInput.value = locGroup1
+  locationKeywordInput.value = locGroup1
   appliedLocGroupKeyword.value = locGroup1
-  locationIdKeywordInput.value = ''
   appliedLocationIdKeyword.value = ''
 }
 
 const handleSelectLocationId = async (locationId: string) => {
   await copyText(locationId)
   if (appliedLocationIdKeyword.value === locationId) {
-    locationIdKeywordInput.value = ''
+    locationKeywordInput.value = ''
     appliedLocationIdKeyword.value = ''
     return
   }
 
-  locationIdKeywordInput.value = locationId
+  locationKeywordInput.value = locationId
   appliedLocationIdKeyword.value = locationId
-  locGroupKeywordInput.value = ''
   appliedLocGroupKeyword.value = ''
 }