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

feat: tag select ui

Browse Source
This commit is contained in:
tim
2025-07-10 12:01:47 +08:00
parent 463629e9c5
commit d7a242700b
3 changed files with 49 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
open-isle-cli/src/components/CategorySelect.vue
+21 -9
View File
@@ -1,15 +1,17 @@
<template> <template>
<Dropdown v-model="selected" :fetch-options="fetchCategories" placeholder="选择分类"> <Dropdown v-model="selected" :fetch-options="fetchCategories" placeholder="选择分类">
<template #option="{ option }"> <template #option="{ option }">
<div class="option-main"> <div class="option-container">
<template v-if="option.icon"> <div class="option-main">
<img v-if="isImageIcon(option.icon)" :src="option.icon" class="option-icon" /> <template v-if="option.icon">
<i v-else :class="['option-icon', option.icon]"></i> <img v-if="isImageIcon(option.icon)" :src="option.icon" class="option-icon" />
</template> <i v-else :class="['option-icon', option.icon]"></i>
<span>{{ option.name }}</span> </template>
<span v-if="option.count > 0"> x {{ option.count }}</span> <span>{{ option.name }}</span>
<span class="option-count" v-if="option.count > 0"> x {{ option.count }}</span>
</div>
<div v-if="option.description" class="option-desc">{{ option.description }}</div>
</div> </div>
<div v-if="option.description" class="option-desc">{{ option.description }}</div>
</template> </template>
</Dropdown> </Dropdown>
</template> </template>
@@ -50,6 +52,12 @@ export default {
</script> </script>
<style scoped> <style scoped>
.option-container {
display: flex;
flex-direction: column;
gap: 5px;
}
.option-main { .option-main {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -59,6 +67,10 @@ export default {
.option-desc { .option-desc {
font-size: 12px; font-size: 12px;
color: #666; color: #666;
margin-left: 21px; }
.option-count {
font-weight: bold;
opacity: 0.4;
} }
</style> </style>
open-isle-cli/src/components/Dropdown.vue
+3 -2
View File
@@ -197,10 +197,9 @@ export default {
} }
</script> </script>
<style scoped> <style>
.dropdown { .dropdown {
position: relative; position: relative;
min-width: 200px;
} }
.dropdown-display { .dropdown-display {
@@ -211,6 +210,7 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
min-width: 100px;
} }
.placeholder { .placeholder {
@@ -226,6 +226,7 @@ export default {
border: 1px solid #ccc; border: 1px solid #ccc;
z-index: 10; z-index: 10;
max-height: 200px; max-height: 200px;
min-width: 350px;
overflow-y: auto; overflow-y: auto;
} }
open-isle-cli/src/components/TagSelect.vue
+25 -16
View File
@@ -1,21 +1,17 @@
<template> <template>
<Dropdown <Dropdown v-model="selected" :fetch-options="fetchTags" multiple placeholder="选择标签" remote>
v-model="selected"
:fetch-options="fetchTags"
multiple
placeholder="选择标签"
remote
>
<template #option="{ option }"> <template #option="{ option }">
<div class="option-main"> <div class="option-container">
<template v-if="option.icon"> <div class="option-main">
<img v-if="isImageIcon(option.icon)" :src="option.icon" class="option-icon" /> <template v-if="option.icon">
<i v-else :class="['option-icon', option.icon]"></i> <img v-if="isImageIcon(option.icon)" :src="option.icon" class="option-icon" />
</template> <i v-else :class="['option-icon', option.icon]"></i>
<span>{{ option.name }}</span> </template>
<span v-if="option.count > 0"> x {{ option.count }}</span> <span>{{ option.name }}</span>
<span class="option-count" v-if="option.count > 0"> x {{ option.count }}</span>
</div>
<div v-if="option.description" class="option-desc">{{ option.description }}</div>
</div> </div>
<div v-if="option.description" class="option-desc">{{ option.description }}</div>
</template> </template>
</Dropdown> </Dropdown>
</template> </template>
@@ -51,7 +47,9 @@ export default {
if (res.ok) { if (res.ok) {
data = await res.json() data = await res.json()
} }
} catch {} } catch {
toast.error('获取标签失败')
}
let options = [...data, ...localTags.value] let options = [...data, ...localTags.value]
@@ -99,6 +97,12 @@ export default {
</script> </script>
<style scoped> <style scoped>
.option-container {
display: flex;
flex-direction: column;
gap: 5px;
}
.option-main { .option-main {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -110,4 +114,9 @@ export default {
color: #666; color: #666;
margin-left: 21px; margin-left: 21px;
} }
.option-count {
font-weight: bold;
opacity: 0.4;
}
</style> </style>