xinyin025/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-07-25 14:06:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Add empty dropdown state message when search yields no results
This commit is contained in:
Tim
2025-10-07 18:00:59 +08:00
committed by GitHub
parent 87b214cbc0 bbb0a11d49
commit 790c4db8ea
2 changed files with 61 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/docker-compose.yaml
+2
View File
@@ -226,6 +226,8 @@ services:
websocket-service: websocket-service:
condition: service_healthy condition: service_healthy
restart: unless-stopped restart: unless-stopped
profiles: ["staging", "prod"]
loopback_8080: loopback_8080:
image: alpine/socat image: alpine/socat
frontend_nuxt/components/Dropdown.vue
+59 -41
View File
@@ -49,7 +49,11 @@
</slot> </slot>
</div> </div>
<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]" :class="['dropdown-menu', menuClass]"
v-click-outside="close" v-click-outside="close"
ref="menuRef" ref="menuRef"
@@ -62,26 +66,29 @@
<l-hatch size="20" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch> <l-hatch size="20" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
</div> </div>
<template v-else> <template v-else>
<div <div v-if="filteredOptions.length === 0" class="dropdown-empty">没有搜索结果</div>
v-for="o in filteredOptions" <template v-else>
:key="o.id" <div
@click="select(o.id)" v-for="o in filteredOptions"
:class="['dropdown-option', optionClass, { selected: isSelected(o.id) }]" :key="o.id"
> @click="select(o.id)"
<slot name="option" :option="o" :isSelected="isSelected(o.id)"> :class="['dropdown-option', optionClass, { selected: isSelected(o.id) }]"
<template v-if="o.icon"> >
<BaseImage <slot name="option" :option="o" :isSelected="isSelected(o.id)">
v-if="isImageIcon(o.icon)" <template v-if="o.icon">
:src="o.icon" <BaseImage
class="option-icon" v-if="isImageIcon(o.icon)"
:alt="o.name" :src="o.icon"
/> class="option-icon"
<component v-else :is="o.icon" class="option-icon" :size="16" /> :alt="o.name"
</template> />
<span>{{ o.name }}</span> <component v-else :is="o.icon" class="option-icon" :size="16" />
</slot> </template>
</div> <span>{{ o.name }}</span>
<slot name="footer" :close="close" :loading="loading" /> </slot>
</div>
<slot name="footer" :close="close" :loading="loading" />
</template>
</template> </template>
</div> </div>
<Teleport to="body"> <Teleport to="body">
@@ -99,26 +106,29 @@
<l-hatch size="20" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch> <l-hatch size="20" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
</div> </div>
<template v-else> <template v-else>
<div <div v-if="filteredOptions.length === 0" class="dropdown-empty">没有搜索结果</div>
v-for="o in filteredOptions" <template v-else>
:key="o.id" <div
@click="select(o.id)" v-for="o in filteredOptions"
:class="['dropdown-option', optionClass, { selected: isSelected(o.id) }]" :key="o.id"
> @click="select(o.id)"
<slot name="option" :option="o" :isSelected="isSelected(o.id)"> :class="['dropdown-option', optionClass, { selected: isSelected(o.id) }]"
<template v-if="o.icon"> >
<BaseImage <slot name="option" :option="o" :isSelected="isSelected(o.id)">
v-if="isImageIcon(o.icon)" <template v-if="o.icon">
:src="o.icon" <BaseImage
class="option-icon" v-if="isImageIcon(o.icon)"
:alt="o.name" :src="o.icon"
/> class="option-icon"
<component v-else :is="o.icon" class="option-icon" :size="16" /> :alt="o.name"
</template> />
<span>{{ o.name }}</span> <component v-else :is="o.icon" class="option-icon" :size="16" />
</slot> </template>
</div> <span>{{ o.name }}</span>
<slot name="footer" :close="close" :loading="loading" /> </slot>
</div>
<slot name="footer" :close="close" :loading="loading" />
</template>
</template> </template>
</div> </div>
</div> </div>
@@ -283,6 +293,7 @@ export default {
isImageIcon, isImageIcon,
setSearch, setSearch,
isMobile, isMobile,
remote: props.remote,
} }
}, },
} }
@@ -384,6 +395,13 @@ export default {
padding: 10px 0; padding: 10px 0;
} }
.dropdown-empty {
padding: 20px;
text-align: center;
color: var(--muted-text-color, #8c8c8c);
font-size: 14px;
}
.dropdown-mobile-page { .dropdown-mobile-page {
position: fixed; position: fixed;
top: 0; top: 0;