强化分割结果导出按钮样式
- 为工作区分割结果导出按钮增加 FileDown 图标,让导出入口更容易识别。 - 将导出按钮从灰色弱背景调整为绿色强调背景、边框和文字样式,提升在顶栏中的区分度。 - 补充 VideoWorkspace 测试,覆盖导出按钮图标和强调背景样式。 - 更新前端元素审计、测试计划和 AGENTS 文档,记录导出按钮视觉规范。
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user