jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-02-22 06:50:53 +08: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

2
docker/docker-compose.yaml
View File

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

100
frontend_nuxt/components/Dropdown.vue
View File

@@ -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"
@@ -62,26 +66,29 @@
<l-hatch size="20" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
</div>
<template v-else>
<div
v-for="o in filteredOptions"
:key="o.id"
@click="select(o.id)"
:class="['dropdown-option', optionClass, { selected: isSelected(o.id) }]"
>
<slot name="option" :option="o" :isSelected="isSelected(o.id)">
<template v-if="o.icon">
<BaseImage
v-if="isImageIcon(o.icon)"
:src="o.icon"
class="option-icon"
:alt="o.name"
/>
<component v-else :is="o.icon" class="option-icon" :size="16" />
</template>
<span>{{ o.name }}</span>
</slot>
</div>
<slot name="footer" :close="close" :loading="loading" />
<div v-if="filteredOptions.length === 0" class="dropdown-empty">没有搜索结果</div>
<template v-else>
<div
v-for="o in filteredOptions"
:key="o.id"
@click="select(o.id)"
:class="['dropdown-option', optionClass, { selected: isSelected(o.id) }]"
>
<slot name="option" :option="o" :isSelected="isSelected(o.id)">
<template v-if="o.icon">
<BaseImage
v-if="isImageIcon(o.icon)"
:src="o.icon"
class="option-icon"
:alt="o.name"
/>
<component v-else :is="o.icon" class="option-icon" :size="16" />
</template>
<span>{{ o.name }}</span>
</slot>
</div>
<slot name="footer" :close="close" :loading="loading" />
</template>
</template>
</div>
<Teleport to="body">
@@ -99,26 +106,29 @@
<l-hatch size="20" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
</div>
<template v-else>
<div
v-for="o in filteredOptions"
:key="o.id"
@click="select(o.id)"
:class="['dropdown-option', optionClass, { selected: isSelected(o.id) }]"
>
<slot name="option" :option="o" :isSelected="isSelected(o.id)">
<template v-if="o.icon">
<BaseImage
v-if="isImageIcon(o.icon)"
:src="o.icon"
class="option-icon"
:alt="o.name"
/>
<component v-else :is="o.icon" class="option-icon" :size="16" />
</template>
<span>{{ o.name }}</span>
</slot>
</div>
<slot name="footer" :close="close" :loading="loading" />
<div v-if="filteredOptions.length === 0" class="dropdown-empty">没有搜索结果</div>
<template v-else>
<div
v-for="o in filteredOptions"
:key="o.id"
@click="select(o.id)"
:class="['dropdown-option', optionClass, { selected: isSelected(o.id) }]"
>
<slot name="option" :option="o" :isSelected="isSelected(o.id)">
<template v-if="o.icon">
<BaseImage
v-if="isImageIcon(o.icon)"
:src="o.icon"
class="option-icon"
:alt="o.name"
/>
<component v-else :is="o.icon" class="option-icon" :size="16" />
</template>
<span>{{ o.name }}</span>
</slot>
</div>
<slot name="footer" :close="close" :loading="loading" />
</template>
</template>
</div>
</div>
@@ -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;