fix: CustomDropdown组件支持层级结构显示

- 添加动态padding支持indent属性(每级缩进16px)
- 添加isGroup属性支持,分组项显示为粗体带背景
- 修复暗黑模式下选中图标颜色
- 支持二级平台分类的视觉层级展示
This commit is contained in:
IanShaw027
2025-12-05 12:44:11 +08:00
parent 827c0f6207
commit a03753030c

View File

@@ -41,19 +41,25 @@
<div <div
v-for="option in options" v-for="option in options"
:key="option.value" :key="option.value"
class="flex cursor-pointer items-center gap-2 whitespace-nowrap px-3 py-2 text-sm transition-colors duration-150" class="flex cursor-pointer items-center gap-2 whitespace-nowrap py-2 text-sm transition-colors duration-150"
:class="[ :class="[
option.value === modelValue option.value === modelValue
? 'bg-blue-50 font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' ? 'bg-blue-50 font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
: 'text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700' : option.isGroup
? 'bg-gray-50 font-semibold text-gray-800 dark:bg-gray-700/50 dark:text-gray-200'
: 'text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700'
]" ]"
:style="{
paddingLeft: option.indent ? `${12 + option.indent * 16}px` : '12px',
paddingRight: '12px'
}"
@click="selectOption(option)" @click="selectOption(option)"
> >
<i v-if="option.icon" :class="['fas', option.icon, 'text-xs']"></i> <i v-if="option.icon" :class="['fas', option.icon, 'text-xs']"></i>
<span>{{ option.label }}</span> <span>{{ option.label }}</span>
<i <i
v-if="option.value === modelValue" v-if="option.value === modelValue"
class="fas fa-check ml-auto pl-3 text-xs text-blue-600" class="fas fa-check ml-auto pl-3 text-xs text-blue-600 dark:text-blue-400"
></i> ></i>
</div> </div>
</div> </div>