Merge pull request #1054 from nagisa77/codex/update-dropdown.vue-for-empty-state-rendering

Add empty dropdown state message when search yields no results

docker/docker-compose.yaml

@@ -226,6 +226,8 @@ services:
       websocket-service:
         condition: service_healthy
     restart: unless-stopped
+    profiles: ["staging", "prod"]
+
 
   loopback_8080:
     image: alpine/socat

frontend_nuxt/components/Dropdown.vue

@@ -49,7 +49,11 @@
       </slot>
     </div>
     <div
-      v-if="open && !isMobile && (loading || filteredOptions.length > 0 || showSearch)"
+      v-if="
+        open &&
+        !isMobile &&
+        (loading || filteredOptions.length > 0 || showSearch || (remote && search))
+      "
       :class="['dropdown-menu', menuClass]"
       v-click-outside="close"
       ref="menuRef"
@@ -61,6 +65,8 @@
       <div v-if="loading" class="dropdown-loading">
         <l-hatch size="20" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
       </div>
+      <template v-else>
+        <div v-if="filteredOptions.length === 0" class="dropdown-empty">没有搜索结果</div>
         <template v-else>
           <div
             v-for="o in filteredOptions"
@@ -83,6 +89,7 @@
           </div>
           <slot name="footer" :close="close" :loading="loading" />
         </template>
+      </template>
     </div>
     <Teleport to="body">
       <div v-if="open && isMobile" class="dropdown-mobile-page">
@@ -98,6 +105,8 @@
           <div v-if="loading" class="dropdown-loading">
             <l-hatch size="20" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
           </div>
+          <template v-else>
+            <div v-if="filteredOptions.length === 0" class="dropdown-empty">没有搜索结果</div>
             <template v-else>
               <div
                 v-for="o in filteredOptions"
@@ -120,6 +129,7 @@
               </div>
               <slot name="footer" :close="close" :loading="loading" />
             </template>
+          </template>
         </div>
       </div>
     </Teleport>
@@ -283,6 +293,7 @@ export default {
       isImageIcon,
       setSearch,
       isMobile,
+      remote: props.remote,
     }
   },
 }
@@ -384,6 +395,13 @@ export default {
   padding: 10px 0;
 }
 
+.dropdown-empty {
+  padding: 20px;
+  text-align: center;
+  color: var(--muted-text-color, #8c8c8c);
+  font-size: 14px;
+}
+
 .dropdown-mobile-page {
   position: fixed;
   top: 0;