feat: add Flutter desktop client for Rtty
This commit is contained in:
319
desktop/lib/src/connection_bar.dart
Normal file
319
desktop/lib/src/connection_bar.dart
Normal file
@@ -0,0 +1,319 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'rtty_client.dart';
|
||||
import 'theme.dart';
|
||||
|
||||
/// 顶部连接控制条。
|
||||
///
|
||||
/// 精炼的工业风控制条：状态指示灯 + 服务器地址输入 + 会话 ID + 连接按钮。
|
||||
/// 断开状态下可编辑，连接成功后锁定并显示会话信息。
|
||||
class ConnectionBar extends StatelessWidget {
|
||||
const ConnectionBar({
|
||||
super.key,
|
||||
required this.state,
|
||||
required this.hostController,
|
||||
required this.portController,
|
||||
required this.sessionController,
|
||||
required this.sessionId,
|
||||
required this.terminalSize,
|
||||
required this.onConnect,
|
||||
required this.onDisconnect,
|
||||
});
|
||||
|
||||
final ConnState state;
|
||||
final TextEditingController hostController;
|
||||
final TextEditingController portController;
|
||||
final TextEditingController sessionController;
|
||||
final String? sessionId;
|
||||
final String terminalSize;
|
||||
final VoidCallback onConnect;
|
||||
final VoidCallback onDisconnect;
|
||||
|
||||
bool get _connected =>
|
||||
state == ConnState.connected || state == ConnState.connecting;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
height: 56,
|
||||
decoration: BoxDecoration(
|
||||
color: RttyTheme.surface,
|
||||
border: Border(bottom: BorderSide(color: RttyTheme.border)),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
child: Row(
|
||||
children: [
|
||||
_StatusLight(state: state),
|
||||
const SizedBox(width: 12),
|
||||
_ConnectionLabel(state: state),
|
||||
const SizedBox(width: 16),
|
||||
_Divider(),
|
||||
const SizedBox(width: 16),
|
||||
_EditableField(
|
||||
label: 'HOST',
|
||||
controller: hostController,
|
||||
enabled: !_connected,
|
||||
width: 150,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
_EditableField(
|
||||
label: 'PORT',
|
||||
controller: portController,
|
||||
enabled: !_connected,
|
||||
width: 64,
|
||||
numeric: true,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
if (!_connected) ...[
|
||||
_EditableField(
|
||||
label: 'SESSION',
|
||||
controller: sessionController,
|
||||
enabled: true,
|
||||
width: 120,
|
||||
hint: 'auto',
|
||||
),
|
||||
] else ...[
|
||||
_SessionBadge(sessionId: sessionId),
|
||||
],
|
||||
const Spacer(),
|
||||
_TerminalSizeBadge(text: terminalSize),
|
||||
const SizedBox(width: 12),
|
||||
_ConnectButton(
|
||||
state: state,
|
||||
onConnect: onConnect,
|
||||
onDisconnect: onDisconnect,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _StatusLight extends StatelessWidget {
|
||||
const _StatusLight({required this.state});
|
||||
|
||||
final ConnState state;
|
||||
|
||||
Color get _color => switch (state) {
|
||||
ConnState.disconnected => RttyTheme.textFaint,
|
||||
ConnState.connecting => RttyTheme.accent,
|
||||
ConnState.connected => RttyTheme.primary,
|
||||
ConnState.error => RttyTheme.danger,
|
||||
};
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: 10,
|
||||
height: 10,
|
||||
decoration: BoxDecoration(
|
||||
color: _color,
|
||||
shape: BoxShape.circle,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: _color.withValues(alpha: 0.55),
|
||||
blurRadius: 6,
|
||||
spreadRadius: 1,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ConnectionLabel extends StatelessWidget {
|
||||
const _ConnectionLabel({required this.state});
|
||||
|
||||
final ConnState state;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final (label, color) = switch (state) {
|
||||
ConnState.disconnected => ('DISCONNECTED', RttyTheme.textFaint),
|
||||
ConnState.connecting => ('CONNECTING', RttyTheme.accent),
|
||||
ConnState.connected => ('CONNECTED', RttyTheme.primary),
|
||||
ConnState.error => ('CONNECTION ERROR', RttyTheme.danger),
|
||||
};
|
||||
return Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
color: color,
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: 1.4,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _Divider extends StatelessWidget {
|
||||
const _Divider();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(width: 1, height: 24, color: RttyTheme.border);
|
||||
}
|
||||
}
|
||||
|
||||
class _EditableField extends StatelessWidget {
|
||||
const _EditableField({
|
||||
required this.label,
|
||||
required this.controller,
|
||||
required this.enabled,
|
||||
required this.width,
|
||||
this.numeric = false,
|
||||
this.hint,
|
||||
});
|
||||
|
||||
final String label;
|
||||
final TextEditingController controller;
|
||||
final bool enabled;
|
||||
final double width;
|
||||
final bool numeric;
|
||||
final String? hint;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SizedBox(
|
||||
width: width,
|
||||
child: TextField(
|
||||
controller: controller,
|
||||
enabled: enabled,
|
||||
keyboardType:
|
||||
numeric ? TextInputType.number : TextInputType.text,
|
||||
style: const TextStyle(
|
||||
color: RttyTheme.text,
|
||||
fontSize: 12,
|
||||
fontFamily: 'Consolas',
|
||||
decorationThickness: 0,
|
||||
),
|
||||
cursorColor: RttyTheme.primary,
|
||||
decoration: InputDecoration(
|
||||
labelText: label,
|
||||
labelStyle: const TextStyle(
|
||||
color: RttyTheme.textFaint,
|
||||
fontSize: 10,
|
||||
letterSpacing: 1.2,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
hintText: hint,
|
||||
hintStyle: const TextStyle(color: RttyTheme.textFaint, fontSize: 12),
|
||||
isDense: true,
|
||||
contentPadding:
|
||||
const EdgeInsets.symmetric(horizontal: 8, vertical: 10),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
borderSide: const BorderSide(color: RttyTheme.border),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
borderSide: const BorderSide(color: RttyTheme.primaryDim),
|
||||
),
|
||||
disabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
borderSide: BorderSide(
|
||||
color: RttyTheme.border.withValues(alpha: 0.5),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _SessionBadge extends StatelessWidget {
|
||||
const _SessionBadge({required this.sessionId});
|
||||
|
||||
final String? sessionId;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: RttyTheme.surfaceHi,
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
border: Border.all(color: RttyTheme.border),
|
||||
),
|
||||
child: Text(
|
||||
'SID ${sessionId ?? '—'}',
|
||||
style: const TextStyle(
|
||||
color: RttyTheme.textDim,
|
||||
fontSize: 11,
|
||||
fontFamily: 'Consolas',
|
||||
letterSpacing: 0.4,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _TerminalSizeBadge extends StatelessWidget {
|
||||
const _TerminalSizeBadge({required this.text});
|
||||
|
||||
final String text;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Text(
|
||||
text,
|
||||
style: const TextStyle(
|
||||
color: RttyTheme.textFaint,
|
||||
fontSize: 11,
|
||||
fontFamily: 'Consolas',
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ConnectButton extends StatelessWidget {
|
||||
const _ConnectButton({
|
||||
required this.state,
|
||||
required this.onConnect,
|
||||
required this.onDisconnect,
|
||||
});
|
||||
|
||||
final ConnState state;
|
||||
final VoidCallback onConnect;
|
||||
final VoidCallback onDisconnect;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final connected = state == ConnState.connected;
|
||||
final connecting = state == ConnState.connecting;
|
||||
|
||||
final bg = connected
|
||||
? RttyTheme.primaryDim.withValues(alpha: 0.25)
|
||||
: RttyTheme.primary.withValues(alpha: 0.14);
|
||||
final fg = connected ? RttyTheme.danger : RttyTheme.primary;
|
||||
final label = connected
|
||||
? 'DISCONNECT'
|
||||
: connecting
|
||||
? 'CONNECTING…'
|
||||
: 'CONNECT';
|
||||
|
||||
return SizedBox(
|
||||
height: 34,
|
||||
child: FilledButton(
|
||||
onPressed: connected ? onDisconnect : onConnect,
|
||||
style: FilledButton.styleFrom(
|
||||
backgroundColor: bg,
|
||||
foregroundColor: fg,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 18),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
side: BorderSide(color: fg.withValues(alpha: 0.5)),
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
label,
|
||||
style: const TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: 1.2,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user