GenarrativeAI/Genarrative
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

收口作品详情点赞按钮

Browse Source 
为 PlatformActionButton 增加 accentSoft tone

将作品详情点赞按钮迁移到 PlatformActionButton

删除作品详情点赞按钮本地 chrome CSS

补充公共按钮和作品详情点赞断言

更新 PlatformUiKit 文档和 Hermes 决策记录
This commit is contained in:
kdletters
2026-06-10 15:08:42 +08:00
parent 694b2fa209
commit e612b13b88
8 changed files with 55 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/common/PlatformActionButton.test.tsx
View File

@@ -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)]',
);
});

13
src/components/common/platformActionButtonModel.test.ts
View File

@@ -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');
});

9
src/components/common/platformActionButtonModel.ts
View File

@@ -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<

6
src/components/platform-entry/PlatformWorkDetailView.test.tsx
View File

@@ -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');

7
src/components/platform-entry/PlatformWorkDetailView.tsx
View File

@@ -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">