468 lines
14 KiB
Dart
468 lines
14 KiB
Dart
import 'package:ainoval/blocs/next_outline/next_outline_state.dart';
|
|
import 'package:ainoval/utils/web_theme.dart';
|
|
import '../../../models/user_ai_model_config_model.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_lucide/flutter_lucide.dart';
|
|
|
|
/// 现代化剧情推演结果卡片 - 全局通用组件
|
|
///
|
|
/// 此组件负责展示单个剧情推演结果：
|
|
/// 1. 内容展示 - 显示生成的剧情内容
|
|
/// 2. 状态指示 - 加载、完成、选中状态
|
|
/// 3. 操作控件 - 选择、重新生成、保存等
|
|
/// 4. 交互反馈 - 悬停效果和状态变化
|
|
///
|
|
/// 设计特点：
|
|
/// - 采用纯黑白配色方案，保持视觉一致性
|
|
/// - 现代化的卡片设计和微交互
|
|
/// - 清晰的信息层次和操作引导
|
|
/// - 优化的间距和组件尺寸
|
|
class ModernResultCard extends StatefulWidget {
|
|
/// 剧情选项数据
|
|
final OutlineOptionState option;
|
|
|
|
/// 是否被选中
|
|
final bool isSelected;
|
|
|
|
/// AI模型配置列表 - 用于重新生成操作
|
|
final List<UserAIModelConfigModel> aiModelConfigs;
|
|
|
|
/// 选中回调
|
|
final VoidCallback onSelected;
|
|
|
|
/// 重新生成回调
|
|
final Function(String configId, String? hint) onRegenerateSingle;
|
|
|
|
/// 保存回调
|
|
final Function(String insertType) onSave;
|
|
|
|
const ModernResultCard({
|
|
Key? key,
|
|
required this.option,
|
|
this.isSelected = false,
|
|
required this.aiModelConfigs,
|
|
required this.onSelected,
|
|
required this.onRegenerateSingle,
|
|
required this.onSave,
|
|
}) : super(key: key);
|
|
|
|
@override
|
|
State<ModernResultCard> createState() => _ModernResultCardState();
|
|
}
|
|
|
|
/// 结果卡片状态管理
|
|
///
|
|
/// 负责：
|
|
/// 1. 悬停状态管理
|
|
/// 2. 模型选择状态
|
|
/// 3. 交互动画控制
|
|
/// 4. 用户操作处理
|
|
class _ModernResultCardState extends State<ModernResultCard> {
|
|
String? _selectedConfigId;
|
|
bool _isHovering = false;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
|
|
// 默认选择第一个已验证的模型配置
|
|
final validatedConfigs = widget.aiModelConfigs
|
|
.where((config) => config.isValidated)
|
|
.toList();
|
|
if (validatedConfigs.isNotEmpty) {
|
|
_selectedConfigId = validatedConfigs.first.id;
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return MouseRegion(
|
|
onEnter: (_) => setState(() => _isHovering = true),
|
|
onExit: (_) => setState(() => _isHovering = false),
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
transform: _isHovering
|
|
? (Matrix4.identity()..translate(0, -2))
|
|
: Matrix4.identity(),
|
|
child: Container(
|
|
height: double.infinity,
|
|
decoration: BoxDecoration(
|
|
color: WebTheme.getCardColor(context),
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(
|
|
color: widget.isSelected
|
|
? WebTheme.getTextColor(context)
|
|
: _isHovering
|
|
? WebTheme.getSecondaryTextColor(context)
|
|
: WebTheme.getBorderColor(context),
|
|
width: widget.isSelected ? 2 : 1,
|
|
),
|
|
boxShadow: [
|
|
if (_isHovering || widget.isSelected)
|
|
BoxShadow(
|
|
color: WebTheme.getShadowColor(context, opacity: 0.3),
|
|
blurRadius: widget.isSelected ? 12 : 8,
|
|
offset: const Offset(0, 4),
|
|
),
|
|
],
|
|
),
|
|
child: Column(
|
|
children: [
|
|
// 内容区域
|
|
Expanded(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(20),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// 标题区域
|
|
_buildTitleSection(context),
|
|
|
|
const SizedBox(height: 16),
|
|
|
|
// 内容区域
|
|
Expanded(
|
|
child: _buildContentSection(context),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
|
|
// 底部操作区域
|
|
_buildActionSection(context),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
/// 构建标题区域
|
|
Widget _buildTitleSection(BuildContext context) {
|
|
return Row(
|
|
children: [
|
|
// 状态指示器
|
|
Container(
|
|
width: 8,
|
|
height: 8,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: widget.option.isGenerating
|
|
? WebTheme.warning
|
|
: widget.isSelected
|
|
? WebTheme.getTextColor(context)
|
|
: WebTheme.success,
|
|
),
|
|
),
|
|
|
|
const SizedBox(width: 12),
|
|
|
|
// 标题文本
|
|
Expanded(
|
|
child: Text(
|
|
widget.option.title ?? '生成中...',
|
|
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
|
color: WebTheme.getTextColor(context),
|
|
fontWeight: FontWeight.w600,
|
|
fontSize: 20,
|
|
height: 1.2,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
|
|
// 选中指示器
|
|
if (widget.isSelected)
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
|
decoration: BoxDecoration(
|
|
color: WebTheme.getTextColor(context),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Text(
|
|
'已选择',
|
|
style: TextStyle(
|
|
fontSize: 10,
|
|
fontWeight: FontWeight.w600,
|
|
color: WebTheme.getCardColor(context),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
/// 构建内容区域
|
|
Widget _buildContentSection(BuildContext context) {
|
|
return Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: WebTheme.getEmptyStateColor(context),
|
|
borderRadius: BorderRadius.circular(8),
|
|
border: Border.all(
|
|
color: WebTheme.getBorderColor(context),
|
|
width: 1,
|
|
),
|
|
),
|
|
child: ValueListenableBuilder<String>(
|
|
valueListenable: widget.option.contentStreamController,
|
|
builder: (context, content, child) {
|
|
// 生成中状态
|
|
if (content.isEmpty && widget.option.isGenerating) {
|
|
return _buildLoadingContent(context);
|
|
}
|
|
|
|
// 内容展示
|
|
return _buildTextContent(context, content);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
/// 构建加载内容
|
|
Widget _buildLoadingContent(BuildContext context) {
|
|
return Center(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
SizedBox(
|
|
width: 24,
|
|
height: 24,
|
|
child: CircularProgressIndicator(
|
|
strokeWidth: 2,
|
|
color: WebTheme.getSecondaryTextColor(context),
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
Text(
|
|
'正在生成内容...',
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: WebTheme.getSecondaryTextColor(context),
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
/// 构建文本内容
|
|
Widget _buildTextContent(BuildContext context, String content) {
|
|
return SingleChildScrollView(
|
|
child: Text(
|
|
content.isEmpty ? '暂无内容' : content,
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
fontSize: 20,
|
|
height: 2.0,
|
|
color: content.isEmpty
|
|
? WebTheme.getSecondaryTextColor(context)
|
|
: WebTheme.getTextColor(context),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
/// 构建操作区域
|
|
Widget _buildActionSection(BuildContext context) {
|
|
return Container(
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: WebTheme.getEmptyStateColor(context),
|
|
border: Border(
|
|
top: BorderSide(
|
|
color: WebTheme.getBorderColor(context),
|
|
width: 1,
|
|
),
|
|
),
|
|
borderRadius: const BorderRadius.only(
|
|
bottomLeft: Radius.circular(12),
|
|
bottomRight: Radius.circular(12),
|
|
),
|
|
),
|
|
child: Column(
|
|
children: [
|
|
// 模型选择和重新生成
|
|
Row(
|
|
children: [
|
|
// 模型选择下拉框
|
|
Expanded(
|
|
child: _buildModelSelector(context),
|
|
),
|
|
|
|
const SizedBox(width: 12),
|
|
|
|
// 重新生成按钮
|
|
_buildRegenerateButton(context),
|
|
],
|
|
),
|
|
|
|
const SizedBox(height: 12),
|
|
|
|
// 主要操作按钮
|
|
_buildMainActionButton(context),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
/// 构建模型选择器
|
|
Widget _buildModelSelector(BuildContext context) {
|
|
final validatedConfigs = widget.aiModelConfigs
|
|
.where((config) => config.isValidated)
|
|
.toList();
|
|
|
|
if (validatedConfigs.isEmpty) {
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
|
decoration: BoxDecoration(
|
|
color: WebTheme.getCardColor(context),
|
|
borderRadius: BorderRadius.circular(6),
|
|
border: Border.all(
|
|
color: WebTheme.getBorderColor(context),
|
|
width: 1,
|
|
),
|
|
),
|
|
child: Text(
|
|
'无可用模型',
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: WebTheme.getSecondaryTextColor(context),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
decoration: BoxDecoration(
|
|
color: WebTheme.getCardColor(context),
|
|
borderRadius: BorderRadius.circular(6),
|
|
border: Border.all(
|
|
color: WebTheme.getBorderColor(context),
|
|
width: 1,
|
|
),
|
|
),
|
|
child: DropdownButtonHideUnderline(
|
|
child: DropdownButton<String>(
|
|
value: _selectedConfigId,
|
|
items: validatedConfigs.map((config) {
|
|
return DropdownMenuItem<String>(
|
|
value: config.id,
|
|
child: Text(
|
|
config.name,
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: WebTheme.getTextColor(context),
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
);
|
|
}).toList(),
|
|
onChanged: (value) {
|
|
if (value != null) {
|
|
setState(() {
|
|
_selectedConfigId = value;
|
|
});
|
|
}
|
|
},
|
|
isDense: true,
|
|
isExpanded: true,
|
|
icon: Icon(
|
|
LucideIcons.chevron_down,
|
|
size: 14,
|
|
color: WebTheme.getSecondaryTextColor(context),
|
|
),
|
|
dropdownColor: WebTheme.getCardColor(context),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
/// 构建重新生成按钮
|
|
Widget _buildRegenerateButton(BuildContext context) {
|
|
return Container(
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(6),
|
|
border: Border.all(
|
|
color: WebTheme.getBorderColor(context),
|
|
width: 1,
|
|
),
|
|
),
|
|
child: IconButton(
|
|
icon: Icon(
|
|
LucideIcons.refresh_cw,
|
|
size: 16,
|
|
color: widget.option.isGenerating || _selectedConfigId == null
|
|
? WebTheme.getSecondaryTextColor(context)
|
|
: WebTheme.getTextColor(context),
|
|
),
|
|
tooltip: '重新生成',
|
|
onPressed: widget.option.isGenerating || _selectedConfigId == null
|
|
? null
|
|
: () => widget.onRegenerateSingle(_selectedConfigId!, null),
|
|
padding: const EdgeInsets.all(8),
|
|
constraints: const BoxConstraints(
|
|
minWidth: 32,
|
|
minHeight: 32,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
/// 构建主要操作按钮
|
|
Widget _buildMainActionButton(BuildContext context) {
|
|
if (widget.option.isGenerating) {
|
|
return Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.symmetric(vertical: 12),
|
|
decoration: BoxDecoration(
|
|
color: WebTheme.getEmptyStateColor(context),
|
|
borderRadius: BorderRadius.circular(6),
|
|
),
|
|
child: Center(
|
|
child: Text(
|
|
'生成中...',
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w500,
|
|
color: WebTheme.getSecondaryTextColor(context),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
return SizedBox(
|
|
width: double.infinity,
|
|
child: ElevatedButton(
|
|
onPressed: widget.onSelected,
|
|
style: widget.isSelected
|
|
? WebTheme.getPrimaryButtonStyle(context).copyWith(
|
|
backgroundColor: MaterialStateProperty.all(WebTheme.getTextColor(context)),
|
|
padding: MaterialStateProperty.all(
|
|
const EdgeInsets.symmetric(vertical: 12),
|
|
),
|
|
)
|
|
: WebTheme.getSecondaryButtonStyle(context).copyWith(
|
|
padding: MaterialStateProperty.all(
|
|
const EdgeInsets.symmetric(vertical: 12),
|
|
),
|
|
),
|
|
child: Text(
|
|
widget.isSelected ? '已选择' : '选择此大纲',
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w600,
|
|
color: widget.isSelected
|
|
? WebTheme.getCardColor(context)
|
|
: WebTheme.getTextColor(context),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
} |