458 lines
16 KiB
Dart
458 lines
16 KiB
Dart
import 'package:flutter/material.dart';
|
||
import 'package:ainoval/models/user_ai_model_config_model.dart';
|
||
import 'package:ainoval/screens/editor/widgets/menu_builder.dart';
|
||
import '../../../config/provider_icons.dart';
|
||
|
||
/// 模型提供商分组卡片
|
||
/// 显示提供商信息和其下的模型列表
|
||
class ModelProviderGroupCard extends StatelessWidget {
|
||
const ModelProviderGroupCard({
|
||
super.key,
|
||
required this.provider,
|
||
required this.providerName,
|
||
required this.description,
|
||
required this.icon,
|
||
required this.color,
|
||
required this.configs,
|
||
required this.isExpanded,
|
||
required this.onToggleExpanded,
|
||
required this.onAddModel,
|
||
required this.onSetDefault,
|
||
required this.onValidate,
|
||
required this.onEdit,
|
||
required this.onDelete,
|
||
});
|
||
|
||
final String provider;
|
||
final String providerName;
|
||
final String description;
|
||
final IconData icon;
|
||
final Color color;
|
||
final List<UserAIModelConfigModel> configs;
|
||
final bool isExpanded;
|
||
final VoidCallback onToggleExpanded;
|
||
final VoidCallback onAddModel;
|
||
final Function(String) onSetDefault;
|
||
final Function(String) onValidate;
|
||
final Function(String) onEdit;
|
||
final Function(String) onDelete;
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final theme = Theme.of(context);
|
||
final isDark = theme.brightness == Brightness.dark;
|
||
|
||
// 统计验证状态
|
||
final verifiedCount = configs.where((c) => c.isValidated).length;
|
||
final totalCount = configs.length;
|
||
|
||
// 查找在当前提供商组内的默认模型
|
||
final defaultConfig = configs.firstWhere(
|
||
(c) => c.isDefault,
|
||
orElse: () => UserAIModelConfigModel.empty(),
|
||
);
|
||
|
||
// 只有当默认模型真正在当前组内时才显示
|
||
final hasDefaultInThisGroup = defaultConfig.id.isNotEmpty;
|
||
|
||
return Container(
|
||
decoration: BoxDecoration(
|
||
color: theme.colorScheme.surface,
|
||
borderRadius: BorderRadius.circular(12),
|
||
border: Border.all(
|
||
color: theme.colorScheme.outline.withOpacity(0.15),
|
||
width: 1,
|
||
),
|
||
boxShadow: [
|
||
BoxShadow(
|
||
color: Colors.black.withOpacity(isDark ? 0.3 : 0.1),
|
||
blurRadius: 8,
|
||
offset: const Offset(0, 2),
|
||
),
|
||
],
|
||
),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
// 提供商头部
|
||
InkWell(
|
||
onTap: onToggleExpanded,
|
||
borderRadius: const BorderRadius.vertical(top: Radius.circular(12)),
|
||
child: Container(
|
||
padding: const EdgeInsets.all(16),
|
||
child: Row(
|
||
children: [
|
||
// 提供商图标
|
||
Container(
|
||
width: 48,
|
||
height: 48,
|
||
decoration: BoxDecoration(
|
||
color: color.withOpacity(0.1),
|
||
borderRadius: BorderRadius.circular(12),
|
||
border: Border.all(
|
||
color: color.withOpacity(0.3),
|
||
width: 1,
|
||
),
|
||
),
|
||
child: ProviderIcons.getProviderIconForContext(
|
||
provider,
|
||
iconSize: IconSize.large,
|
||
),
|
||
),
|
||
const SizedBox(width: 16),
|
||
|
||
// 提供商信息
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
providerName,
|
||
style: theme.textTheme.titleMedium?.copyWith(
|
||
fontWeight: FontWeight.bold,
|
||
color: theme.colorScheme.onSurface,
|
||
),
|
||
),
|
||
const SizedBox(height: 4),
|
||
Text(
|
||
description,
|
||
style: theme.textTheme.bodySmall?.copyWith(
|
||
color: theme.colorScheme.onSurface.withOpacity(0.7),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
|
||
const SizedBox(width: 16),
|
||
|
||
// 右侧状态信息（根据HTML样式改进）
|
||
_buildRightSideInfo(context, verifiedCount, totalCount, defaultConfig, hasDefaultInThisGroup),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
|
||
// 分隔线
|
||
if (isExpanded)
|
||
Divider(
|
||
height: 1,
|
||
color: theme.colorScheme.outline.withOpacity(0.2),
|
||
indent: 16,
|
||
endIndent: 16,
|
||
),
|
||
|
||
// 模型列表
|
||
if (isExpanded)
|
||
Container(
|
||
padding: const EdgeInsets.all(16),
|
||
child: Column(
|
||
children: [
|
||
// 模型项列表
|
||
...configs.map((config) => _buildModelItem(context, config)),
|
||
|
||
const SizedBox(height: 12),
|
||
|
||
// 添加模型按钮
|
||
SizedBox(
|
||
width: double.infinity,
|
||
child: OutlinedButton.icon(
|
||
onPressed: onAddModel,
|
||
icon: const Icon(Icons.add, size: 16),
|
||
label: const Text('添加模型'),
|
||
style: OutlinedButton.styleFrom(
|
||
padding: const EdgeInsets.symmetric(vertical: 12),
|
||
side: BorderSide(
|
||
color: theme.colorScheme.outline.withOpacity(0.5),
|
||
),
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(8),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
// 构建右侧状态信息，参考HTML结构
|
||
Widget _buildRightSideInfo(BuildContext context, int verifiedCount, int totalCount,
|
||
UserAIModelConfigModel defaultConfig, bool hasDefaultInThisGroup) {
|
||
final theme = Theme.of(context);
|
||
final isDark = theme.brightness == Brightness.dark;
|
||
|
||
return Container(
|
||
constraints: const BoxConstraints(minWidth: 120),
|
||
child: Row(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
// 桌面端显示（sm及以上）
|
||
LayoutBuilder(
|
||
builder: (context, constraints) {
|
||
final isSmallScreen = MediaQuery.of(context).size.width < 640;
|
||
|
||
if (isSmallScreen) {
|
||
// 移动端简化显示
|
||
return Row(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Text(
|
||
'$verifiedCount/$totalCount',
|
||
style: TextStyle(
|
||
fontSize: 12,
|
||
color: theme.colorScheme.onSurface.withOpacity(0.6),
|
||
),
|
||
),
|
||
const SizedBox(width: 8),
|
||
_buildChevronIcon(isDark),
|
||
],
|
||
);
|
||
} else {
|
||
// 桌面端完整显示
|
||
return Row(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
// 状态显示
|
||
Text(
|
||
'$verifiedCount/$totalCount 已启用',
|
||
style: TextStyle(
|
||
fontSize: 12,
|
||
color: theme.colorScheme.onSurface.withOpacity(0.6),
|
||
),
|
||
),
|
||
|
||
const SizedBox(width: 12),
|
||
|
||
// 默认模型显示（只有当前组有默认模型时才显示）
|
||
if (hasDefaultInThisGroup)
|
||
Container(
|
||
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
|
||
decoration: BoxDecoration(
|
||
border: Border.all(
|
||
color: theme.colorScheme.outline.withOpacity(0.3),
|
||
width: 1,
|
||
),
|
||
borderRadius: BorderRadius.circular(20),
|
||
color: theme.colorScheme.surface,
|
||
),
|
||
child: Text(
|
||
'默认: ${defaultConfig.alias}',
|
||
style: TextStyle(
|
||
fontSize: 11,
|
||
fontWeight: FontWeight.w600,
|
||
color: theme.colorScheme.onSurface,
|
||
),
|
||
),
|
||
),
|
||
|
||
const SizedBox(width: 8),
|
||
|
||
_buildChevronIcon(isDark),
|
||
],
|
||
);
|
||
}
|
||
},
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
// 构建Chevron图标
|
||
Widget _buildChevronIcon(bool isDark) {
|
||
return AnimatedRotation(
|
||
turns: isExpanded ? 0.25 : 0, // 90度旋转
|
||
duration: const Duration(milliseconds: 200),
|
||
child: Icon(
|
||
Icons.chevron_right,
|
||
size: 16,
|
||
color: isDark ? Colors.white.withOpacity(0.7) : Colors.black.withOpacity(0.7),
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildModelItem(BuildContext context, UserAIModelConfigModel config) {
|
||
final theme = Theme.of(context);
|
||
final isDark = theme.brightness == Brightness.dark;
|
||
|
||
return Container(
|
||
margin: const EdgeInsets.only(bottom: 8),
|
||
padding: const EdgeInsets.all(12),
|
||
decoration: BoxDecoration(
|
||
color: config.isDefault
|
||
? theme.colorScheme.primary.withOpacity(0.1)
|
||
: theme.colorScheme.surfaceContainerHighest.withOpacity(0.3),
|
||
borderRadius: BorderRadius.circular(8),
|
||
border: Border.all(
|
||
color: config.isDefault
|
||
? theme.colorScheme.primary.withOpacity(0.3)
|
||
: theme.colorScheme.outline.withOpacity(0.2),
|
||
width: 1,
|
||
),
|
||
),
|
||
child: Row(
|
||
children: [
|
||
// 模型状态图标
|
||
Container(
|
||
width: 32,
|
||
height: 32,
|
||
decoration: BoxDecoration(
|
||
color: config.isValidated
|
||
? Colors.green.withOpacity(0.1)
|
||
: Colors.orange.withOpacity(0.1),
|
||
shape: BoxShape.circle,
|
||
border: Border.all(
|
||
color: config.isValidated
|
||
? Colors.green.withOpacity(0.3)
|
||
: Colors.orange.withOpacity(0.3),
|
||
width: 1,
|
||
),
|
||
),
|
||
child: Icon(
|
||
config.isValidated ? Icons.check_circle : Icons.access_time,
|
||
color: config.isValidated ? Colors.green : Colors.orange,
|
||
size: 16,
|
||
),
|
||
),
|
||
const SizedBox(width: 12),
|
||
|
||
// 模型信息
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Row(
|
||
children: [
|
||
Text(
|
||
config.alias,
|
||
style: theme.textTheme.bodyMedium?.copyWith(
|
||
fontWeight: FontWeight.w500,
|
||
color: isDark ? Colors.white : Colors.black,
|
||
),
|
||
),
|
||
if (config.isDefault) ...[
|
||
const SizedBox(width: 8),
|
||
Container(
|
||
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
|
||
decoration: BoxDecoration(
|
||
color: theme.colorScheme.primary,
|
||
borderRadius: BorderRadius.circular(4),
|
||
),
|
||
child: Text(
|
||
'默认',
|
||
style: TextStyle(
|
||
fontSize: 10,
|
||
fontWeight: FontWeight.bold,
|
||
color: theme.colorScheme.onPrimary,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
],
|
||
),
|
||
const SizedBox(height: 2),
|
||
Text(
|
||
config.modelName,
|
||
style: theme.textTheme.bodySmall?.copyWith(
|
||
color: theme.colorScheme.onSurface.withOpacity(0.7),
|
||
fontFamily: 'monospace',
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
|
||
// 价格信息（模拟数据）
|
||
Container(
|
||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||
decoration: BoxDecoration(
|
||
color: theme.colorScheme.surfaceContainerHighest.withOpacity(0.5),
|
||
borderRadius: BorderRadius.circular(4),
|
||
),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.end,
|
||
children: [
|
||
Text(
|
||
'\$0.03',
|
||
style: theme.textTheme.bodySmall?.copyWith(
|
||
fontWeight: FontWeight.bold,
|
||
color: theme.colorScheme.onSurface,
|
||
),
|
||
),
|
||
Text(
|
||
'输入',
|
||
style: theme.textTheme.bodySmall?.copyWith(
|
||
fontSize: 10,
|
||
color: theme.colorScheme.onSurface.withOpacity(0.6),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
const SizedBox(width: 8),
|
||
Container(
|
||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||
decoration: BoxDecoration(
|
||
color: theme.colorScheme.surfaceContainerHighest.withOpacity(0.5),
|
||
borderRadius: BorderRadius.circular(4),
|
||
),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.end,
|
||
children: [
|
||
Text(
|
||
'\$0.06',
|
||
style: theme.textTheme.bodySmall?.copyWith(
|
||
fontWeight: FontWeight.bold,
|
||
color: theme.colorScheme.onSurface,
|
||
),
|
||
),
|
||
Text(
|
||
'输出',
|
||
style: theme.textTheme.bodySmall?.copyWith(
|
||
fontSize: 10,
|
||
color: theme.colorScheme.onSurface.withOpacity(0.6),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
const SizedBox(width: 8),
|
||
Container(
|
||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||
decoration: BoxDecoration(
|
||
color: theme.colorScheme.surfaceContainerHighest.withOpacity(0.5),
|
||
borderRadius: BorderRadius.circular(4),
|
||
),
|
||
child: Text(
|
||
'每千标记',
|
||
style: theme.textTheme.bodySmall?.copyWith(
|
||
fontSize: 10,
|
||
color: theme.colorScheme.onSurface.withOpacity(0.6),
|
||
),
|
||
),
|
||
),
|
||
|
||
const SizedBox(width: 12),
|
||
|
||
// 操作按钮
|
||
MenuBuilder.buildModelMenu(
|
||
context: context,
|
||
configId: config.id,
|
||
isValidated: config.isValidated,
|
||
isDefault: config.isDefault,
|
||
onValidate: (configId) async => onValidate(configId),
|
||
onSetDefault: (configId) async => onSetDefault(configId),
|
||
onEdit: (configId) async => onEdit(configId),
|
||
onDelete: (configId) async => onDelete(configId),
|
||
width: 180,
|
||
align: 'right',
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
} |