From 60da9ba17882f8b0a502dc18158f4ea795e4b6c4 Mon Sep 17 00:00:00 2001 From: shaw Date: Wed, 1 Jul 2026 18:49:33 +0800 Subject: [PATCH] fix(frontend): refine grok icon, palette and i18n --- .../components/account/AccountUsageCell.vue | 2 +- .../components/account/CreateAccountModal.vue | 8 +++---- .../admin/account/ReAuthAccountModal.vue | 2 +- frontend/src/components/common/GroupBadge.vue | 16 ++++++++++++++ .../src/components/common/PlatformIcon.vue | 10 ++++----- frontend/src/i18n/locales/en.ts | 1 + frontend/src/i18n/locales/zh.ts | 1 + frontend/src/utils/platformColors.ts | 22 +++++++++---------- frontend/src/views/admin/GroupsView.vue | 8 +++++-- 9 files changed, 46 insertions(+), 24 deletions(-) diff --git a/frontend/src/components/account/AccountUsageCell.vue b/frontend/src/components/account/AccountUsageCell.vue index b893c1e801..67d7b165dc 100644 --- a/frontend/src/components/account/AccountUsageCell.vue +++ b/frontend/src/components/account/AccountUsageCell.vue @@ -348,7 +348,7 @@
- + {{ grokEntitlementLabel }}
diff --git a/frontend/src/components/account/CreateAccountModal.vue b/frontend/src/components/account/CreateAccountModal.vue index d6cf0d807b..806f05598f 100644 --- a/frontend/src/components/account/CreateAccountModal.vue +++ b/frontend/src/components/account/CreateAccountModal.vue @@ -153,7 +153,7 @@ :class="[ 'flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2.5 text-sm font-medium transition-all', form.platform === 'grok' - ? 'bg-white text-slate-700 shadow-sm dark:bg-dark-600 dark:text-slate-200' + ? 'bg-white text-zinc-900 shadow-sm dark:bg-dark-600 dark:text-zinc-100' : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200' ]" > @@ -362,15 +362,15 @@ :class="[ 'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all', accountCategory === 'oauth-based' - ? 'border-slate-500 bg-slate-50 dark:bg-slate-900/20' - : 'border-gray-200 hover:border-slate-300 dark:border-dark-600 dark:hover:border-slate-700' + ? 'border-zinc-800 bg-zinc-50 dark:bg-zinc-900/30' + : 'border-gray-200 hover:border-zinc-400 dark:border-dark-600 dark:hover:border-zinc-600' ]" >
diff --git a/frontend/src/components/admin/account/ReAuthAccountModal.vue b/frontend/src/components/admin/account/ReAuthAccountModal.vue index 9db44acf68..e767ad89dc 100644 --- a/frontend/src/components/admin/account/ReAuthAccountModal.vue +++ b/frontend/src/components/admin/account/ReAuthAccountModal.vue @@ -21,7 +21,7 @@ : isAntigravity ? 'from-purple-500 to-purple-600' : isGrok - ? 'from-slate-600 to-cyan-600' + ? 'from-zinc-700 to-zinc-900' : 'from-orange-500 to-orange-600' ]" > diff --git a/frontend/src/components/common/GroupBadge.vue b/frontend/src/components/common/GroupBadge.vue index 3303d90982..650e589eeb 100644 --- a/frontend/src/components/common/GroupBadge.vue +++ b/frontend/src/components/common/GroupBadge.vue @@ -124,6 +124,12 @@ const labelClass = computed(() => { if (props.platform === 'gemini') { return `${base} bg-blue-200/60 text-blue-800 dark:bg-blue-800/40 dark:text-blue-300` } + if (props.platform === 'antigravity') { + return `${base} bg-purple-200/60 text-purple-800 dark:bg-purple-800/40 dark:text-purple-300` + } + if (props.platform === 'grok') { + return `${base} bg-zinc-300/70 text-zinc-800 dark:bg-zinc-700/60 dark:text-zinc-200` + } return `${base} bg-violet-200/60 text-violet-800 dark:bg-violet-800/40 dark:text-violet-300` }) @@ -145,6 +151,16 @@ const badgeClass = computed(() => { ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' : 'bg-sky-50 text-sky-700 dark:bg-sky-900/20 dark:text-sky-400' } + if (props.platform === 'antigravity') { + return isSubscription.value + ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400' + : 'bg-fuchsia-50 text-fuchsia-700 dark:bg-fuchsia-900/20 dark:text-fuchsia-400' + } + if (props.platform === 'grok') { + return isSubscription.value + ? 'bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-100' + : 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-200' + } // Fallback: original colors return isSubscription.value ? 'bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400' diff --git a/frontend/src/components/common/PlatformIcon.vue b/frontend/src/components/common/PlatformIcon.vue index 29c45201f8..e950b007ef 100644 --- a/frontend/src/components/common/PlatformIcon.vue +++ b/frontend/src/components/common/PlatformIcon.vue @@ -19,11 +19,11 @@ - - - - - + + + diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts index eec916cfb5..3469d3fff2 100644 --- a/frontend/src/i18n/locales/en.ts +++ b/frontend/src/i18n/locales/en.ts @@ -3183,6 +3183,7 @@ export default { openai: 'OpenAI', gemini: 'Gemini', antigravity: 'Antigravity', + grok: 'Grok', }, types: { oauth: 'OAuth', diff --git a/frontend/src/i18n/locales/zh.ts b/frontend/src/i18n/locales/zh.ts index 7780147ae4..3fa1e1371d 100644 --- a/frontend/src/i18n/locales/zh.ts +++ b/frontend/src/i18n/locales/zh.ts @@ -2267,6 +2267,7 @@ export default { openai: 'OpenAI', gemini: 'Gemini', antigravity: 'Antigravity', + grok: 'Grok', }, saving: '保存中...', noGroups: '暂无分组', diff --git a/frontend/src/utils/platformColors.ts b/frontend/src/utils/platformColors.ts index 670c440dd6..aeaca7194e 100644 --- a/frontend/src/utils/platformColors.ts +++ b/frontend/src/utils/platformColors.ts @@ -13,7 +13,7 @@ const BADGE: Record = { openai: 'bg-green-500/10 text-green-600 border-green-500/30 dark:text-green-400', antigravity: 'bg-purple-500/10 text-purple-600 border-purple-500/30 dark:text-purple-400', gemini: 'bg-blue-500/10 text-blue-600 border-blue-500/30 dark:text-blue-400', - grok: 'bg-slate-500/10 text-slate-600 border-slate-500/30 dark:text-slate-300', + grok: 'bg-zinc-800/10 text-zinc-800 border-zinc-800/30 dark:bg-zinc-500/10 dark:text-zinc-200 dark:border-zinc-500/30', } const BADGE_DEFAULT = 'bg-slate-500/10 text-slate-600 border-slate-500/30 dark:text-slate-400' @@ -23,7 +23,7 @@ const BADGE_LIGHT: Record = { openai: 'bg-green-500/10 text-green-600 dark:bg-green-500/10 dark:text-green-300', antigravity: 'bg-purple-500/10 text-purple-600 dark:bg-purple-500/10 dark:text-purple-300', gemini: 'bg-blue-500/10 text-blue-600 dark:bg-blue-500/10 dark:text-blue-300', - grok: 'bg-slate-500/10 text-slate-600 dark:bg-slate-500/10 dark:text-slate-300', + grok: 'bg-zinc-800/10 text-zinc-800 dark:bg-zinc-500/10 dark:text-zinc-200', } // ── Border ────────────────────────────────────────────────────────── @@ -32,7 +32,7 @@ const BORDER: Record = { openai: 'border-green-500/20 dark:border-green-500/20', antigravity: 'border-purple-500/20 dark:border-purple-500/20', gemini: 'border-blue-500/20 dark:border-blue-500/20', - grok: 'border-slate-500/20 dark:border-slate-500/20', + grok: 'border-zinc-800/20 dark:border-zinc-500/20', } const BORDER_DEFAULT = 'border-gray-200 dark:border-dark-700' @@ -42,7 +42,7 @@ const ACCENT_BAR: Record = { openai: 'bg-gradient-to-r from-emerald-400 to-emerald-500', antigravity: 'bg-gradient-to-r from-purple-400 to-purple-500', gemini: 'bg-gradient-to-r from-blue-400 to-blue-500', - grok: 'bg-gradient-to-r from-slate-500 to-cyan-500', + grok: 'bg-gradient-to-r from-zinc-700 to-zinc-900', } const ACCENT_BAR_DEFAULT = 'bg-gradient-to-r from-primary-400 to-primary-500' @@ -52,7 +52,7 @@ const TEXT: Record = { openai: 'text-emerald-600 dark:text-emerald-400', antigravity: 'text-purple-600 dark:text-purple-400', gemini: 'text-blue-600 dark:text-blue-400', - grok: 'text-slate-700 dark:text-slate-300', + grok: 'text-zinc-800 dark:text-zinc-200', } const TEXT_DEFAULT = 'text-primary-600 dark:text-primary-400' @@ -62,7 +62,7 @@ const ICON: Record = { openai: 'text-emerald-500 dark:text-emerald-400', antigravity: 'text-purple-500 dark:text-purple-400', gemini: 'text-blue-500 dark:text-blue-400', - grok: 'text-slate-500 dark:text-slate-300', + grok: 'text-zinc-800 dark:text-zinc-200', } const ICON_DEFAULT = 'text-primary-500 dark:text-primary-400' @@ -72,7 +72,7 @@ const BUTTON: Record = { openai: 'bg-green-600 text-white hover:bg-green-700 active:bg-green-800 dark:bg-green-600/80 dark:hover:bg-green-600', antigravity: 'bg-purple-500 text-white hover:bg-purple-600 active:bg-purple-700 dark:bg-purple-500/80 dark:hover:bg-purple-500', gemini: 'bg-blue-500 text-white hover:bg-blue-600 active:bg-blue-700 dark:bg-blue-500/80 dark:hover:bg-blue-500', - grok: 'bg-slate-700 text-white hover:bg-slate-800 active:bg-slate-900 dark:bg-slate-600 dark:hover:bg-slate-500', + grok: 'bg-zinc-800 text-white hover:bg-zinc-900 active:bg-black dark:bg-zinc-700 dark:hover:bg-zinc-600', } const BUTTON_DEFAULT = 'bg-primary-500 text-white hover:bg-primary-600 dark:bg-primary-600 dark:hover:bg-primary-500' @@ -82,7 +82,7 @@ const DISCOUNT: Record = { openai: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300', antigravity: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300', gemini: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300', - grok: 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300', + grok: 'bg-zinc-100 text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200', } const DISCOUNT_DEFAULT = 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300' @@ -92,7 +92,7 @@ const GRADIENT: Record = { openai: 'from-emerald-500 to-emerald-600', antigravity: 'from-purple-500 to-purple-600', gemini: 'from-blue-500 to-blue-600', - grok: 'from-slate-600 to-cyan-600', + grok: 'from-zinc-700 to-zinc-900', } const GRADIENT_DEFAULT = 'from-primary-500 to-primary-600' @@ -102,7 +102,7 @@ const GRADIENT_TEXT: Record = { openai: 'text-emerald-100', antigravity: 'text-purple-100', gemini: 'text-blue-100', - grok: 'text-slate-100', + grok: 'text-zinc-100', } const GRADIENT_TEXT_DEFAULT = 'text-primary-100' @@ -111,7 +111,7 @@ const GRADIENT_SUBTEXT: Record = { openai: 'text-emerald-200', antigravity: 'text-purple-200', gemini: 'text-blue-200', - grok: 'text-slate-200', + grok: 'text-zinc-300', } const GRADIENT_SUBTEXT_DEFAULT = 'text-primary-200' diff --git a/frontend/src/views/admin/GroupsView.vue b/frontend/src/views/admin/GroupsView.vue index dcee3a3671..e18194313f 100644 --- a/frontend/src/views/admin/GroupsView.vue +++ b/frontend/src/views/admin/GroupsView.vue @@ -106,7 +106,9 @@ ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400' : value === 'antigravity' ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400' - : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400', + : value === 'grok' + ? 'bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-100' + : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400', ]" > @@ -2974,7 +2976,9 @@ ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400' : group.platform === 'antigravity' ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400' - : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400', + : group.platform === 'grok' + ? 'bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-100' + : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400', ]" > {{ t("admin.groups.platforms." + group.platform) }}