Files
pangolin/client/lib/widgets/routing_screen.dart
T
wangjia d73b6da110 feat(routing): 分流规则子屏 UI(模式/内置/我的规则/添加/冲突提示)
- 新增 RoutingScreen(ConsumerWidget):代理模式段选(全局/智能/直连)→setMode、
  内置规则卡(国内直连开关 + LAN 强制锁定行)、我的规则 ReorderableListView
  (拖动排序→reorder、删除→removeRule)、添加规则弹层(类型 chip + 目标输入 +
  动作段选→addRule)、FINAL 兜底行。非智能分流模式「我的规则」区灰化+忽略提示。
- 冲突提示:①同 type+value 被更靠前规则遮蔽 →「已被上面规则覆盖」(纯本地计算);
  ②自定义 ip_cidr 规则落在私网/回环地址段 → 系统锁定提示(启发式,详见文件头注释
  ——真正的私有服务域名清单未经 API 下发给客户端,是已知缺口)。
- l10n 新增 9 个 key(routingTypeDomain/DomainKeyword/IpCidr/Geoip、
  routingRuleShadowed、routingModeNote、routingRuleValueHint、routingNoRules),
  经 design/i18n/strings.json 单源 + gen_l10n_dart.mjs 生成六语。
- 补生成 pangolin_icons.dart 的 plus 图标(design/prototype/icons.js 已有,
  codegen 之前未跑过)。
- 新增 widget 测试 test/widget/routing_screen_test.dart:模式段选/规则行/添加
  按钮可见、非智能模式灰化、重复规则遮蔽提示,共 3 例。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-28 08:51:40 +08:00

460 lines
18 KiB
Dart

