mirror of
https://gitee.com/wanwujie/sub2api
synced 2026-04-16 12:54:45 +08:00
2ebbd4c94d
- 分组下拉添加搜索框，支持按名称/描述快速筛选 - 新建/编辑密钥弹窗的分组选择也支持搜索 - 智能弹出方向：底部空间不足时自动向上弹出 - 倍率独立为平台配色的圆角标签，更醒目 - 分组名称加粗，名称与描述之间增加间距 - 分组选项之间添加分隔线，视觉更清晰 - 切换图标旁增加"选择分组"文字提示 - 下拉宽度自适应内容长度 - i18n: 新增 searchGroup、noGroupFound 词条 (en/zh)
108 lines
3.4 KiB
Vue
108 lines
3.4 KiB
Vue
<template>
|
|
<div class="flex min-w-0 flex-1 items-start justify-between gap-3">
|
|
<!-- Left: name + description -->
|
|
<div
|
|
class="flex min-w-0 flex-1 flex-col items-start"
|
|
:title="description || undefined"
|
|
>
|
|
<!-- Row 1: platform badge (name bold) -->
|
|
<GroupBadge
|
|
:name="name"
|
|
:platform="platform"
|
|
:subscription-type="subscriptionType"
|
|
:show-rate="false"
|
|
class="groupOptionItemBadge"
|
|
/>
|
|
<!-- Row 2: description with top spacing -->
|
|
<span
|
|
v-if="description"
|
|
class="mt-1.5 w-full text-left text-xs leading-relaxed text-gray-500 dark:text-gray-400 line-clamp-2"
|
|
>
|
|
{{ description }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Right: rate pill + checkmark (vertically centered to first row) -->
|
|
<div class="flex shrink-0 items-center gap-2 pt-0.5">
|
|
<!-- Rate pill (platform color) -->
|
|
<span v-if="rateMultiplier !== undefined" :class="['inline-flex items-center whitespace-nowrap rounded-full px-3 py-1 text-xs font-semibold', ratePillClass]">
|
|
<template v-if="hasCustomRate">
|
|
<span class="mr-1 line-through opacity-50">{{ rateMultiplier }}x</span>
|
|
<span class="font-bold">{{ userRateMultiplier }}x</span>
|
|
</template>
|
|
<template v-else>
|
|
{{ rateMultiplier }}x 倍率
|
|
</template>
|
|
</span>
|
|
<!-- Checkmark -->
|
|
<svg
|
|
v-if="showCheckmark && selected"
|
|
class="h-4 w-4 shrink-0 text-primary-600 dark:text-primary-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import GroupBadge from './GroupBadge.vue'
|
|
import type { SubscriptionType, GroupPlatform } from '@/types'
|
|
|
|
interface Props {
|
|
name: string
|
|
platform: GroupPlatform
|
|
subscriptionType?: SubscriptionType
|
|
rateMultiplier?: number
|
|
userRateMultiplier?: number | null
|
|
description?: string | null
|
|
selected?: boolean
|
|
showCheckmark?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
subscriptionType: 'standard',
|
|
selected: false,
|
|
showCheckmark: true,
|
|
userRateMultiplier: null
|
|
})
|
|
|
|
// Whether user has a custom rate different from default
|
|
const hasCustomRate = computed(() => {
|
|
return (
|
|
props.userRateMultiplier !== null &&
|
|
props.userRateMultiplier !== undefined &&
|
|
props.rateMultiplier !== undefined &&
|
|
props.userRateMultiplier !== props.rateMultiplier
|
|
)
|
|
})
|
|
|
|
// Rate pill color matches platform badge color
|
|
const ratePillClass = computed(() => {
|
|
switch (props.platform) {
|
|
case 'anthropic':
|
|
return 'bg-amber-50 text-amber-700 dark:bg-amber-900/20 dark:text-amber-400'
|
|
case 'openai':
|
|
return 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400'
|
|
case 'gemini':
|
|
return 'bg-sky-50 text-sky-700 dark:bg-sky-900/20 dark:text-sky-400'
|
|
case 'sora':
|
|
return 'bg-rose-50 text-rose-700 dark:bg-rose-900/20 dark:text-rose-400'
|
|
default: // antigravity and others
|
|
return 'bg-violet-50 text-violet-700 dark:bg-violet-900/20 dark:text-violet-400'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Bold the group name inside GroupBadge when used in dropdown option */
|
|
.groupOptionItemBadge :deep(span.truncate) {
|
|
font-weight: 600;
|
|
}
|
|
</style>
|