收口作品详情点赞按钮

为 PlatformActionButton 增加 accentSoft tone 将作品详情点赞按钮迁移到 PlatformActionButton 删除作品详情点赞按钮本地 chrome CSS 补充公共按钮和作品详情点赞断言更新 PlatformUiKit 文档和 Hermes 决策记录
2026-06-10 15:08:42 +08:00
parent 694b2fa209
commit e612b13b88
8 changed files with 55 additions and 38 deletions
--- a/src/components/common/PlatformActionButton.test.tsx
+++ b/src/components/common/PlatformActionButton.test.tsx
@@ -90,3 +90,22 @@ test('supports accent action tone', () => {
  expect(button.className).toContain('h-12');
  expect(button.className).toContain('w-full');
 });
+
+test('supports accent soft action tone', () => {
+  render(
+    <PlatformActionButton
+      tone="accentSoft"
+      className="[--platform-action-accent:var(--platform-work-like-accent,#c7653d)]"
+    >
+      点赞
+    </PlatformActionButton>,
+  );
+
+  const button = screen.getByRole('button', { name: '点赞' });
+
+  expect(button.className).toContain('platform-action-button--accent-soft');
+  expect(button.className).toContain('[color:var(--platform-action-accent,#c7653d)]');
+  expect(button.className).toContain(
+    '[--platform-action-accent:var(--platform-work-like-accent,#c7653d)]',
+  );
+});
--- a/src/components/common/platformActionButtonModel.test.ts
+++ b/src/components/common/platformActionButtonModel.test.ts
@@ -75,3 +75,16 @@ test('builds accent action button class names', () => {
  expect(className).toContain('h-12');
  expect(className).toContain('w-full');
 });
+
+test('builds accent soft action button class names', () => {
+  const className = getPlatformActionButtonClassName({
+    tone: 'accentSoft',
+    shape: 'pill',
+    size: 'xs',
+  });
+
+  expect(className).toContain('platform-action-button--accent-soft');
+  expect(className).toContain('[color:var(--platform-action-accent,#c7653d)]');
+  expect(className).toContain('rounded-full');
+  expect(className).toContain('text-xs');
+});
--- a/src/components/common/platformActionButtonModel.ts
+++ b/src/components/common/platformActionButtonModel.ts
@@ -5,7 +5,8 @@ export type PlatformActionButtonTone =
  | 'danger'
  | 'success'
  | 'warning'
-  | 'accent';
+  | 'accent'
+  | 'accentSoft';
 export type PlatformActionButtonSurface = 'platform' | 'profile' | 'editorDark';
 export type PlatformActionButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
 export type PlatformActionButtonShape = 'default' | 'pill';
@@ -23,6 +24,8 @@ const PLATFORM_ACTION_BUTTON_PLATFORM_TONE_CLASS: Record<
  warning: 'platform-button platform-button--secondary',
  accent:
    'platform-action-button platform-action-button--accent border border-amber-200/70 bg-amber-200 text-slate-950 hover:bg-amber-100',
+  accentSoft:
+    'platform-action-button platform-action-button--accent-soft [border-color:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_24%,transparent)] [background:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,var(--platform-panel-fill)_90%)] [color:var(--platform-action-accent,#c7653d)] [box-shadow:0_0.55rem_1.2rem_color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,transparent)]',
 };

 const PLATFORM_ACTION_BUTTON_PROFILE_TONE_CLASS: Record<
@@ -37,6 +40,8 @@ const PLATFORM_ACTION_BUTTON_PROFILE_TONE_CLASS: Record<
  warning: 'platform-button platform-button--secondary',
  accent:
    'platform-action-button platform-action-button--accent border border-amber-200/70 bg-amber-200 text-slate-950 hover:bg-amber-100',
+  accentSoft:
+    'platform-action-button platform-action-button--accent-soft [border-color:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_24%,transparent)] [background:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,var(--platform-panel-fill)_90%)] [color:var(--platform-action-accent,#c7653d)] [box-shadow:0_0.55rem_1.2rem_color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,transparent)]',
 };

 const PLATFORM_ACTION_BUTTON_EDITOR_DARK_TONE_CLASS: Record<
