optimization: desktop UI (#747)

This commit is contained in:
lollipopkit🏳️‍⚧️
2025-05-13 04:57:37 +08:00
committed by GitHub
parent e520929411
commit 8627ff823f
52 changed files with 2459 additions and 1990 deletions

View File

@@ -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;

View File

@@ -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);
// }
// }
}

View File

@@ -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: [