From 2d9b21feb69c47573b418ff67aff628b2b174c8e Mon Sep 17 00:00:00 2001
From: wizardchen <wizardchen@tencent.com>
Date: Tue, 30 Jun 2026 20:39:03 +0800
Subject: [PATCH] fix(frontend): polish Chrome and Claw integration landing
 pages

Remove redundant hero icons from the Chrome extension and Claw Skill
landing headers, and keep Claw CTA hover states on the lobster accent
instead of the default brand green.
---
 .../integrations/ChromeExtensionLanding.vue   |  4 --
 .../views/integrations/ClawSkillLanding.vue   |  4 --
 .../integrations/IntegrationLandingLayout.vue |  3 --
 .../integrations/integration-landing.less     | 51 +++++--------------
 4 files changed, 13 insertions(+), 49 deletions(-)

diff --git a/frontend/src/views/integrations/ChromeExtensionLanding.vue b/frontend/src/views/integrations/ChromeExtensionLanding.vue
index b32b8cb3..b3e2237b 100644
--- a/frontend/src/views/integrations/ChromeExtensionLanding.vue
+++ b/frontend/src/views/integrations/ChromeExtensionLanding.vue
@@ -4,10 +4,6 @@
     :subtitle="$t('integrations.chrome.subtitle')"
     variant="chrome"
   >
-    <template #icon>
-      <t-icon name="extension" size="22px" />
-    </template>
-
     <template #tags>
       <span v-for="key in scenarioKeys" :key="key" class="scenario-tag">
         {{ $t(`integrations.chrome.scenarios.${key}`) }}
diff --git a/frontend/src/views/integrations/ClawSkillLanding.vue b/frontend/src/views/integrations/ClawSkillLanding.vue
index 9ba03545..b1471b77 100644
--- a/frontend/src/views/integrations/ClawSkillLanding.vue
+++ b/frontend/src/views/integrations/ClawSkillLanding.vue
@@ -4,10 +4,6 @@
     :subtitle="$t('integrations.claw.subtitle')"
     variant="claw"
   >
-    <template #icon>
-      <span role="img" :aria-label="$t('common.clawhubSkill')">🦞</span>
-    </template>
-
     <template #actions>
       <IntegrationExternalCta
         variant="claw"
diff --git a/frontend/src/views/integrations/IntegrationLandingLayout.vue b/frontend/src/views/integrations/IntegrationLandingLayout.vue
index 20813aee..3dafab63 100644
--- a/frontend/src/views/integrations/IntegrationLandingLayout.vue
+++ b/frontend/src/views/integrations/IntegrationLandingLayout.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="integration-landing" :class="{ 'integration-landing--claw': variant === 'claw' }">
     <header class="landing-hero" :class="{ 'landing-hero--claw': variant === 'claw' }">
-      <div class="landing-hero__icon" :class="`landing-hero__icon--${variant}`">
-        <slot name="icon" />
-      </div>
       <div class="landing-hero__content">
         <h2 class="landing-hero__title">{{ title }}</h2>
         <p v-if="subtitle" class="landing-hero__subtitle">{{ subtitle }}</p>
diff --git a/frontend/src/views/integrations/integration-landing.less b/frontend/src/views/integrations/integration-landing.less
index 24352668..80b16362 100644
--- a/frontend/src/views/integrations/integration-landing.less
+++ b/frontend/src/views/integrations/integration-landing.less
@@ -46,30 +46,6 @@
       var(--td-bg-color-container) 72%
     );
     box-shadow: inset 0 1px 0 color-mix(in srgb, @claw-accent 10%, transparent);
-
-    .landing-hero__icon {
-      background: color-mix(in srgb, @claw-accent 14%, var(--td-bg-color-container));
-    }
-  }
-
-  &__icon {
-    flex-shrink: 0;
-    width: 44px;
-    height: 44px;
-    border-radius: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: color-mix(in srgb, var(--td-brand-color) 14%, var(--td-bg-color-container));
-    color: var(--td-brand-color);
-    font-size: 22px;
-    line-height: 1;
-
-    :deep(.t-icon) {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
   }
 
   &__content {
@@ -126,18 +102,18 @@
     background 0.18s ease,
     box-shadow 0.18s ease;
 
-  &:hover {
+  &:not(&--claw):hover {
     border-style: solid;
     border-color: color-mix(in srgb, var(--td-brand-color) 40%, var(--td-component-stroke));
     background: color-mix(in srgb, var(--td-bg-color-container) 92%, transparent);
     box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
   }
 
-  &:active {
+  &:not(&--claw):active {
     box-shadow: none;
   }
 
-  &:focus-visible {
+  &:not(&--claw):focus-visible {
     outline: 2px solid var(--td-brand-color);
     outline-offset: 2px;
   }
@@ -146,7 +122,14 @@
     border-color: color-mix(in srgb, @claw-accent 30%, var(--td-component-stroke));
 
     &:hover {
+      border-style: solid;
       border-color: color-mix(in srgb, @claw-accent 45%, var(--td-component-stroke));
+      background: color-mix(in srgb, var(--td-bg-color-container) 92%, transparent);
+      box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
+    }
+
+    &:active {
+      box-shadow: none;
     }
 
     .ext-cta__badge {
@@ -165,7 +148,8 @@
     }
 
     &:focus-visible {
-      outline-color: @claw-accent;
+      outline: 2px solid @claw-accent;
+      outline-offset: 2px;
     }
   }
 
@@ -232,7 +216,7 @@
     justify-content: center;
   }
 
-  &:hover &__arrow-wrap {
+  &:not(&--claw):hover &__arrow-wrap {
     background: color-mix(in srgb, var(--td-brand-color) 14%, transparent);
     color: var(--td-brand-color);
   }
@@ -246,11 +230,6 @@
 
 // ── Claw / 龙虾主题色 ──
 .integration-landing--claw {
-  .landing-hero__icon--claw {
-    color: @claw-accent-dark;
-    background: color-mix(in srgb, @claw-accent 14%, var(--td-bg-color-container));
-  }
-
   .landing-group {
     .setting-drawer__section-title::before {
       background: @claw-accent;
@@ -281,10 +260,6 @@
     color: color-mix(in srgb, @claw-accent-dark 55%, var(--td-text-color-placeholder));
   }
 
-  .ext-cta--claw:hover .ext-cta__arrow-wrap {
-    color: @claw-accent-dark;
-  }
-
   :deep(.t-button--variant-outline) {
     color: @claw-accent-dark;
     border-color: color-mix(in srgb, @claw-accent 38%, var(--td-component-border));