refactor(client): 抽公用 PangolinFieldBox 统一输入框 + 根治填充两色接缝

根因:主题 inputDecorationTheme 设了 filled:true/fillColor:bg,自定义容器里嵌
TextField 时内层自铺 bg 底,与容器底色(搜索框 bgSubtle / 登录 surface)不一致 →
两端一色中间另一色接缝(节点搜索框最明显,登录/兑换框也有隐患)。

- kBareInput 加 filled:false:内层 TextField 不再自铺底,底色统一交给外层容器。
- 新增 widgets/pangolin_field.dart:PangolinFieldBox(圆角容器 + 底色 + 可选描边/
  聚焦光环 + 标签 + 前置图标 + 后置 widget)+ bareInputDecoration() 助手。
- 三处输入框统一改用:节点搜索框、登录/注册字段(_field)、兑换码输入框。
- 重生成 auth_login(dark/light)+ desktop_redeem golden(均人工核对外观正确)。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
wangjia
2026-06-29 12:29:53 +08:00
parent ccb7a9bfe7
commit 6249d5b2ea
8 changed files with 115 additions and 50 deletions
+13 -22
View File
@@ -10,6 +10,7 @@ import '../state/connection_provider.dart';
import '../state/nodes_provider.dart';
import '../widgets/app_top_bar.dart';
import '../widgets/country_code.dart';
import '../widgets/pangolin_field.dart';
import '../widgets/pangolin_icons.dart';
import '../widgets/server_tile.dart';
import '../widgets/smart_select_card.dart';
@@ -195,29 +196,19 @@ class _SearchBox extends StatelessWidget {
@override
Widget build(BuildContext context) {
final c = context.pangolin;
return Container(
decoration: BoxDecoration(color: c.bgSubtle, borderRadius: BorderRadius.circular(PangolinRadius.md)),
padding: const EdgeInsets.symmetric(horizontal: 14),
child: Row(children: [
Icon(PangolinIcons.search, size: 18, color: c.fg3),
const SizedBox(width: 10),
Expanded(
child: TextField(
onChanged: onChanged,
style: PangolinText.sm.copyWith(color: c.fg1, fontSize: 15),
// kBareInput 关掉主题 inputDecorationTheme 的边框/填充泄漏(否则聚焦时
// 橙色 OutlineInputBorder 会画到内层 TextField 上、与搜索框圆角错位/被裁)。
// filled:false 关掉主题的 fillColor=bg 填充——否则内层 TextField 用 bg 铺底,
// 与外层 bgSubtle 容器两色不一致(图标/左右内边距露出 bgSubtle、中间是 bg)。
decoration: kBareInput.copyWith(
filled: false,
contentPadding: const EdgeInsets.symmetric(vertical: 12),
hintText: hint,
hintStyle: PangolinText.sm.copyWith(color: c.fg3, fontSize: 15),
),
),
// 搜索框:只有底色无描边的统一输入框(PangolinFieldBox bordered:false)。
return PangolinFieldBox(
fill: c.bgSubtle,
bordered: false,
leading: PangolinIcons.search,
child: TextField(
onChanged: onChanged,
style: PangolinText.sm.copyWith(color: c.fg1, fontSize: 15),
decoration: bareInputDecoration(
hintText: hint,
hintStyle: PangolinText.sm.copyWith(color: c.fg3, fontSize: 15),
),
]),
),
);
}
}