433 lines
14 KiB
Dart
433 lines
14 KiB
Dart
import 'package:flutter/material.dart';
|
||
import 'package:ainoval/utils/web_theme.dart';
|
||
import '../../../models/setting_node.dart';
|
||
import '../../../blocs/setting_generation/setting_generation_state.dart'; // 导入渲染状态
|
||
|
||
/// 设定节点组件
|
||
class SettingNodeWidget extends StatefulWidget {
|
||
final SettingNode node;
|
||
final String? selectedNodeId;
|
||
final String viewMode;
|
||
final int level;
|
||
final Function(String nodeId) onTap;
|
||
|
||
// 渲染状态参数
|
||
final Set<String> renderedNodeIds;
|
||
final Map<String, NodeRenderInfo> nodeRenderStates;
|
||
// 是否渲染子节点（用于流式列表避免重复渲染）
|
||
final bool renderChildren;
|
||
|
||
const SettingNodeWidget({
|
||
Key? key,
|
||
required this.node,
|
||
this.selectedNodeId,
|
||
required this.viewMode,
|
||
required this.level,
|
||
required this.onTap,
|
||
this.renderedNodeIds = const {},
|
||
this.nodeRenderStates = const {},
|
||
this.renderChildren = true,
|
||
}) : super(key: key);
|
||
|
||
@override
|
||
State<SettingNodeWidget> createState() => _SettingNodeWidgetState();
|
||
}
|
||
|
||
class _SettingNodeWidgetState extends State<SettingNodeWidget>
|
||
with TickerProviderStateMixin {
|
||
bool _isExpanded = true;
|
||
late AnimationController _renderingController; // 渲染动画控制器
|
||
late Animation<double> _renderingAnimation;
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
|
||
// 渲染动画控制器
|
||
_renderingController = AnimationController(
|
||
duration: const Duration(milliseconds: 600),
|
||
vsync: this,
|
||
);
|
||
_renderingAnimation = CurvedAnimation(
|
||
parent: _renderingController,
|
||
curve: Curves.easeOutBack,
|
||
);
|
||
|
||
// 检查初始渲染状态
|
||
_checkRenderingState();
|
||
}
|
||
|
||
@override
|
||
void dispose() {
|
||
_renderingController.dispose();
|
||
super.dispose();
|
||
}
|
||
|
||
@override
|
||
void didUpdateWidget(SettingNodeWidget oldWidget) {
|
||
super.didUpdateWidget(oldWidget);
|
||
|
||
// 检查渲染状态变化
|
||
_checkRenderingState();
|
||
}
|
||
|
||
/// 检查并处理渲染状态变化
|
||
void _checkRenderingState() {
|
||
final renderInfo = widget.nodeRenderStates[widget.node.id];
|
||
|
||
if (renderInfo?.state == NodeRenderState.rendering) {
|
||
// 开始渲染动画
|
||
_renderingController.forward();
|
||
} else if (renderInfo?.state == NodeRenderState.rendered) {
|
||
// 确保渲染动画完成
|
||
_renderingController.value = 1.0;
|
||
}
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
// 🔧 关键修复：始终返回相同的widget结构，用Opacity控制可见性
|
||
return _buildAlwaysStableWidget();
|
||
}
|
||
|
||
/// 🔧 核心修复：构建绝对稳定的widget，永远不改变结构
|
||
Widget _buildAlwaysStableWidget() {
|
||
final renderInfo = widget.nodeRenderStates[widget.node.id];
|
||
final isRendering = renderInfo?.state == NodeRenderState.rendering;
|
||
final isRendered = widget.renderedNodeIds.contains(widget.node.id);
|
||
|
||
// 🔧 关键：确定最终可见性，但不改变widget树结构
|
||
final shouldShow = isRendered || isRendering;
|
||
final opacity = shouldShow ? 1.0 : 0.0;
|
||
|
||
// 🔧 绝对稳定的widget结构：始终存在，只改变可见性
|
||
Widget nodeContent = Column(
|
||
key: ValueKey('stable_node_${widget.node.id}'),
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
_buildNodeHeader(),
|
||
// 🔧 子节点容器：始终存在，只改变内容可见性
|
||
if (widget.renderChildren && widget.node.children != null && widget.node.children!.isNotEmpty)
|
||
_buildStableChildrenContainer(),
|
||
],
|
||
);
|
||
|
||
// 🔧 使用Opacity + IgnorePointer确保不可见时完全不可交互
|
||
Widget result = Opacity(
|
||
opacity: opacity,
|
||
child: IgnorePointer(
|
||
ignoring: !shouldShow,
|
||
child: nodeContent,
|
||
),
|
||
);
|
||
|
||
// 🔧 只有在渲染中时才应用动画效果
|
||
if (isRendering) {
|
||
result = AnimatedBuilder(
|
||
animation: _renderingAnimation,
|
||
builder: (context, child) {
|
||
return Transform.scale(
|
||
scale: 0.95 + (_renderingAnimation.value * 0.05),
|
||
child: Container(
|
||
decoration: BoxDecoration(
|
||
borderRadius: BorderRadius.circular(8),
|
||
boxShadow: [
|
||
BoxShadow(
|
||
color: const Color(0xFF3B82F6).withOpacity(0.15 * _renderingAnimation.value),
|
||
blurRadius: 4 * _renderingAnimation.value,
|
||
spreadRadius: 1 * _renderingAnimation.value,
|
||
),
|
||
],
|
||
),
|
||
child: child,
|
||
),
|
||
);
|
||
},
|
||
child: result,
|
||
);
|
||
}
|
||
|
||
return result;
|
||
}
|
||
|
||
/// 🔧 构建稳定的子节点容器：始终分配所有空间
|
||
Widget _buildStableChildrenContainer() {
|
||
// 使用 AnimatedSize + ClipRect 避免从 null 到 0 的高度动画在 Web 上导致异常
|
||
return ClipRect(
|
||
child: AnimatedSize(
|
||
duration: const Duration(milliseconds: 200),
|
||
alignment: Alignment.topLeft,
|
||
curve: Curves.easeInOut,
|
||
child: _isExpanded
|
||
? Container(
|
||
padding: const EdgeInsets.only(top: 4),
|
||
child: _buildAbsolutelyStableChildrenList(),
|
||
)
|
||
: const SizedBox.shrink(),
|
||
),
|
||
);
|
||
}
|
||
|
||
/// 🔧 终极修复：构建绝对稳定的子节点列表
|
||
Widget _buildAbsolutelyStableChildrenList() {
|
||
if (widget.node.children == null || widget.node.children!.isEmpty) {
|
||
return const SizedBox.shrink();
|
||
}
|
||
|
||
// 🔧 终极方案：为所有子节点预分配固定空间，每个子节点自己控制可见性
|
||
// 这确保Column的children数量和类型永远不变
|
||
return Column(
|
||
key: ValueKey('stable_children_${widget.node.id}'),
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: widget.node.children!.map((child) {
|
||
return Container(
|
||
key: ValueKey('stable_child_container_${child.id}'),
|
||
margin: const EdgeInsets.only(bottom: 4),
|
||
child: SettingNodeWidget(
|
||
key: ValueKey('stable_child_widget_${child.id}'),
|
||
node: child,
|
||
selectedNodeId: widget.selectedNodeId,
|
||
viewMode: widget.viewMode,
|
||
level: widget.level + 1,
|
||
onTap: widget.onTap,
|
||
renderedNodeIds: widget.renderedNodeIds,
|
||
nodeRenderStates: widget.nodeRenderStates,
|
||
),
|
||
);
|
||
}).toList(),
|
||
);
|
||
}
|
||
|
||
Widget _buildNodeHeader() {
|
||
final isDark = Theme.of(context).brightness == Brightness.dark;
|
||
final renderInfo = widget.nodeRenderStates[widget.node.id];
|
||
final isRendering = renderInfo?.state == NodeRenderState.rendering;
|
||
|
||
// 只有当前节点被选中时才显示选中状态，子节点不继承
|
||
final isCurrentNodeSelected = widget.selectedNodeId == widget.node.id;
|
||
|
||
// 根据Node.js版本的 paddingLeft: `${level * 1.5 + 0.5}rem`
|
||
final leftPadding = widget.level * 24.0 + 8.0; // 1rem = 16px, 1.5rem = 24px
|
||
|
||
return InkWell(
|
||
onTap: () => widget.onTap(widget.node.id),
|
||
borderRadius: BorderRadius.circular(6),
|
||
child: Container(
|
||
width: double.infinity,
|
||
padding: EdgeInsets.only(
|
||
left: leftPadding,
|
||
right: 8,
|
||
top: widget.viewMode == 'compact' ? 8 : 12,
|
||
bottom: widget.viewMode == 'compact' ? 8 : 12,
|
||
),
|
||
decoration: BoxDecoration(
|
||
color: _getBackgroundColor(),
|
||
borderRadius: BorderRadius.circular(6),
|
||
border: isCurrentNodeSelected
|
||
? Border.all(
|
||
color: const Color(0xFF6366F1), // indigo-500
|
||
width: 2,
|
||
)
|
||
: isRendering
|
||
? Border.all(
|
||
color: const Color(0xFF3B82F6), // blue-500
|
||
width: 1,
|
||
)
|
||
: null,
|
||
),
|
||
child: Row(
|
||
crossAxisAlignment: widget.viewMode == 'compact'
|
||
? CrossAxisAlignment.center
|
||
: CrossAxisAlignment.start,
|
||
children: [
|
||
// Rendering indicator
|
||
if (isRendering)
|
||
Container(
|
||
width: 8,
|
||
height: 8,
|
||
margin: const EdgeInsets.only(right: 8, top: 2),
|
||
child: CircularProgressIndicator(
|
||
strokeWidth: 2,
|
||
valueColor: AlwaysStoppedAnimation<Color>(
|
||
const Color(0xFF3B82F6), // blue-500
|
||
),
|
||
),
|
||
),
|
||
// Expand/collapse icon
|
||
InkWell(
|
||
onTap: _toggleExpanded,
|
||
borderRadius: BorderRadius.circular(4),
|
||
child: Container(
|
||
width: 16,
|
||
height: 16,
|
||
margin: EdgeInsets.only(
|
||
right: 8,
|
||
top: widget.viewMode == 'detailed' ? 4 : 0,
|
||
),
|
||
child: (widget.renderChildren && widget.node.children != null && widget.node.children!.isNotEmpty)
|
||
? AnimatedRotation(
|
||
turns: _isExpanded ? 0.25 : 0,
|
||
duration: const Duration(milliseconds: 200),
|
||
child: Icon(
|
||
Icons.chevron_right,
|
||
size: 16,
|
||
color: const Color(0xFF6B7280), // gray-500
|
||
),
|
||
)
|
||
: Icon(
|
||
Icons.description,
|
||
size: 16,
|
||
color: isDark
|
||
? const Color(0xFF4B5563) // gray-600 dark
|
||
: const Color(0xFF9CA3AF), // gray-400
|
||
),
|
||
),
|
||
),
|
||
// Node content
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Row(
|
||
children: [
|
||
// 状态图标（小）
|
||
Padding(
|
||
padding: const EdgeInsets.only(right: 6),
|
||
child: _buildStatusIcon(),
|
||
),
|
||
Expanded(
|
||
child: Text(
|
||
widget.node.name,
|
||
style: TextStyle(
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w500,
|
||
color: isCurrentNodeSelected
|
||
? const Color(0xFF6366F1) // indigo-500
|
||
: isRendering
|
||
? const Color(0xFF3B82F6) // blue-500
|
||
: (isDark
|
||
? const Color(0xFFF9FAFB)
|
||
: const Color(0xFF111827)),
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(width: 6),
|
||
_buildTypeChip(),
|
||
if (isRendering)
|
||
Text(
|
||
'生成中...',
|
||
style: TextStyle(
|
||
fontSize: 12,
|
||
color: const Color(0xFF3B82F6),
|
||
fontStyle: FontStyle.italic,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
if (widget.viewMode == 'detailed' && widget.node.description.isNotEmpty)
|
||
Padding(
|
||
padding: const EdgeInsets.only(top: 6),
|
||
child: Text(
|
||
widget.node.description,
|
||
style: TextStyle(
|
||
fontSize: 14,
|
||
color: isDark
|
||
? const Color(0xFF9CA3AF) // gray-400 dark
|
||
: const Color(0xFF6B7280), // gray-500
|
||
height: 1.5,
|
||
),
|
||
maxLines: 3,
|
||
overflow: TextOverflow.ellipsis,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildStatusIcon() {
|
||
// 移除“待处理”状态下的时钟图标
|
||
if (widget.node.generationStatus == GenerationStatus.pending) {
|
||
return const SizedBox.shrink();
|
||
}
|
||
|
||
IconData icon;
|
||
Color color;
|
||
|
||
switch (widget.node.generationStatus) {
|
||
case GenerationStatus.generating:
|
||
icon = Icons.autorenew;
|
||
color = Colors.blue;
|
||
break;
|
||
case GenerationStatus.completed:
|
||
icon = Icons.check_circle;
|
||
color = Colors.green;
|
||
break;
|
||
case GenerationStatus.failed:
|
||
icon = Icons.error;
|
||
color = Colors.red;
|
||
break;
|
||
case GenerationStatus.modified:
|
||
icon = Icons.edit;
|
||
color = Colors.purple;
|
||
break;
|
||
case GenerationStatus.pending:
|
||
// 已在上方提前返回
|
||
icon = Icons.check_circle; // 占位，不会被使用
|
||
color = Colors.transparent;
|
||
break;
|
||
}
|
||
|
||
return Icon(
|
||
icon,
|
||
size: 14,
|
||
color: color,
|
||
);
|
||
}
|
||
|
||
Widget _buildTypeChip() {
|
||
return Container(
|
||
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
|
||
decoration: BoxDecoration(
|
||
color: WebTheme.getPrimaryColor(context).withOpacity(0.1),
|
||
borderRadius: BorderRadius.circular(12),
|
||
border: Border.all(
|
||
color: WebTheme.getPrimaryColor(context).withOpacity(0.3),
|
||
width: 1,
|
||
),
|
||
),
|
||
child: Text(
|
||
widget.node.type.displayName,
|
||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||
color: WebTheme.getPrimaryColor(context),
|
||
fontSize: 10,
|
||
fontWeight: FontWeight.w500,
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
Color _getBackgroundColor() {
|
||
final isDark = Theme.of(context).brightness == Brightness.dark;
|
||
|
||
if (widget.selectedNodeId == widget.node.id) {
|
||
return isDark
|
||
? const Color(0xFF1E1B4B) // indigo-900/50 dark
|
||
: const Color(0xFFE0E7FF); // indigo-100
|
||
} else {
|
||
return Colors.transparent;
|
||
}
|
||
}
|
||
|
||
void _toggleExpanded() {
|
||
setState(() {
|
||
_isExpanded = !_isExpanded;
|
||
});
|
||
}
|
||
}
|