style: 统一平台和分组列的样式
- 账号页面平台列改为与分组页面一致的标签样式 - 订阅页面分组列改用 GroupBadge 组件展示 - 修正 OpenAI OAuth 类型描述文案
This commit is contained in:
@@ -168,7 +168,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="block text-sm font-medium text-gray-900 dark:text-white">OAuth</span>
|
<span class="block text-sm font-medium text-gray-900 dark:text-white">OAuth</span>
|
||||||
<span class="text-xs text-gray-500 dark:text-gray-400">ChatGPT Plus</span>
|
<span class="text-xs text-gray-500 dark:text-gray-400">ChatGPT OAuth</span>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|||||||
@@ -74,15 +74,17 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cell-platform="{ value }">
|
<template #cell-platform="{ value }">
|
||||||
<div class="flex items-center gap-2">
|
<span
|
||||||
<span
|
:class="[
|
||||||
:class="[
|
'inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium',
|
||||||
'w-2 h-2 rounded-full',
|
value === 'anthropic'
|
||||||
value === 'anthropic' ? 'bg-orange-500' : value === 'openai' ? 'bg-green-500' : 'bg-gray-400'
|
? 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
|
||||||
]"
|
: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
|
||||||
/>
|
]"
|
||||||
<span class="text-sm text-gray-700 dark:text-gray-300 capitalize">{{ value === 'anthropic' ? 'Anthropic' : value === 'openai' ? 'OpenAI' : value }}</span>
|
>
|
||||||
</div>
|
<PlatformIcon :platform="value" size="xs" />
|
||||||
|
{{ value === 'anthropic' ? 'Anthropic' : 'OpenAI' }}
|
||||||
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cell-type="{ value }">
|
<template #cell-type="{ value }">
|
||||||
@@ -334,6 +336,7 @@ import AccountUsageCell from '@/components/account/AccountUsageCell.vue'
|
|||||||
import AccountTodayStatsCell from '@/components/account/AccountTodayStatsCell.vue'
|
import AccountTodayStatsCell from '@/components/account/AccountTodayStatsCell.vue'
|
||||||
import AccountTestModal from '@/components/account/AccountTestModal.vue'
|
import AccountTestModal from '@/components/account/AccountTestModal.vue'
|
||||||
import GroupBadge from '@/components/common/GroupBadge.vue'
|
import GroupBadge from '@/components/common/GroupBadge.vue'
|
||||||
|
import PlatformIcon from '@/components/common/PlatformIcon.vue'
|
||||||
import { formatRelativeTime } from '@/utils/format'
|
import { formatRelativeTime } from '@/utils/format'
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|||||||
@@ -60,9 +60,15 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cell-group="{ row }">
|
<template #cell-group="{ row }">
|
||||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400">
|
<GroupBadge
|
||||||
{{ row.group?.name || `Group #${row.group_id}` }}
|
v-if="row.group"
|
||||||
</span>
|
:name="row.group.name"
|
||||||
|
:platform="row.group.platform"
|
||||||
|
:subscription-type="row.group.subscription_type"
|
||||||
|
:rate-multiplier="row.group.rate_multiplier"
|
||||||
|
:show-rate="false"
|
||||||
|
/>
|
||||||
|
<span v-else class="text-sm text-gray-400 dark:text-dark-500">-</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cell-usage="{ row }">
|
<template #cell-usage="{ row }">
|
||||||
@@ -361,6 +367,7 @@ import Modal from '@/components/common/Modal.vue'
|
|||||||
import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
|
import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
|
||||||
import EmptyState from '@/components/common/EmptyState.vue'
|
import EmptyState from '@/components/common/EmptyState.vue'
|
||||||
import Select from '@/components/common/Select.vue'
|
import Select from '@/components/common/Select.vue'
|
||||||
|
import GroupBadge from '@/components/common/GroupBadge.vue'
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const appStore = useAppStore()
|
const appStore = useAppStore()
|
||||||
|
|||||||
Reference in New Issue
Block a user