mirror of
https://github.com/qinglong-app/qinglong_app.git
synced 2025-10-09 16:48:19 +08:00
优化搜索框样式,优化任务列表,环境变量等相关页面使用体验
This commit is contained in:
@@ -37,76 +37,99 @@ class _LoginLogPageState extends ConsumerState<LoginLogPage>
|
||||
),
|
||||
body: list.isEmpty
|
||||
? const Center(
|
||||
child: CupertinoActivityIndicator(),
|
||||
)
|
||||
: ListView.builder(
|
||||
itemBuilder: (context, index) {
|
||||
LoginLogBean item = list[index];
|
||||
child: CupertinoActivityIndicator(),
|
||||
)
|
||||
: ListView.separated(
|
||||
itemBuilder: (context, index) {
|
||||
LoginLogBean item = list[index];
|
||||
|
||||
return ColoredBox(
|
||||
color: ref.watch(themeProvider).themeColor.settingBgColor(),
|
||||
child: ListTile(
|
||||
isThreeLine: true,
|
||||
title: Text(
|
||||
Utils.formatMessageTime(item.timestamp ?? 0),
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
color: ref.watch(themeProvider).themeColor.titleColor(),
|
||||
),
|
||||
),
|
||||
subtitle: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const SizedBox(
|
||||
height: 5,
|
||||
),
|
||||
SelectableText(
|
||||
"${item.address}",
|
||||
selectionWidthStyle: BoxWidthStyle.max,
|
||||
selectionHeightStyle: BoxHeightStyle.max,
|
||||
style: TextStyle(
|
||||
color:
|
||||
ref.watch(themeProvider).themeColor.descColor(),
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 5,
|
||||
),
|
||||
SelectableText(
|
||||
"${item.ip}",
|
||||
selectionWidthStyle: BoxWidthStyle.max,
|
||||
selectionHeightStyle: BoxHeightStyle.max,
|
||||
style: TextStyle(
|
||||
color:
|
||||
ref.watch(themeProvider).themeColor.descColor(),
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
trailing: item.status == 0
|
||||
? Icon(
|
||||
CupertinoIcons.checkmark_circle,
|
||||
color: ref.watch(themeProvider).primaryColor,
|
||||
size: 16,
|
||||
)
|
||||
: const Icon(
|
||||
CupertinoIcons.clear_circled,
|
||||
color: Colors.red,
|
||||
size: 16,
|
||||
),
|
||||
return Row(
|
||||
children: [
|
||||
const SizedBox(
|
||||
width: 15,
|
||||
),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const SizedBox(
|
||||
height: 10,
|
||||
),
|
||||
);
|
||||
},
|
||||
itemCount: list.length,
|
||||
),
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
"${item.address}",
|
||||
style: TextStyle(
|
||||
color: ref
|
||||
.watch(themeProvider)
|
||||
.themeColor
|
||||
.titleColor(),
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
width: 5,
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
top: 2,
|
||||
),
|
||||
child: Image.asset(
|
||||
item.status == 0
|
||||
? "assets/images/icon_success.png"
|
||||
: "assets/images/icon_fail.png",
|
||||
width: 30,
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(
|
||||
height: 10,
|
||||
),
|
||||
SelectableText(
|
||||
"${item.ip}",
|
||||
selectionWidthStyle: BoxWidthStyle.max,
|
||||
selectionHeightStyle: BoxHeightStyle.max,
|
||||
style: TextStyle(
|
||||
color:
|
||||
ref.watch(themeProvider).themeColor.descColor(),
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 10,
|
||||
),
|
||||
],
|
||||
),
|
||||
const Spacer(),
|
||||
Text(
|
||||
Utils.formatMessageTime(item.timestamp ?? 0),
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: ref.watch(themeProvider).themeColor.descColor(),
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
width: 15,
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
itemCount: list.length,
|
||||
separatorBuilder: (BuildContext context, int index) {
|
||||
return const Divider(
|
||||
indent: 15,
|
||||
height: 1,
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Future<void> loadData() async {
|
||||
HttpResponse<List<LoginLogBean>> response = await Api.loginLog();
|
||||
HttpResponse<List<LoginLogBean>> response =
|
||||
await Api.loginLog();
|
||||
|
||||
if (response.success) {
|
||||
if (response.bean == null || response.bean!.isEmpty) {
|
||||
|
||||
@@ -26,15 +26,8 @@ class _OtherPageState extends ConsumerState<OtherPage> {
|
||||
children: [
|
||||
Container(
|
||||
margin: const EdgeInsets.symmetric(
|
||||
horizontal: 15,
|
||||
vertical: 15,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: ref.watch(themeProvider).themeColor.settingBordorColor(),
|
||||
borderRadius: const BorderRadius.all(
|
||||
Radius.circular(15),
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
@@ -225,15 +218,8 @@ class _OtherPageState extends ConsumerState<OtherPage> {
|
||||
),
|
||||
Container(
|
||||
margin: const EdgeInsets.symmetric(
|
||||
horizontal: 15,
|
||||
vertical: 15,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: ref.watch(themeProvider).themeColor.settingBordorColor(),
|
||||
borderRadius: const BorderRadius.all(
|
||||
Radius.circular(15),
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
@@ -304,6 +290,41 @@ class _OtherPageState extends ConsumerState<OtherPage> {
|
||||
const Divider(
|
||||
indent: 15,
|
||||
),
|
||||
GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: () {
|
||||
Navigator.of(context).pushNamed(Routes.routeChangeAccount);
|
||||
},
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 15,
|
||||
right: 15,
|
||||
top: 5,
|
||||
bottom: 5,
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
"切换账号",
|
||||
style: TextStyle(
|
||||
color: ref.watch(themeProvider).themeColor.titleColor(),
|
||||
fontSize: 16,
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
const Icon(
|
||||
CupertinoIcons.right_chevron,
|
||||
size: 16,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const Divider(
|
||||
indent: 15,
|
||||
),
|
||||
GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: () {
|
||||
|
||||
@@ -7,6 +7,7 @@ import 'package:qinglong_app/base/ql_app_bar.dart';
|
||||
import 'package:qinglong_app/base/routes.dart';
|
||||
import 'package:qinglong_app/base/theme.dart';
|
||||
import 'package:qinglong_app/base/ui/lazy_load_state.dart';
|
||||
import 'package:qinglong_app/base/ui/search_cell.dart';
|
||||
import 'package:qinglong_app/module/others/scripts/script_bean.dart';
|
||||
import 'package:qinglong_app/utils/extension.dart';
|
||||
|
||||
@@ -170,39 +171,7 @@ class _ScriptPageState extends ConsumerState<ScriptPage> with LazyLoadState<Scri
|
||||
horizontal: 15,
|
||||
vertical: 10,
|
||||
),
|
||||
child: CupertinoSearchTextField(
|
||||
onSubmitted: (value) {
|
||||
setState(() {});
|
||||
},
|
||||
onSuffixTap: () {
|
||||
_searchController.text = "";
|
||||
setState(() {});
|
||||
},
|
||||
controller: _searchController,
|
||||
borderRadius: BorderRadius.circular(
|
||||
30,
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 5,
|
||||
vertical: 5,
|
||||
),
|
||||
suffixInsets: const EdgeInsets.only(
|
||||
right: 15,
|
||||
),
|
||||
prefixInsets: const EdgeInsets.only(
|
||||
top: 6,
|
||||
bottom: 6,
|
||||
left: 15,
|
||||
),
|
||||
placeholderStyle: TextStyle(
|
||||
fontSize: 16,
|
||||
color: context.watch(themeProvider).themeColor.descColor(),
|
||||
),
|
||||
style: const TextStyle(
|
||||
fontSize: 16,
|
||||
),
|
||||
placeholder: "搜索",
|
||||
),
|
||||
child:SearchCell(controller: _searchController,),
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -7,6 +7,7 @@ import 'package:qinglong_app/base/ql_app_bar.dart';
|
||||
import 'package:qinglong_app/base/routes.dart';
|
||||
import 'package:qinglong_app/base/theme.dart';
|
||||
import 'package:qinglong_app/base/ui/lazy_load_state.dart';
|
||||
import 'package:qinglong_app/base/ui/search_cell.dart';
|
||||
import 'package:qinglong_app/module/others/task_log/task_log_bean.dart';
|
||||
import 'package:qinglong_app/utils/extension.dart';
|
||||
|
||||
@@ -20,6 +21,27 @@ class TaskLogPage extends ConsumerStatefulWidget {
|
||||
|
||||
class _TaskLogPageState extends ConsumerState<TaskLogPage> with LazyLoadState<TaskLogPage> {
|
||||
List<TaskLogBean> list = [];
|
||||
final TextEditingController _searchController = TextEditingController();
|
||||
|
||||
Widget searchCell(WidgetRef context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 15,
|
||||
vertical: 10,
|
||||
),
|
||||
child: SearchCell(
|
||||
controller: _searchController,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_searchController.addListener(() {
|
||||
setState(() {});
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@@ -37,72 +59,79 @@ class _TaskLogPageState extends ConsumerState<TaskLogPage> with LazyLoadState<Ta
|
||||
)
|
||||
: ListView.builder(
|
||||
itemBuilder: (context, index) {
|
||||
TaskLogBean item = list[index];
|
||||
|
||||
if (index == 0) {
|
||||
return searchCell(ref);
|
||||
}
|
||||
TaskLogBean item = list[index - 1];
|
||||
if (_searchController.text.isNotEmpty && !(item.name?.contains(_searchController.text) ?? false)) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
return ColoredBox(
|
||||
color: ref.watch(themeProvider).themeColor.settingBgColor(),
|
||||
child: (item.isDir ?? false)
|
||||
? ExpansionTile(
|
||||
title: Text(
|
||||
item.name ?? "",
|
||||
style: TextStyle(
|
||||
color: ref.watch(themeProvider).themeColor.titleColor(),
|
||||
fontSize: 16,
|
||||
),
|
||||
),
|
||||
children: (item.files?.isNotEmpty ?? false)
|
||||
? item.files!
|
||||
.map((e) => ListTile(
|
||||
onTap: () {
|
||||
Navigator.of(context).pushNamed(Routes.routeTaskLogDetail, arguments: {
|
||||
"path": item.name,
|
||||
"title": e,
|
||||
});
|
||||
},
|
||||
title: Text(
|
||||
e,
|
||||
style: TextStyle(
|
||||
color: ref.watch(themeProvider).themeColor.titleColor(),
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
))
|
||||
.toList()
|
||||
: (item.children ?? [])
|
||||
.map((e) => ListTile(
|
||||
onTap: () {
|
||||
Navigator.of(context).pushNamed(Routes.routeTaskLogDetail, arguments: {
|
||||
"path": item.name,
|
||||
"title": e.title,
|
||||
});
|
||||
},
|
||||
title: Text(
|
||||
e.title ?? "",
|
||||
style: TextStyle(
|
||||
color: ref.watch(themeProvider).themeColor.titleColor(),
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
))
|
||||
.toList(),
|
||||
)
|
||||
title: Text(
|
||||
item.name ?? "",
|
||||
style: TextStyle(
|
||||
color: ref.watch(themeProvider).themeColor.titleColor(),
|
||||
fontSize: 16,
|
||||
),
|
||||
),
|
||||
children: (item.files?.isNotEmpty ?? false)
|
||||
? item.files!
|
||||
.map((e) => ListTile(
|
||||
onTap: () {
|
||||
Navigator.of(context).pushNamed(Routes.routeTaskLogDetail, arguments: {
|
||||
"path": item.name,
|
||||
"title": e,
|
||||
});
|
||||
},
|
||||
title: Text(
|
||||
e,
|
||||
style: TextStyle(
|
||||
color: ref.watch(themeProvider).themeColor.titleColor(),
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
))
|
||||
.toList()
|
||||
: (item.children ?? [])
|
||||
.map((e) => ListTile(
|
||||
onTap: () {
|
||||
Navigator.of(context).pushNamed(Routes.routeTaskLogDetail, arguments: {
|
||||
"path": item.name,
|
||||
"title": e.title,
|
||||
});
|
||||
},
|
||||
title: Text(
|
||||
e.title ?? "",
|
||||
style: TextStyle(
|
||||
color: ref.watch(themeProvider).themeColor.titleColor(),
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
))
|
||||
.toList(),
|
||||
)
|
||||
: ListTile(
|
||||
onTap: () {
|
||||
if (item.isDir ?? false) {
|
||||
"该文件夹为空".toast();
|
||||
return;
|
||||
}
|
||||
|
||||
Navigator.of(context).pushNamed(Routes.routeTaskLogDetail, arguments: item.name);
|
||||
},
|
||||
title: Text(
|
||||
item.name ?? "",
|
||||
style: TextStyle(
|
||||
color: ref.watch(themeProvider).themeColor.titleColor(),
|
||||
fontSize: 16,
|
||||
),
|
||||
),
|
||||
),
|
||||
onTap: () {
|
||||
if (item.isDir ?? false) {
|
||||
"该文件夹为空".toast();
|
||||
return;
|
||||
}
|
||||
Navigator.of(context).pushNamed(Routes.routeTaskLogDetail, arguments: {
|
||||
"path": "",
|
||||
"title": item.name,
|
||||
});
|
||||
},
|
||||
title: Text(
|
||||
item.name ?? "",
|
||||
style: TextStyle(
|
||||
color: ref.watch(themeProvider).themeColor.titleColor(),
|
||||
fontSize: 16,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
itemCount: list.length,
|
||||
|
||||
Reference in New Issue
Block a user