@@ -57,6 +62,8 @@ const PLATFORM_ACTION_BUTTON_EDITOR_DARK_TONE_CLASS: Record<
    'platform-action-button platform-action-button--editor-dark border border-amber-300/30 bg-amber-500/20 text-amber-50 hover:bg-amber-500/25',
  accent:
    'platform-action-button platform-action-button--accent border border-amber-200/70 bg-amber-200 text-slate-950 hover:bg-amber-100',
+  accentSoft:
+    'platform-action-button platform-action-button--accent-soft [border-color:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_24%,transparent)] [background:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,rgba(0,0,0,0.72)_90%)] [color:var(--platform-action-accent,#f5c36a)] [box-shadow:0_0.55rem_1.2rem_color-mix(in_srgb,var(--platform-action-accent,#f5c36a)_10%,transparent)]',
 };

 const PLATFORM_ACTION_BUTTON_SIZE_CLASS: Record<
--- a/src/components/platform-entry/PlatformWorkDetailView.test.tsx
+++ b/src/components/platform-entry/PlatformWorkDetailView.test.tsx
@@ -153,7 +153,11 @@ test('PlatformWorkDetailView renders compact stats and date time', () => {
  expect(screen.getByRole('button', { name: '分享' }).className).toContain(
    'platform-icon-button',
  );
-  expect(screen.getByRole('button', { name: '点赞 4赞' })).toBeTruthy();
+  const likeButton = screen.getByRole('button', { name: '点赞 4赞' });
+  expect(likeButton).toBeTruthy();
+  expect(likeButton.className).toContain('platform-action-button--accent-soft');
+  expect(likeButton.className).toContain('platform-work-detail__like');
+  expect(likeButton.className).toContain('flex-col');
  const remixAction = screen.getByRole('button', { name: '作品改造' });
  const startAction = screen.getByRole('button', { name: '启动' });
  expect(remixAction.className).toContain('platform-button');
--- a/src/components/platform-entry/PlatformWorkDetailView.tsx
+++ b/src/components/platform-entry/PlatformWorkDetailView.tsx
@@ -378,17 +378,18 @@ export function PlatformWorkDetailView({
                </span>
              </div>
            </div>
-            <button
+            <PlatformActionButton
              type="button"
-              className="platform-work-detail__like"
+              tone="accentSoft"
              onClick={onLike}
              disabled={isBusy}
              aria-label={`点赞 ${formatCompactCount(stats.likeCount)}赞`}
              title="点赞"
+              className="platform-work-detail__like min-w-[5.2rem] flex-col gap-1 px-3 py-2.5 text-[0.8125rem] [--platform-action-accent:var(--platform-work-like-accent,#c7653d)]"
            >
              <Heart className="h-5 w-5 fill-current" />
              点赞
-            </button>
+            </PlatformActionButton>
          </div>

          <div className="platform-work-detail__stats">
--- a/src/index.css
+++ b/src/index.css
@@ -8524,37 +8524,6 @@ button {
  white-space: nowrap;
 }

-.platform-work-detail__like {
-  display: inline-flex;
-  min-width: 5.2rem;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.25rem;
-  border: 1px solid
-    color-mix(
-      in srgb,
-      var(--platform-work-like-accent, #c7653d) 24%,
-      transparent
-    );
-  border-radius: 1rem;
-  background: color-mix(
-    in srgb,
-    var(--platform-work-like-accent, #c7653d) 10%,
-    var(--platform-panel-fill) 90%
-  );
-  color: var(--platform-work-like-accent, #c7653d);
-  padding: 0.6rem 0.75rem;
-  font-size: 0.8125rem;
-  font-weight: 900;
-  box-shadow: 0 0.55rem 1.2rem
-    color-mix(
-      in srgb,
-      var(--platform-work-like-accent, #c7653d) 10%,
-      transparent
-    );
-}
-
 .platform-work-detail__remix:disabled,
 .platform-work-detail__start:disabled {
  cursor: not-allowed;