mirror of
https://github.com/lollipopkit/flutter_server_box.git
synced 2025-12-17 07:14:28 +01:00
optimization: desktop UI (#747)
This commit is contained in:
@@ -6,17 +6,26 @@ import 'package:server_box/data/model/server/snippet.dart';
|
||||
import 'package:server_box/data/provider/server.dart';
|
||||
import 'package:server_box/data/provider/snippet.dart';
|
||||
|
||||
class SnippetEditPage extends StatefulWidget {
|
||||
const SnippetEditPage({super.key, this.snippet});
|
||||
|
||||
final class SnippetEditPageArgs {
|
||||
final Snippet? snippet;
|
||||
const SnippetEditPageArgs({this.snippet});
|
||||
}
|
||||
|
||||
class SnippetEditPage extends StatefulWidget {
|
||||
final SnippetEditPageArgs? args;
|
||||
|
||||
const SnippetEditPage({super.key, this.args});
|
||||
|
||||
@override
|
||||
State<SnippetEditPage> createState() => _SnippetEditPageState();
|
||||
|
||||
static const route = AppRoute(
|
||||
page: SnippetEditPage.new,
|
||||
path: '/snippets/edit',
|
||||
);
|
||||
}
|
||||
|
||||
class _SnippetEditPageState extends State<SnippetEditPage>
|
||||
with AfterLayoutMixin {
|
||||
class _SnippetEditPageState extends State<SnippetEditPage> with AfterLayoutMixin {
|
||||
final _nameController = TextEditingController();
|
||||
final _scriptController = TextEditingController();
|
||||
final _noteController = TextEditingController();
|
||||
@@ -48,18 +57,19 @@ class _SnippetEditPageState extends State<SnippetEditPage>
|
||||
}
|
||||
|
||||
List<Widget>? _buildAppBarActions() {
|
||||
if (widget.snippet == null) return null;
|
||||
final snippet = widget.args?.snippet;
|
||||
if (snippet == null) return null;
|
||||
return [
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
context.showRoundDialog(
|
||||
title: libL10n.attention,
|
||||
child: Text(libL10n.askContinue(
|
||||
'${libL10n.delete} ${l10n.snippet}(${widget.snippet!.name})',
|
||||
'${libL10n.delete} ${l10n.snippet}(${snippet.name})',
|
||||
)),
|
||||
actions: Btn.ok(
|
||||
onTap: () {
|
||||
SnippetProvider.del(widget.snippet!);
|
||||
SnippetProvider.del(snippet);
|
||||
context.pop();
|
||||
context.pop();
|
||||
},
|
||||
@@ -92,8 +102,9 @@ class _SnippetEditPageState extends State<SnippetEditPage>
|
||||
note: note.isEmpty ? null : note,
|
||||
autoRunOn: _autoRunOn.value.isEmpty ? null : _autoRunOn.value,
|
||||
);
|
||||
if (widget.snippet != null) {
|
||||
SnippetProvider.update(widget.snippet!, snippet);
|
||||
final oldSnippet = widget.args?.snippet;
|
||||
if (oldSnippet != null) {
|
||||
SnippetProvider.update(oldSnippet, snippet);
|
||||
} else {
|
||||
SnippetProvider.add(snippet);
|
||||
}
|
||||
@@ -103,8 +114,7 @@ class _SnippetEditPageState extends State<SnippetEditPage>
|
||||
}
|
||||
|
||||
Widget _buildBody() {
|
||||
return ListView(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 13),
|
||||
return AutoMultiList(
|
||||
children: [
|
||||
Input(
|
||||
autoFocus: true,
|
||||
@@ -148,9 +158,7 @@ class _SnippetEditPageState extends State<SnippetEditPage>
|
||||
builder: (vals) {
|
||||
final subtitle = vals.isEmpty
|
||||
? null
|
||||
: vals
|
||||
.map((e) => ServerProvider.pick(id: e)?.value.spi.name ?? e)
|
||||
.join(', ');
|
||||
: vals.map((e) => ServerProvider.pick(id: e)?.value.spi.name ?? e).join(', ');
|
||||
return ListTile(
|
||||
leading: const Padding(
|
||||
padding: EdgeInsets.only(left: 5),
|
||||
@@ -167,8 +175,7 @@ class _SnippetEditPageState extends State<SnippetEditPage>
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
onTap: () async {
|
||||
vals.removeWhere(
|
||||
(e) => !ServerProvider.serverOrder.value.contains(e));
|
||||
vals.removeWhere((e) => !ServerProvider.serverOrder.value.contains(e));
|
||||
final serverIds = await context.showPickDialog(
|
||||
title: l10n.autoRun,
|
||||
items: ServerProvider.serverOrder.value,
|
||||
@@ -193,9 +200,9 @@ class _SnippetEditPageState extends State<SnippetEditPage>
|
||||
child: SimpleMarkdown(
|
||||
data: '''
|
||||
📌 ${l10n.supportFmtArgs}\n
|
||||
${Snippet.fmtArgs.keys.map((e) => '`$e`').join(', ')}\n
|
||||
${SnippetX.fmtArgs.keys.map((e) => '`$e`').join(', ')}\n
|
||||
|
||||
${Snippet.fmtTermKeys.keys.map((e) => '`$e+?}`').join(', ')}\n
|
||||
${SnippetX.fmtTermKeys.keys.map((e) => '`$e+?}`').join(', ')}\n
|
||||
${libL10n.example}:
|
||||
- `\${ctrl+c}` (Control + C)
|
||||
- `\${ctrl+b}d` (Tmux Detach)
|
||||
@@ -212,7 +219,7 @@ ${libL10n.example}:
|
||||
|
||||
@override
|
||||
void afterFirstLayout(BuildContext context) {
|
||||
final snippet = widget.snippet;
|
||||
final snippet = widget.args?.snippet;
|
||||
if (snippet != null) {
|
||||
_nameController.text = snippet.name;
|
||||
_scriptController.text = snippet.script;
|
||||
|
||||
@@ -1,123 +1,164 @@
|
||||
import 'package:fl_lib/fl_lib.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:server_box/data/res/store.dart';
|
||||
import 'package:flutter_reorderable_grid_view/widgets/widgets.dart';
|
||||
|
||||
import 'package:server_box/data/model/server/snippet.dart';
|
||||
import 'package:server_box/core/route.dart';
|
||||
import 'package:server_box/data/provider/snippet.dart';
|
||||
import 'package:server_box/view/page/snippet/edit.dart';
|
||||
|
||||
class SnippetListPage extends StatefulWidget {
|
||||
const SnippetListPage({super.key});
|
||||
|
||||
@override
|
||||
State<SnippetListPage> createState() => _SnippetListPageState();
|
||||
|
||||
static const route = AppRouteNoArg(
|
||||
page: SnippetListPage.new,
|
||||
path: '/snippets',
|
||||
);
|
||||
}
|
||||
|
||||
class _SnippetListPageState extends State<SnippetListPage>
|
||||
with AutomaticKeepAliveClientMixin {
|
||||
class _SnippetListPageState extends State<SnippetListPage> with AutomaticKeepAliveClientMixin {
|
||||
final _tag = ''.vn;
|
||||
final _splitViewCtrl = SplitViewController();
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
super.dispose();
|
||||
_tag.dispose();
|
||||
_splitViewCtrl.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
super.build(context);
|
||||
return _buildBody();
|
||||
}
|
||||
|
||||
Widget _buildBody() {
|
||||
// final isMobile = ResponsiveBreakpoints.of(context).isMobile;
|
||||
return SnippetProvider.snippets.listenVal(
|
||||
(snippets) {
|
||||
return _tag.listenVal((tag) {
|
||||
final child = _buildScaffold(snippets, tag);
|
||||
// if (isMobile) {
|
||||
return child;
|
||||
// }
|
||||
|
||||
// return SplitView(
|
||||
// controller: _splitViewCtrl,
|
||||
// leftWeight: 1,
|
||||
// rightWeight: 1.3,
|
||||
// initialRight: Center(child: Text(libL10n.empty)),
|
||||
// leftBuilder: (_, __) => child,
|
||||
// );
|
||||
});
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildScaffold(List<Snippet> snippets, String tag) {
|
||||
return Scaffold(
|
||||
appBar: TagSwitcher(
|
||||
tags: SnippetProvider.tags,
|
||||
onTagChanged: (tag) => _tag.value = tag,
|
||||
initTag: _tag.value,
|
||||
),
|
||||
body: _buildBody(),
|
||||
body: _buildSnippetList(snippets, tag),
|
||||
floatingActionButton: FloatingActionButton(
|
||||
heroTag: 'snippetAdd',
|
||||
child: const Icon(Icons.add),
|
||||
onPressed: () => AppRoutes.snippetEdit().go(context),
|
||||
onPressed: () {
|
||||
// if (ResponsiveBreakpoints.of(context).isMobile) {
|
||||
SnippetEditPage.route.go(context);
|
||||
// } else {
|
||||
// _splitViewCtrl.replace(const SnippetEditPage());
|
||||
// }
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildBody() {
|
||||
return SnippetProvider.snippets.listenVal(
|
||||
(snippets) {
|
||||
if (snippets.isEmpty) return Center(child: Text(libL10n.empty));
|
||||
return _tag.listenVal((tag) => _buildSnippetList(snippets, tag));
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSnippetList(List<Snippet> snippets, String tag) {
|
||||
if (snippets.isEmpty) return Center(child: Text(libL10n.empty));
|
||||
|
||||
final filtered = tag == TagSwitcher.kDefaultTag
|
||||
? snippets
|
||||
: snippets.where((e) => e.tags?.contains(tag) ?? false).toList();
|
||||
|
||||
return ReorderableListView.builder(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 9),
|
||||
itemCount: filtered.length,
|
||||
onReorder: (oldIdx, newIdx) {
|
||||
snippets.moveByItem(
|
||||
oldIdx,
|
||||
newIdx,
|
||||
filtered: filtered,
|
||||
onMove: (p0) {
|
||||
Stores.setting.snippetOrder.put(p0.map((e) => e.name).toList());
|
||||
},
|
||||
);
|
||||
SnippetProvider.snippets.notify();
|
||||
},
|
||||
footer: UIs.height77,
|
||||
buildDefaultDragHandles: false,
|
||||
itemBuilder: (context, idx) {
|
||||
final snippet = filtered.elementAt(idx);
|
||||
return ReorderableDelayedDragStartListener(
|
||||
key: ValueKey(idx),
|
||||
index: idx,
|
||||
final generatedChildren = List.generate(
|
||||
filtered.length,
|
||||
(idx) {
|
||||
final snippet = filtered.elementAtOrNull(idx);
|
||||
if (snippet == null) return UIs.placeholder;
|
||||
return Container(
|
||||
key: ValueKey(snippet.name),
|
||||
child: _buildSnippetItem(snippet),
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
return ReorderableBuilder(
|
||||
children: generatedChildren,
|
||||
onReorder: (ReorderedListFunction reorderedListFunction) {
|
||||
setState(() {
|
||||
final newFiltered = reorderedListFunction(filtered) as List<Snippet>;
|
||||
snippets.moveByItem(
|
||||
0,
|
||||
0,
|
||||
filtered: filtered,
|
||||
onMove: (p0) {
|
||||
Stores.setting.snippetOrder.put(newFiltered.map((e) => e.name).toList());
|
||||
},
|
||||
);
|
||||
SnippetProvider.snippets.notify();
|
||||
});
|
||||
},
|
||||
builder: (children) {
|
||||
return GridView(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 9),
|
||||
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
|
||||
maxCrossAxisExtent: 330,
|
||||
childAspectRatio: 3.4,
|
||||
),
|
||||
children: children,
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSnippetItem(Snippet snippet) {
|
||||
return CardX(
|
||||
child: ListTile(
|
||||
contentPadding: const EdgeInsets.only(left: 23, right: 17),
|
||||
title: Text(
|
||||
snippet.name,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
maxLines: 1,
|
||||
),
|
||||
subtitle: Text(
|
||||
snippet.note ?? snippet.script,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
maxLines: 3,
|
||||
style: UIs.textGrey,
|
||||
),
|
||||
trailing: const Icon(Icons.keyboard_arrow_right),
|
||||
onTap: () => AppRoutes.snippetEdit(snippet: snippet).go(context),
|
||||
return ListTile(
|
||||
contentPadding: const EdgeInsets.only(left: 23, right: 17),
|
||||
title: Text(
|
||||
snippet.name,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
maxLines: 1,
|
||||
),
|
||||
);
|
||||
subtitle: Text(
|
||||
snippet.note ?? snippet.script,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
maxLines: 3,
|
||||
style: UIs.textGrey,
|
||||
),
|
||||
trailing: const Icon(Icons.keyboard_arrow_right),
|
||||
onTap: () {
|
||||
// final isMobile = ResponsiveBreakpoints.of(context).isMobile;
|
||||
// if (isMobile) {
|
||||
SnippetEditPage.route.go(
|
||||
context,
|
||||
args: SnippetEditPageArgs(snippet: snippet),
|
||||
);
|
||||
// } else {
|
||||
// _splitViewCtrl.replace(SnippetEditPage(
|
||||
// args: SnippetEditPageArgs(snippet: snippet),
|
||||
// ));
|
||||
// }
|
||||
},
|
||||
).cardx;
|
||||
}
|
||||
|
||||
@override
|
||||
bool get wantKeepAlive => true;
|
||||
|
||||
// Future<void> _runSnippet(Snippet snippet) async {
|
||||
// final servers = await context.showPickDialog<Server>(
|
||||
// items: Pros.server.servers.toList(),
|
||||
// name: (e) => e.spi.name,
|
||||
// );
|
||||
// if (servers == null) {
|
||||
// return;
|
||||
// }
|
||||
// final ids = servers.map((e) => e.spi.id).toList();
|
||||
// final results = await Pros.server.runSnippetsMulti(ids, snippet);
|
||||
// if (results.isNotEmpty) {
|
||||
// AppRoutes.snippetResult(results: results).go(context);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
@@ -4,9 +4,14 @@ import 'package:server_box/core/extension/context/locale.dart';
|
||||
import 'package:server_box/data/model/server/snippet.dart';
|
||||
|
||||
class SnippetResultPage extends StatelessWidget {
|
||||
final List<SnippetResult?> results;
|
||||
final List<SnippetResult?> args;
|
||||
|
||||
const SnippetResultPage({super.key, required this.results});
|
||||
const SnippetResultPage({super.key, required this.args});
|
||||
|
||||
static const route = AppRouteArg(
|
||||
page: SnippetResultPage.new,
|
||||
path: '/snippets/result',
|
||||
);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@@ -19,13 +24,13 @@ class SnippetResultPage extends StatelessWidget {
|
||||
Widget _buildBody() {
|
||||
return ListView.builder(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 17),
|
||||
itemCount: results.length,
|
||||
itemCount: args.length,
|
||||
itemBuilder: (_, index) {
|
||||
final item = results[index];
|
||||
final item = args[index];
|
||||
if (item == null) return UIs.placeholder;
|
||||
return CardX(
|
||||
child: ExpandTile(
|
||||
initiallyExpanded: results.length == 1,
|
||||
initiallyExpanded: args.length == 1,
|
||||
title: Text(item.dest ?? ''),
|
||||
subtitle: Text(item.time.toString(), style: UIs.textGrey),
|
||||
children: [
|
||||
|
||||
Reference in New Issue
Block a user