强化分割结果导出按钮样式

- 为工作区分割结果导出按钮增加 FileDown 图标,让导出入口更容易识别。

- 将导出按钮从灰色弱背景调整为绿色强调背景、边框和文字样式,提升在顶栏中的区分度。

- 补充 VideoWorkspace 测试,覆盖导出按钮图标和强调背景样式。

- 更新前端元素审计、测试计划和 AGENTS 文档,记录导出按钮视觉规范。
This commit is contained in:
2026-05-04 03:38:48 +08:00
parent f558f3b3c7
commit b943f5e184
5 changed files with 18 additions and 6 deletions

View File

@@ -111,6 +111,17 @@ describe('VideoWorkspace', () => {
expect(apiMock.getProjectAnnotations).toHaveBeenCalledWith('1');
});
it('renders the segmentation export button with a visible icon and accent background', () => {
apiMock.getProjectFrames.mockResolvedValueOnce([]);
render(<VideoWorkspace />);
const exportButton = screen.getByRole('button', { name: '分割结果导出' });
expect(exportButton.querySelector('svg')).toBeInTheDocument();
expect(exportButton).toHaveClass('bg-emerald-500/20');
expect(exportButton).toHaveClass('border-emerald-400/40');
});
it('exposes workspace undo/redo buttons and keyboard shortcuts without hijacking inputs', async () => {
const mask = {
id: 'mask-undo',

View File

@@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Redo, Undo } from 'lucide-react';
import { FileDown, Redo, Undo } from 'lucide-react';
import { useStore } from '../store/useStore';
import {
annotationToMask,
@@ -2096,9 +2096,10 @@ export function VideoWorkspace({ onNavigateToAI }: { onNavigateToAI?: () => void
disabled={!currentProject?.id || isExporting || isSaving || isPropagating}
aria-haspopup="menu"
aria-expanded={isExportMenuOpen}
className="px-4 py-1.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-md text-xs transition-colors text-white disabled:opacity-40 disabled:cursor-not-allowed"
className="inline-flex items-center gap-1.5 px-4 py-1.5 bg-emerald-500/20 hover:bg-emerald-500/30 border border-emerald-400/40 rounded-md text-xs font-medium transition-colors text-emerald-50 shadow-sm shadow-emerald-950/30 disabled:opacity-40 disabled:cursor-not-allowed"
>
{isExporting ? '导出中...' : '分割结果导出'}
<FileDown aria-hidden="true" className="h-3.5 w-3.5 text-emerald-200" />
<span>{isExporting ? '导出中...' : '分割结果导出'}</span>
</button>
{isExportMenuOpen && (
<div