727 lines
24 KiB
Dart
727 lines
24 KiB
Dart
import 'package:elysia/page/child/EditorRobotPage.dart';
|
||
import 'package:elysia/page/child/RobotProfilePage.dart';
|
||
import 'package:elysia/page/child/RobotSquarePage.dart';
|
||
import 'package:elysia/plugin/HiverCache.dart';
|
||
import 'package:elysia/plugin/RouteAnimation.dart';
|
||
import 'package:elysia/plugin/Toast.dart';
|
||
import 'package:flutter/material.dart';
|
||
import 'package:shimmer/shimmer.dart';
|
||
import 'package:flutter_slidable/flutter_slidable.dart';
|
||
|
||
import '../bean/Mappable.dart';
|
||
import '../plugin/C.dart';
|
||
import '../plugin/CacheAavatar.dart';
|
||
import '../plugin/HTTP.dart';
|
||
import 'package:oktoast/oktoast.dart';
|
||
|
||
import '../plugin/LoadingOverlay.dart';
|
||
|
||
class FollowListPage extends StatefulWidget {
|
||
const FollowListPage({Key? key}) : super(key: key);
|
||
static Function(bool)? flushData;
|
||
static Function(int)? delete;
|
||
|
||
@override
|
||
State<FollowListPage> createState() => _FollowListPageState();
|
||
}
|
||
|
||
class _FollowListPageState extends State<FollowListPage>
|
||
with AutomaticKeepAliveClientMixin {
|
||
List<FollowItem> _list = [];
|
||
bool _loading = true;
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
FollowListPage.flushData = (status) {
|
||
_list = [];
|
||
_loading = true;
|
||
fetchFollowList(status);
|
||
};
|
||
FollowListPage.delete = (id) {
|
||
_removeById(id);
|
||
};
|
||
fetchFollowList(false);
|
||
}
|
||
|
||
Future<void> fetchFollowList(bool status) async {
|
||
try {
|
||
_loading = false;
|
||
List<int> cacheId = [];
|
||
List<FollowItem> cacheData =
|
||
await HiverCache.getCache(
|
||
C.HIVE_CACHE_FETCH_FOLLOW,
|
||
FollowItem.fromJson,
|
||
) ??
|
||
[];
|
||
setState(() {
|
||
_list = cacheData;
|
||
});
|
||
if (_list.length == 0 || status) {
|
||
_loading = true;
|
||
} else {
|
||
if (!status) {
|
||
for (FollowItem followItem in cacheData) {
|
||
cacheId.add(followItem.robotId);
|
||
}
|
||
}
|
||
}
|
||
|
||
dynamic result = await HTTP
|
||
.create("${C.BASE_URL}/robot/follow-list")
|
||
.setHeader(C.TOKEN)
|
||
.setParam({"cacheId": cacheId})
|
||
.setRequestType(RequestType.GET)
|
||
.execute();
|
||
if (result['code'] == 200) {
|
||
setState(() {
|
||
if (status) {
|
||
_list = [];
|
||
}
|
||
//判定是否有要删除的ID
|
||
List<dynamic> excludeIdList = result['data']["excludeIdList"] ?? [];
|
||
if (excludeIdList != null || excludeIdList.length != 0) {
|
||
for (dynamic id in excludeIdList) {
|
||
int index = -1;
|
||
for (int i = 0; i < _list.length; i++) {
|
||
if (_list[i].robotId.toString() == id.toString()) {
|
||
index = i;
|
||
break;
|
||
}
|
||
}
|
||
if (index != -1) {
|
||
_list.removeAt(index);
|
||
}
|
||
}
|
||
}
|
||
List<Map<String, dynamic>> listOfMap =
|
||
(result['data']["data"] as List).cast<Map<String, dynamic>>();
|
||
if (listOfMap.length != 0) {
|
||
for (Map<String, dynamic> d in listOfMap) {
|
||
_list.add(FollowItem.fromJson(d));
|
||
}
|
||
}
|
||
_loading = false;
|
||
HiverCache.cache(C.HIVE_CACHE_FETCH_FOLLOW, _list);
|
||
});
|
||
} else {
|
||
setState(() => _loading = false);
|
||
}
|
||
} catch (e) {
|
||
setState(() => _loading = false);
|
||
}
|
||
}
|
||
|
||
void _removeAt(int index) {
|
||
setState(() {
|
||
_list.removeAt(index);
|
||
HiverCache.cache(C.HIVE_CACHE_FETCH_FOLLOW, _list);
|
||
});
|
||
}
|
||
|
||
void _removeById(int id) {
|
||
int index = -1;
|
||
for (int i = 0; i < _list.length; i++) {
|
||
if (_list[i].robotId == id) {
|
||
index = i;
|
||
break;
|
||
}
|
||
}
|
||
if (index != -1) {
|
||
_removeAt(index);
|
||
}
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Scaffold(
|
||
body: Column(
|
||
children: [
|
||
SizedBox(
|
||
child: Column(
|
||
children: [
|
||
Padding(
|
||
padding: EdgeInsets.symmetric(horizontal: 5),
|
||
child: GestureDetector(
|
||
onTap: () async {
|
||
bool status = await Navigator.push(
|
||
context,
|
||
RouteAnimation(RobotSquarePage(), Offset(1, 0)),
|
||
);
|
||
if (status) {
|
||
setState(() {
|
||
_list = [];
|
||
_loading = true;
|
||
fetchFollowList(false);
|
||
});
|
||
}
|
||
},
|
||
child: Container(
|
||
decoration: BoxDecoration(
|
||
color: Colors.grey[200],
|
||
borderRadius: BorderRadius.circular(5),
|
||
),
|
||
child: Padding(
|
||
padding: EdgeInsets.symmetric(
|
||
horizontal: 10,
|
||
vertical: 5,
|
||
),
|
||
child: Row(
|
||
children: [
|
||
// Avatar（带圆角和 Shimmer）
|
||
ClipRRect(
|
||
borderRadius: BorderRadius.circular(8),
|
||
child: SizedBox(
|
||
width: 48,
|
||
height: 50,
|
||
child: Container(
|
||
decoration: BoxDecoration(color: Colors.blue),
|
||
child: Icon(Icons.group, color: Colors.white),
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(width: 12),
|
||
// 名称与其它信息（这里仅显示 name）
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
"机器人广场",
|
||
style: const TextStyle(
|
||
fontSize: 16,
|
||
fontWeight: FontWeight.w600,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
Expanded(child: SizedBox()),
|
||
Icon(Icons.chevron_right, color: Colors.grey),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
SizedBox(height: 10),
|
||
Divider(height: 1, thickness: 1, color: Colors.grey.shade300),
|
||
],
|
||
),
|
||
),
|
||
SizedBox(height: 10),
|
||
Expanded(
|
||
child: _loading
|
||
? ListView.builder(
|
||
itemCount: 10,
|
||
itemBuilder: (context, index) => const ShimmerFollowTile(),
|
||
)
|
||
: ClipRect(
|
||
child: ListView.builder(
|
||
itemCount: _list.length,
|
||
itemBuilder: (context, index) {
|
||
final item = _list[index];
|
||
return FollowTile(
|
||
item: item,
|
||
onDelete: () => unfollowRobot(index),
|
||
onClick: () {
|
||
Navigator.push(
|
||
context,
|
||
RouteAnimation(
|
||
RobotProfilePage(
|
||
robotId: item.robotId,
|
||
name: item.name,
|
||
avatar: item.avatar,
|
||
systemPrompt: item.systemPrompt,
|
||
creatorUsername: "开发中...",
|
||
template: "开发中...",
|
||
description: item.describe,
|
||
followList: true,
|
||
),
|
||
Offset(1, 0),
|
||
),
|
||
);
|
||
},
|
||
);
|
||
},
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
Future<void> unfollowRobot(int index) async {
|
||
LoadingOverlay.show(context: context, barrierColor: Colors.black54);
|
||
try {
|
||
dynamic result = await HTTP
|
||
.create("${C.BASE_URL}/robot/unfollow/${_list[index].robotId}")
|
||
.setHeader(C.TOKEN)
|
||
.setRequestType(RequestType.GET)
|
||
.execute();
|
||
LoadingOverlay.hide();
|
||
if (result["code"] == 200) {
|
||
_removeAt(index);
|
||
}
|
||
} catch (e) {
|
||
LoadingOverlay.hide();
|
||
}
|
||
}
|
||
|
||
@override
|
||
bool get wantKeepAlive => true;
|
||
}
|
||
|
||
/// 数据模型
|
||
class FollowItem extends Mappable<FollowItem> {
|
||
final int robotId;
|
||
final String name;
|
||
final String avatar; // 头像 URL
|
||
final bool creator;
|
||
final String systemPrompt;
|
||
final String describe;
|
||
|
||
FollowItem({
|
||
required this.robotId,
|
||
required this.name,
|
||
required this.avatar,
|
||
required this.systemPrompt,
|
||
required this.creator,
|
||
required this.describe,
|
||
});
|
||
|
||
factory FollowItem.fromJson(Map<String, dynamic> json) {
|
||
return FollowItem(
|
||
robotId: json['robotId'] ?? -1,
|
||
name: json['name'] ?? '',
|
||
avatar: json['avatar'] ?? '',
|
||
describe: json['describe'] ?? '',
|
||
systemPrompt: json['systemPrompt'] ?? '',
|
||
creator: json['creator'] == 1 || json['creator'] == true,
|
||
);
|
||
}
|
||
|
||
@override
|
||
Map<String, dynamic> toMap() {
|
||
return {
|
||
"robotId": robotId,
|
||
"name": name,
|
||
"avatar": avatar,
|
||
"describe": describe,
|
||
"systemPrompt": systemPrompt,
|
||
"creator": creator,
|
||
};
|
||
}
|
||
}
|
||
|
||
/// 真正的数据行（支持 Slidable 删除）
|
||
class FollowTile extends StatelessWidget {
|
||
final FollowItem item;
|
||
final VoidCallback? onDelete;
|
||
final VoidCallback? onClick;
|
||
|
||
const FollowTile({Key? key, required this.item, this.onDelete, this.onClick})
|
||
: super(key: key);
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Padding(
|
||
padding: EdgeInsets.symmetric(vertical: 2),
|
||
child: Slidable(
|
||
key: ValueKey(item.robotId),
|
||
endActionPane: ActionPane(
|
||
motion: const DrawerMotion(),
|
||
extentRatio: 0.25,
|
||
children: [
|
||
SlidableAction(
|
||
onPressed: (ctx) {
|
||
if (onDelete != null) onDelete!(); // ✅ 这里会正确调用 unfollowRobot
|
||
},
|
||
backgroundColor: Colors.amber,
|
||
foregroundColor: Colors.white,
|
||
icon: Icons.heart_broken,
|
||
label: '取消关注',
|
||
spacing: 4,
|
||
borderRadius: BorderRadius.circular(5),
|
||
autoClose: true,
|
||
)
|
||
],
|
||
),
|
||
child: GestureDetector(
|
||
onTap: () {
|
||
if (onClick != null) onClick!();
|
||
},
|
||
child: Stack(
|
||
children: [
|
||
Padding(
|
||
padding: EdgeInsets.symmetric(horizontal: 5),
|
||
child: Container(
|
||
decoration: BoxDecoration(
|
||
color: Colors.grey[200],
|
||
borderRadius: BorderRadius.circular(5),
|
||
),
|
||
child: Padding(
|
||
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
|
||
child: Row(
|
||
children: [
|
||
// Avatar（带圆角和 Shimmer）
|
||
CacheAvatar(url: item.avatar),
|
||
const SizedBox(width: 12),
|
||
// 名称与其它信息（这里仅显示 name）
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
item.name,
|
||
style: const TextStyle(
|
||
fontSize: 16,
|
||
fontWeight: FontWeight.w600,
|
||
),
|
||
),
|
||
SizedBox(height: 5),
|
||
Text(
|
||
item.describe,
|
||
style: const TextStyle(
|
||
fontSize: 12,
|
||
color: Colors.grey,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
),
|
||
if (item.creator)
|
||
Positioned(
|
||
right: 5,
|
||
top: 0,
|
||
child: Container(
|
||
padding: const EdgeInsets.all(4),
|
||
decoration: BoxDecoration(
|
||
color: Colors.orange,
|
||
borderRadius: BorderRadius.only(
|
||
topRight: Radius.circular(5),
|
||
bottomLeft: Radius.circular(5),
|
||
),
|
||
),
|
||
child: const Icon(
|
||
Icons.person, // 人头图标
|
||
size: 14,
|
||
color: Colors.white,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
/// Shimmer 占位行（加载时显示）
|
||
class ShimmerFollowTile extends StatelessWidget {
|
||
const ShimmerFollowTile({Key? key}) : super(key: key);
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
// 高度与真实行相似，保持视觉一致
|
||
return Container(
|
||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
|
||
child: Row(
|
||
children: [
|
||
Shimmer.fromColors(
|
||
baseColor: Colors.grey.shade300,
|
||
highlightColor: Colors.grey.shade100,
|
||
child: Container(
|
||
width: 48,
|
||
height: 48,
|
||
decoration: BoxDecoration(
|
||
color: Colors.white,
|
||
borderRadius: BorderRadius.circular(8),
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(width: 12),
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Shimmer.fromColors(
|
||
baseColor: Colors.grey.shade300,
|
||
highlightColor: Colors.grey.shade100,
|
||
child: Container(
|
||
height: 16,
|
||
width: double.infinity,
|
||
color: Colors.white,
|
||
),
|
||
),
|
||
const SizedBox(height: 8),
|
||
Shimmer.fromColors(
|
||
baseColor: Colors.grey.shade300,
|
||
highlightColor: Colors.grey.shade100,
|
||
child: Container(
|
||
height: 14,
|
||
width: MediaQuery.of(context).size.width * 0.5,
|
||
color: Colors.white,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
class ChatRoomDialog extends StatefulWidget {
|
||
final List<Map<String, String>> options; // 下拉选择的数据
|
||
final Function(String roomName, String value) onConfirm;
|
||
|
||
const ChatRoomDialog({
|
||
Key? key,
|
||
required this.options,
|
||
required this.onConfirm,
|
||
}) : super(key: key);
|
||
|
||
@override
|
||
State<ChatRoomDialog> createState() => _ChatRoomDialogState();
|
||
}
|
||
|
||
class _ChatRoomDialogState extends State<ChatRoomDialog> {
|
||
final TextEditingController _roomController = TextEditingController();
|
||
String? _selectedValue;
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
if (widget.options.isNotEmpty) {
|
||
_selectedValue = widget.options[0]['value'];
|
||
}
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final theme = Theme.of(context);
|
||
final isDark = theme.brightness == Brightness.dark;
|
||
|
||
return Dialog(
|
||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
|
||
elevation: 0,
|
||
backgroundColor: Colors.transparent,
|
||
insetPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 24),
|
||
child: _dialogContent(context, theme, isDark),
|
||
);
|
||
}
|
||
|
||
Widget _dialogContent(BuildContext context, ThemeData theme, bool isDark) {
|
||
return Container(
|
||
padding: EdgeInsets.all(24),
|
||
decoration: BoxDecoration(
|
||
color: theme.colorScheme.surface,
|
||
borderRadius: BorderRadius.circular(24),
|
||
boxShadow: [
|
||
BoxShadow(
|
||
color: Colors.black.withOpacity(0.2),
|
||
blurRadius: 20,
|
||
spreadRadius: 0,
|
||
offset: Offset(0, 8),
|
||
),
|
||
],
|
||
),
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
// Title
|
||
Text(
|
||
"创建聊天室",
|
||
style: TextStyle(
|
||
fontSize: 20,
|
||
fontWeight: FontWeight.w700,
|
||
color: theme.colorScheme.onSurface,
|
||
),
|
||
),
|
||
SizedBox(height: 8),
|
||
Text(
|
||
"设置您的聊天室名称并选择AI引擎",
|
||
style: TextStyle(
|
||
fontSize: 14,
|
||
color: theme.colorScheme.onSurface.withOpacity(0.6),
|
||
),
|
||
),
|
||
SizedBox(height: 24),
|
||
|
||
// Chat room name field
|
||
Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
"聊天室名称",
|
||
style: TextStyle(
|
||
fontWeight: FontWeight.w500,
|
||
color: theme.colorScheme.onSurface.withOpacity(0.8),
|
||
fontSize: 14,
|
||
),
|
||
),
|
||
SizedBox(height: 8),
|
||
Container(
|
||
decoration: BoxDecoration(
|
||
borderRadius: BorderRadius.circular(16),
|
||
boxShadow: [
|
||
BoxShadow(
|
||
color: theme.colorScheme.primary.withOpacity(0.1),
|
||
blurRadius: 4,
|
||
offset: Offset(0, 2),
|
||
),
|
||
],
|
||
),
|
||
child: TextField(
|
||
controller: _roomController,
|
||
decoration: InputDecoration(
|
||
hintText: "请输入聊天室名称",
|
||
filled: true,
|
||
fillColor: isDark
|
||
? theme.colorScheme.surfaceVariant
|
||
: Colors.grey[50],
|
||
contentPadding: EdgeInsets.symmetric(
|
||
horizontal: 16,
|
||
vertical: 14,
|
||
),
|
||
border: OutlineInputBorder(
|
||
borderRadius: BorderRadius.circular(16),
|
||
borderSide: BorderSide.none,
|
||
),
|
||
focusedBorder: OutlineInputBorder(
|
||
borderRadius: BorderRadius.circular(16),
|
||
borderSide: BorderSide(
|
||
color: theme.colorScheme.primary,
|
||
width: 1.5,
|
||
),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
SizedBox(height: 20),
|
||
|
||
// Engine selection
|
||
Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
"选择引擎",
|
||
style: TextStyle(
|
||
fontWeight: FontWeight.w500,
|
||
color: theme.colorScheme.onSurface.withOpacity(0.8),
|
||
fontSize: 14,
|
||
),
|
||
),
|
||
SizedBox(height: 8),
|
||
Container(
|
||
decoration: BoxDecoration(
|
||
borderRadius: BorderRadius.circular(16),
|
||
color: isDark
|
||
? theme.colorScheme.surfaceVariant
|
||
: Colors.grey[50],
|
||
boxShadow: [
|
||
BoxShadow(
|
||
color: theme.colorScheme.primary.withOpacity(0.1),
|
||
blurRadius: 4,
|
||
offset: Offset(0, 2),
|
||
),
|
||
],
|
||
),
|
||
padding: EdgeInsets.symmetric(horizontal: 12),
|
||
child: DropdownButtonHideUnderline(
|
||
child: DropdownButton<String>(
|
||
value: _selectedValue,
|
||
isExpanded: true,
|
||
icon: Icon(
|
||
Icons.keyboard_arrow_down_rounded,
|
||
color: theme.colorScheme.onSurface.withOpacity(0.6),
|
||
),
|
||
borderRadius: BorderRadius.circular(16),
|
||
dropdownColor: isDark
|
||
? theme.colorScheme.surfaceVariant
|
||
: Colors.white,
|
||
style: TextStyle(
|
||
color: theme.colorScheme.onSurface,
|
||
fontSize: 16,
|
||
),
|
||
items: widget.options.map((option) {
|
||
return DropdownMenuItem<String>(
|
||
value: option['value'],
|
||
child: Padding(
|
||
padding: EdgeInsets.symmetric(vertical: 8),
|
||
child: Text(option['key'] ?? ''),
|
||
),
|
||
);
|
||
}).toList(),
|
||
onChanged: (val) {
|
||
setState(() {
|
||
_selectedValue = val;
|
||
});
|
||
},
|
||
selectedItemBuilder: (BuildContext context) {
|
||
return widget.options.map<Widget>((item) {
|
||
return Align(
|
||
alignment: Alignment.centerLeft,
|
||
child: Text(
|
||
item['key'] ?? '',
|
||
style: TextStyle(
|
||
color: theme.colorScheme.onSurface,
|
||
fontWeight: FontWeight.w500,
|
||
),
|
||
),
|
||
);
|
||
}).toList();
|
||
},
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
SizedBox(height: 32),
|
||
|
||
// Confirm button
|
||
SizedBox(
|
||
width: double.infinity,
|
||
child: ElevatedButton(
|
||
style: ElevatedButton.styleFrom(
|
||
padding: EdgeInsets.symmetric(vertical: 16),
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(16),
|
||
),
|
||
backgroundColor: theme.colorScheme.primary,
|
||
foregroundColor: theme.colorScheme.onPrimary,
|
||
elevation: 0,
|
||
shadowColor: Colors.transparent,
|
||
),
|
||
onPressed: () {
|
||
if (_roomController.text.isEmpty || _selectedValue == null) {
|
||
showToast("请填写完整信息", position: ToastPosition.center);
|
||
return;
|
||
}
|
||
widget.onConfirm(_roomController.text, _selectedValue!);
|
||
Navigator.of(context).pop();
|
||
},
|
||
child: Text(
|
||
"创建聊天室",
|
||
style: TextStyle(fontWeight: FontWeight.w600, fontSize: 16),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|