xinyin025/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-08-12 22:31:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: search ui

Browse Source
This commit is contained in:
tim
2025-07-08 20:36:59 +08:00
parent b8ea48b4a1
commit a0d42360c6
2 changed files with 41 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
open-isle-cli/src/components/Dropdown.vue
+29 -35
View File
@@ -1,41 +1,35 @@
<template> <template>
<div class="dropdown" ref="wrapper"> <div class="dropdown" ref="wrapper">
<div class="dropdown-display" @click="toggle"> <div class="dropdown-display" @click="toggle">
<slot <slot name="display" :selected="selectedLabels" :toggle="toggle" :search="search" :setSearch="setSearch">
name="display" <template v-if="multiple">
:selected="selectedLabels" <span v-if="selectedLabels.length">
:toggle="toggle" <template v-for="(label, idx) in selectedLabels" :key="label.id">
:search="search" <div class="selected-label">
:setSearch="setSearch" <template v-if="label.icon">
> <img v-if="isImageIcon(label.icon)" :src="label.icon" class="option-icon" />
<template v-if="multiple"> <i v-else :class="['option-icon', label.icon]"></i>
<span v-if="selectedLabels.length"> </template>
<template v-for="(label, idx) in selectedLabels" :key="label.id"> <span>{{ label.name }}</span>
<div class="selected-label"> </div>
<template v-if="label.icon"> <span v-if="idx !== selectedLabels.length - 1">, </span>
<img v-if="isImageIcon(label.icon)" :src="label.icon" class="option-icon" />
<i v-else :class="['option-icon', label.icon]"></i>
</template>
<span>{{ label.name }}</span>
</div>
<span v-if="idx !== selectedLabels.length - 1">, </span>
</template>
</span>
<span v-else class="placeholder">{{ placeholder }}</span>
</template>
<template v-else>
<span v-if="selectedLabels.length">
<div class="selected-label">
<template v-if="selectedLabels[0].icon">
<img v-if="isImageIcon(selectedLabels[0].icon)" :src="selectedLabels[0].icon" class="option-icon" />
<i v-else :class="['option-icon', selectedLabels[0].icon]"></i>
</template> </template>
<span>{{ selectedLabels[0].name }}</span> </span>
</div> <span v-else class="placeholder">{{ placeholder }}</span>
</span> </template>
<span v-else class="placeholder">{{ placeholder }}</span> <template v-else>
</template> <span v-if="selectedLabels.length">
<i class="fas fa-caret-down dropdown-caret"></i> <div class="selected-label">
<template v-if="selectedLabels[0].icon">
<img v-if="isImageIcon(selectedLabels[0].icon)" :src="selectedLabels[0].icon" class="option-icon" />
<i v-else :class="['option-icon', selectedLabels[0].icon]"></i>
</template>
<span>{{ selectedLabels[0].name }}</span>
</div>
</span>
<span v-else class="placeholder">{{ placeholder }}</span>
</template>
<i class="fas fa-caret-down dropdown-caret"></i>
</slot> </slot>
</div> </div>
<div v-if="open && (loading || filteredOptions.length > 0)" :class="['dropdown-menu', menuClass]"> <div v-if="open && (loading || filteredOptions.length > 0)" :class="['dropdown-menu', menuClass]">
open-isle-cli/src/components/SearchDropdown.vue
+12 -5
View File
@@ -9,11 +9,13 @@
</div> </div>
</template> </template>
<template #option="{ option }"> <template #option="{ option }">
<i :class="['result-icon', iconMap[option.type] || 'fas fa-question']"></i> <div class="search-option-item">
<div class="result-body"> <i :class="['result-icon', iconMap[option.type] || 'fas fa-question']"></i>
<div class="result-main" v-html="highlight(option.text)"></div> <div class="result-body">
<div v-if="option.subText" class="result-sub" v-html="highlight(option.subText)"></div> <div class="result-main" v-html="highlight(option.text)"></div>
<div v-if="option.extra" class="result-extra" v-html="highlight(option.extra)"></div> <div v-if="option.subText" class="result-sub" v-html="highlight(option.subText)"></div>
<div v-if="option.extra" class="result-extra" v-html="highlight(option.extra)"></div>
</div>
</div> </div>
</template> </template>
</Dropdown> </Dropdown>
@@ -89,6 +91,11 @@ export default {
max-width: 600px; max-width: 600px;
} }
.search-option-item {
display: flex;
gap: 10px;
}
.search-option { .search-option {
display: flex; display: flex;
align-items: center; align-items: center;