// routing_screen.dart — 分流规则子屏(代理模式段选 + 内置规则 + 我的规则增删排序 + 添加弹层 + 冲突提示)
//
// 视觉对照 design/prototype/screens/ui-mobile.html(data-sub="routing")/ui-desktop.html
// (data-view="routing")。状态层 routing_provider.dart(Task 6):routingProfileProvider
// 的 setMode/setBuiltin/addRule/removeRule/reorder。
//
// 冲突提示两类(prototype 里只是静态示例,这里落成真computed 逻辑):
// ①「已被上面规则覆盖」——同 type+value 的自定义规则被更靠前的规则遮蔽(纯本地计算,
// 首命中生效语义决定)。
// ②「系统强制走隧道,此规则不生效」——命中系统锁定目标。当前 RoutingProfile 契约
// 只下发 builtin 三个布尔开关,并未下发具体锁定域名清单(PANGOLIN_PRIVATE_SPLIT_DOMAINS
// 只在服务端 env,未经 API 暴露给客户端),故本屏对②采用保守启发式:仅当自定义规则
// 类型为 ip_cidr 且落在私网/回环地址段(RFC1918 + 127.0.0.0/8)时标记——这部分恒被
// 内置「局域网 / 私网直连」(builtin.lanDirect,强制不可关)接管,与用户规则动作冲突。
// 域名级私有服务分流(如 git.yanmeiai.com)不在此启发式覆盖范围,需服务端把锁定域名
// 清单下发给客户端后再补全(见 task-7-report.md 里的疑虑)。
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../l10n/app_text.dart';
import '../models/routing_profile.dart';
import '../pangolin_theme.dart';
import '../state/app_providers.dart';
import '../state/routing_provider.dart';
import 'pangolin_button.dart';
import 'pangolin_field.dart';
import 'pangolin_icons.dart';
import 'seg_switch.dart';
import 'sub_scaffold.dart';
/// 分流模式段选的选项顺序,与 [RoutingProfile.mode] 后端取值一一对应
/// (UI 第二档「智能分流」= 后端 `rule`)。
const _kModeValues = ['global', 'rule', 'direct'];
class RoutingScreen extends ConsumerWidget {
const RoutingScreen({super.key, this.onBack, this.embedded = false});
final VoidCallback? onBack;
final bool embedded;
@override
Widget build(BuildContext context, WidgetRef ref) {
final c = context.pangolin;
final t = ref.watch(appTextProvider);
final profileAsync = ref.watch(routingProfileProvider);
return SubScaffold(
title: t.routingRulesTitle,
onBack: onBack,
embedded: embedded,
child: profileAsync.when(
loading: () => const Center(child: Padding(padding: EdgeInsets.all(40), child: CircularProgressIndicator())),
error: (_, __) => Center(
child: Padding(
padding: const EdgeInsets.all(40),
child: Text(t.lang.loadFailedRetry, style: PangolinText.body.copyWith(color: c.fg3)),
),
),
data: (profile) => _RoutingBody(t: t, profile: profile),
),
);
}
}
class _RoutingBody extends ConsumerWidget {
const _RoutingBody({required this.t, required this.profile});
final AppText t;
final RoutingProfile profile;
@override
Widget build(BuildContext context, WidgetRef ref) {
final c = context.pangolin;
final notifier = ref.read(routingProfileProvider.notifier);
final smart = profile.mode == 'rule';
final modeIdx = _kModeValues.indexOf(profile.mode);
final selectedIdx = modeIdx < 0 ? 1 : modeIdx;
return ListView(
padding: const EdgeInsets.fromLTRB(20, 4, 20, 24),
children: [
// ── 代理模式段选 ──
_secLabel(c, t.routingProxyMode),
SegSwitch(
options: [
(icon: PangolinIcons.globe, label: t.routingModeGlobal),
(icon: PangolinIcons.zap, label: t.routingModeSmart),
(icon: PangolinIcons.arrowRight, label: t.routingModeDirect),
],
selectedIndex: selectedIdx,
onChanged: (i) => notifier.setMode(_kModeValues[i]),
),
const SizedBox(height: 8),
Text(t.routingModeNote, style: PangolinText.caption.copyWith(color: c.fg3, height: 1.5)),
const SizedBox(height: 20),
// ── 内置规则 ──
_secLabel(c, t.routingBuiltin),
_cardFlush(c, [
_builtinToggleRow(
context, c,
icon: PangolinIcons.globe,
title: t.routingCnDirect,
sub: 'GeoIP / GeoSite CN',
value: profile.builtin.chinaDirect,
onChanged: (v) => notifier.setBuiltin(profile.builtin.copyWith(chinaDirect: v)),
last: false,
),
_forcedRow(c, icon: PangolinIcons.home, title: t.routingLanDirect, sub: t.routingLanForced, pill: t.routingForcedPill),
]),
const SizedBox(height: 20),
// ── 我的规则(仅智能分流模式生效,其余模式灰化 + 忽略提示已由上方 modeNote 说明) ──
Opacity(
opacity: smart ? 1 : 0.5,
child: IgnorePointer(
ignoring: !smart,
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
_secLabel(c, t.routingMyRulesOrdered),
if (profile.rules.isEmpty)
_cardFlush(c, [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 20),
child: Center(child: Text(t.routingNoRules, style: PangolinText.sm.copyWith(color: c.fg3))),
),
])
else
Container(
decoration: BoxDecoration(
color: c.surface,
border: Border.all(color: c.border),
borderRadius: BorderRadius.circular(PangolinRadius.lg),
boxShadow: PangolinShadow.sm,
),
clipBehavior: Clip.antiAlias,
child: ReorderableListView(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
buildDefaultDragHandles: false,
onReorder: (oldIndex, newIndex) => notifier.reorder(oldIndex, newIndex),
children: [
for (var i = 0; i < profile.rules.length; i++)
_ruleRow(context, c, t, i, profile.rules[i],
_conflictFor(profile.rules, i), i < profile.rules.length - 1,
onDelete: () => notifier.removeRule(i)),
],
),
),
const SizedBox(height: 12),
PangolinButton(
label: t.routingAddRule,
icon: PangolinIcons.plus,
variant: PangolinButtonVariant.secondary,
expand: true,
onPressed: smart ? () => _openAddDialog(context, ref, t) : null,
),
]),
),
),
const SizedBox(height: 20),
// ── FINAL 兜底 ──
_secLabel(c, t.routingFinalShort),
_cardFlush(c, [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 14),
child: Row(children: [
Expanded(
child: Text(t.routingFinalFallback,
style: PangolinText.body.copyWith(color: c.fg1, fontSize: 14, fontWeight: FontWeight.w500)),
),
_actionPill(c, t, profile.finalAction),
]),
),
]),
],
);
}
Future<void> _openAddDialog(BuildContext context, WidgetRef ref, AppText t) async {
final rule = await showDialog<RoutingRule>(context: context, builder: (_) => _AddRuleDialog(t: t));
if (rule == null) return;
await ref.read(routingProfileProvider.notifier).addRule(rule);
}
Widget _builtinToggleRow(
BuildContext context,
PangolinScheme c, {
required IconData icon,
required String title,
required String sub,
required bool value,
required ValueChanged<bool> onChanged,
required bool last,
}) {
return Container(
decoration: BoxDecoration(border: last ? null : Border(bottom: BorderSide(color: c.border))),
padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 14),
child: Row(children: [
_iconBox(c, icon),
const SizedBox(width: 12),
Expanded(
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text(title, style: PangolinText.body.copyWith(color: c.fg1, fontSize: 14, fontWeight: FontWeight.w500)),
Text(sub, style: PangolinText.caption.copyWith(color: c.fg3)),
]),
),
Switch(value: value, activeThumbColor: c.accent, onChanged: onChanged),
]),
);
}
Widget _forcedRow(PangolinScheme c, {required IconData icon, required String title, required String sub, required String pill}) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 14),
child: Row(children: [
_iconBox(c, icon),
const SizedBox(width: 12),
Expanded(
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text(title, style: PangolinText.body.copyWith(color: c.fg1, fontSize: 14, fontWeight: FontWeight.w500)),
Text(sub, style: PangolinText.caption.copyWith(color: c.fg3)),
]),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
decoration: BoxDecoration(color: c.bgSubtle, borderRadius: BorderRadius.circular(PangolinRadius.full)),
child: Text(pill, style: PangolinText.caption.copyWith(color: c.fg2, fontWeight: FontWeight.w700, fontSize: 11)),
),
]),
);
}
Widget _iconBox(PangolinScheme c, IconData icon) => Container(
width: 34,
height: 34,
decoration: BoxDecoration(color: c.accentSubtle, borderRadius: BorderRadius.circular(PangolinRadius.md)),
child: Icon(icon, size: 17, color: c.accent),
);
Widget _ruleRow(
BuildContext context,
PangolinScheme c,
AppText t,
int i,
RoutingRule rule,
_RuleConflict conflict,
bool divider, {
required VoidCallback onDelete,
}) {
final dim = conflict != _RuleConflict.none;
final subText = switch (conflict) {
_RuleConflict.shadowed => t.routingRuleShadowed,
_RuleConflict.systemLocked => t.routingForcedRow,
_RuleConflict.none => _routingTypeLabel(t, rule.type),
};
return Container(
key: ValueKey('rt_rule_$i'),
decoration: BoxDecoration(border: divider ? Border(bottom: BorderSide(color: c.border)) : null),
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 13),
child: Opacity(
opacity: dim ? 0.55 : 1,
child: Row(children: [
ReorderableDragStartListener(
index: i,
child: Padding(
padding: const EdgeInsets.only(right: 10),
child: Text('', style: PangolinText.body.copyWith(color: c.fg3, fontWeight: FontWeight.w700)),
),
),
Expanded(
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text(rule.value, style: PangolinText.mono.copyWith(color: c.fg1, fontSize: 14)),
const SizedBox(height: 2),
Text(subText, style: PangolinText.caption.copyWith(color: dim ? c.warning : c.fg3)),
]),
),
const SizedBox(width: 8),
_actionPill(c, t, rule.action),
IconButton(
onPressed: onDelete,
icon: Icon(PangolinIcons.trash2, size: 17, color: c.fg3),
padding: const EdgeInsets.only(left: 6),
constraints: const BoxConstraints(),
),
]),
),
);
}
}
/// 规则行冲突类型:先判系统锁定(与规则顺序无关),再判是否被更靠前的同规则遮蔽。
enum _RuleConflict { none, shadowed, systemLocked }
_RuleConflict _conflictFor(List<RoutingRule> rules, int i) {
final r = rules[i];
if (_looksSystemLocked(r)) return _RuleConflict.systemLocked;
for (var j = 0; j < i; j++) {
final o = rules[j];
if (o.type == r.type && o.value.trim().toLowerCase() == r.value.trim().toLowerCase()) {
return _RuleConflict.shadowed;
}
}
return _RuleConflict.none;
}
/// 私网/回环地址段启发式(RFC1918 + 127.0.0.0/8),见文件头注释——真正的系统锁定域名清单
/// 未经 API 下发,这里只覆盖 ip_cidr 类型且落在该地址段的情形。
final _privateIpPrefix = RegExp(r'^(10\.|192\.168\.|127\.|172\.(1[6-9]|2\d|3[01])\.)');
bool _looksSystemLocked(RoutingRule r) => r.type == 'ip_cidr' && _privateIpPrefix.hasMatch(r.value);
String _routingTypeLabel(AppText t, String type) => switch (type) {
'domain' => t.routingTypeDomain,
'domain_suffix' => t.routingTypeDomainSuffix,
'domain_keyword' => t.routingTypeDomainKeyword,
'ip_cidr' => t.routingTypeIpCidr,
'geoip' => t.routingTypeGeoip,
'geosite' => t.routingTypeGeosite,
_ => type,
};
Widget _actionPill(PangolinScheme c, AppText t, String action) {
late Color bg, fg;
late String label;
switch (action) {
case 'direct':
bg = c.successSubtle;
fg = c.success;
label = t.routingActDirect;
case 'reject':
bg = c.dangerSubtle;
fg = c.danger;
label = t.routingActReject;
case 'proxy':
default:
bg = c.warningSubtle;
fg = c.warning;
label = t.routingActProxy;
}
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
decoration: BoxDecoration(color: bg, borderRadius: BorderRadius.circular(PangolinRadius.full)),
child: Text(label, style: PangolinText.caption.copyWith(color: fg, fontWeight: FontWeight.w700, fontSize: 11)),
);
}
Widget _secLabel(PangolinScheme c, String text) => Padding(
padding: const EdgeInsets.fromLTRB(4, 0, 4, 10),
child: Text(text, style: PangolinText.sm.copyWith(color: c.fg2, fontWeight: FontWeight.w700, fontSize: 13)),
);
Widget _cardFlush(PangolinScheme c, List<Widget> children) => Container(
decoration: BoxDecoration(
color: c.surface,
border: Border.all(color: c.border),
borderRadius: BorderRadius.circular(PangolinRadius.lg),
boxShadow: PangolinShadow.sm,
),
clipBehavior: Clip.antiAlias,
child: Column(children: children),
);
/// 「添加规则」弹层:类型 chip 选择 + 目标输入(mono)+ 动作段选。
/// 仿 account_screens.dart:_renameDialog 的 AlertDialog 表单范式。
class _AddRuleDialog extends StatefulWidget {
const _AddRuleDialog({required this.t});
final AppText t;
@override
State<_AddRuleDialog> createState() => _AddRuleDialogState();
}
class _AddRuleDialogState extends State<_AddRuleDialog> {
String _type = kRuleTypes.first;
String _action = kRuleActions.first;
final _value = TextEditingController();
@override
void dispose() {
_value.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final c = context.pangolin;
final t = widget.t;
final canSave = _value.text.trim().isNotEmpty;
return AlertDialog(
backgroundColor: c.surface,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(PangolinRadius.xl)),
title: Text(t.routingAddRule, style: PangolinText.body.copyWith(color: c.fg1, fontWeight: FontWeight.w700)),
content: SizedBox(
width: 340,
child: Column(mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [
Wrap(
spacing: 8,
runSpacing: 8,
children: [for (final ty in kRuleTypes) _typeChip(c, t, ty)],
),
const SizedBox(height: 14),
PangolinFieldBox(
fill: c.bg,
child: TextField(
controller: _value,
autofocus: true,
style: PangolinText.mono.copyWith(color: c.fg1, fontSize: 14),
decoration: bareInputDecoration(
contentPadding: const EdgeInsets.symmetric(vertical: 13),
hintText: t.routingRuleValueHint,
hintStyle: PangolinText.sm.copyWith(color: c.fg3),
),
onChanged: (_) => setState(() {}),
),
),
const SizedBox(height: 14),
SegSwitch(
options: [
(icon: PangolinIcons.checkCircle, label: t.routingActDirect),
(icon: PangolinIcons.zap, label: t.routingActProxy),
(icon: PangolinIcons.x, label: t.routingActReject),
],
selectedIndex: kRuleActions.indexOf(_action),
onChanged: (i) => setState(() => _action = kRuleActions[i]),
),
]),
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text(t.devCancel, style: PangolinText.sm.copyWith(color: c.fg2, fontWeight: FontWeight.w600)),
),
TextButton(
onPressed: canSave
? () => Navigator.pop(context, RoutingRule(type: _type, value: _value.text.trim(), action: _action))
: null,
child: Text(t.devSave, style: PangolinText.sm.copyWith(color: c.accent, fontWeight: FontWeight.w700)),
),
],
);
}
Widget _typeChip(PangolinScheme c, AppText t, String type) {
final active = type == _type;
return GestureDetector(
onTap: () => setState(() => _type = type),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 7),
decoration: BoxDecoration(
color: active ? c.accentSubtle : c.bgSubtle,
border: Border.all(color: active ? c.accentBorder : c.border),
borderRadius: BorderRadius.circular(PangolinRadius.full),
),
child: Text(_routingTypeLabel(t, type),
style: PangolinText.caption.copyWith(color: active ? c.accent : c.fg2, fontWeight: FontWeight.w600)),
),
);
}
}