mirror of
https://github.com/Wei-Shaw/claude-relay-service.git
synced 2026-01-22 16:43:35 +00:00
fix: CustomDropdown组件支持层级结构显示
- 添加动态padding支持indent属性(每级缩进16px) - 添加isGroup属性支持,分组项显示为粗体带背景 - 修复暗黑模式下选中图标颜色 - 支持二级平台分类的视觉层级展示
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user