style(组件): 优化摘要按钮样式

- 移除 Tooltip 包装,改用原生 title 属性
- 调整按钮为图标 + 文字的布局形式
- 统一按钮样式与其他操作按钮一致
- 简化已有摘要指示器的样式
This commit is contained in:
gaoziman 2025-12-28 17:29:26 +08:00
parent e7de47d0d9
commit e415ff5787

View File

@ -4,7 +4,6 @@ import { useState } from 'react';
import { Sparkles } from 'lucide-react';
import { SummaryModal } from './SummaryModal';
import type { SummaryMessage } from './types';
import { Tooltip } from '@/components/ui/Tooltip';
interface SummaryButtonProps {
conversationId: string;
@ -39,21 +38,20 @@ export function SummaryButton({
return (
<>
<Tooltip content="智能摘要" position="bottom">
<button
type="button"
onClick={handleClick}
className={`relative p-2 rounded text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-secondary)] hover:text-[var(--color-primary)] transition-all duration-150 ${className}`}
aria-label="生成智能摘要"
>
<Sparkles size={18} />
<button
type="button"
onClick={handleClick}
className={`relative flex items-center gap-2 px-3 py-1.5 text-sm text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)] rounded-[4px] transition-colors ${className}`}
title="生成智能摘要"
>
<Sparkles size={16} />
<span></span>
{/* 已有摘要指示器 */}
{hasSummary && (
<span className="absolute top-1 right-1 w-2 h-2 bg-[var(--color-primary)] rounded-full border-2 border-[var(--color-bg-primary)] animate-pulse" />
)}
</button>
</Tooltip>
{/* 已有摘要指示器 */}
{hasSummary && (
<span className="absolute top-0.5 right-0.5 w-1.5 h-1.5 bg-[var(--color-primary)] rounded-full" />
)}
</button>
{/* 摘要 Modal */}
<SummaryModal