From 02cffcb9ba9d759281085e189a7770d9e623cdc4 Mon Sep 17 00:00:00 2001 From: wangjia <809946525@qq.com> Date: Sat, 4 Jul 2026 20:39:31 +0800 Subject: [PATCH] =?UTF-8?q?feat(client):=20=E5=88=87=E9=A1=B5=E6=BB=91?= =?UTF-8?q?=E5=8A=A8=E8=BF=87=E6=B8=A1=20+=20=E4=BA=8C=E7=BA=A7=E5=B1=8F?= =?UTF-8?q?=E8=BF=94=E5=9B=9E=E6=89=8B=E5=8A=BF=E6=96=B9=E5=90=91=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3=20+=20=E6=8E=88=E6=9D=83=E4=B8=89=E6=A0=BC=E6=A8=AA?= =?UTF-8?q?=E6=8E=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 窄屏切页加方向感知滑入过渡（240ms easeOutCubic + 渐显）：tab 间按左右 次序、进二级屏从右滑入、返回从左滑入；桌面无动画。控制器在 initState 创建（惰性 late 到 dispose 才求值会在已卸载树上找 Ticker 崩溃） - 二级屏返回手势方向修正：从左往右滑=退出（iOS 返回习惯），向左滑无响应 - 授权信息三格（状态/到期日/剩余天数）窄屏改横排：间距收窄 + FittedBox 缩放值文本防溢出，桌面不变 Co-Authored-By: Claude Fable 5 --- .../lib/screens/settings/license_panel.dart | 45 ++++++----- client/lib/screens/shell/app_shell.dart | 77 +++++++++++++++++-- 2 files changed, 94 insertions(+), 28 deletions(-) diff --git a/client/lib/screens/settings/license_panel.dart b/client/lib/screens/settings/license_panel.dart index 2cdbf61..53e58cf 100644 --- a/client/lib/screens/settings/license_panel.dart +++ b/client/lib/screens/settings/license_panel.dart @@ -86,22 +86,16 @@ class _LicensePanelState extends ConsumerState { return Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - // ── 卡1：授权信息（3 cell，自「关于我们」迁入）── + // ── 卡1：授权信息（3 cell 横排，窄屏同样横排、间距收窄）── SettingsCard( title: '授权信息', desc: '当前门店的授权状态与有效期，续期时长在现有到期时间上叠加', - child: context.isMobile - ? Column(children: [ - for (final c in licCells) - Padding( - padding: const EdgeInsets.only(bottom: 10), child: c), - ]) - : Row(children: [ - for (var i = 0; i < licCells.length; i++) ...[ - if (i > 0) const SizedBox(width: 14), - Expanded(child: licCells[i]), - ], - ]), + child: Row(children: [ + for (var i = 0; i < licCells.length; i++) ...[ + if (i > 0) SizedBox(width: context.isMobile ? 8 : 14), + Expanded(child: licCells[i]), + ], + ]), ), const SizedBox(height: 16), // ── 卡2：在线购买 / 续费（后端 purchase 接口 admin only， @@ -189,7 +183,10 @@ class _LicensePanelState extends ConsumerState { /// 原型 .lic-cell（与「关于我们」同款）：lk 11 muted + lv 17/700/mono。 Widget _licCell(dynamic t, String label, String value, {Color? color}) => Container( - padding: const EdgeInsets.fromLTRB(16, 14, 16, 14), + // 窄屏三格横排时收窄内距，值文本按格宽缩放防溢出（如 2026-06-25） + padding: context.isMobile + ? const EdgeInsets.fromLTRB(10, 12, 10, 12) + : const EdgeInsets.fromLTRB(16, 14, 16, 14), decoration: BoxDecoration( color: t.bg, border: Border.all(color: t.borderSubtle), @@ -199,15 +196,21 @@ class _LicensePanelState extends ConsumerState { crossAxisAlignment: CrossAxisAlignment.start, children: [ Text(label, + maxLines: 1, + overflow: TextOverflow.ellipsis, style: TextStyle(fontSize: AppDims.fsXs, color: t.muted)), const SizedBox(height: 6), - Text(value, - style: TextStyle( - fontSize: AppDims.fsH2, - fontWeight: FontWeight.w700, - fontFamily: AppFonts.mono, - fontFamilyFallback: AppFonts.monoFallback, - color: color ?? t.heading)), + FittedBox( + fit: BoxFit.scaleDown, + alignment: Alignment.centerLeft, + child: Text(value, + style: TextStyle( + fontSize: AppDims.fsH2, + fontWeight: FontWeight.w700, + fontFamily: AppFonts.mono, + fontFamilyFallback: AppFonts.monoFallback, + color: color ?? t.heading)), + ), ], ), ); diff --git a/client/lib/screens/shell/app_shell.dart b/client/lib/screens/shell/app_shell.dart index 39ee3a1..9baa0dc 100644 --- a/client/lib/screens/shell/app_shell.dart +++ b/client/lib/screens/shell/app_shell.dart @@ -130,11 +130,58 @@ class AppShell extends ConsumerStatefulWidget { ConsumerState createState() => _AppShellState(); } -class _AppShellState extends ConsumerState { +class _AppShellState extends ConsumerState + with SingleTickerProviderStateMixin { final String _loginTime = DateFormat('HH:mm:ss').format(AppStatusBar.clock()); bool _forceDialogShown = false; bool _licenseDialogShown = false; + // ── 窄屏切页滑动过渡：方向感知的一次性滑入（tab 按左右序、进二级从右、返回从左）── + // 注意：必须在 initState 创建（惰性 late 若到 dispose 才首次求值，会在已卸载 + // 的树上找 TickerMode 而崩溃——桌面路径全程不触碰该控制器）。 + late final AnimationController _slideCtrl; + double _slideFrom = 1; // 1=从右滑入，-1=从左滑入 + String _prevLocation = ''; + int _prevBranch = 0; + + @override + void initState() { + super.initState(); + _slideCtrl = AnimationController( + vsync: this, duration: const Duration(milliseconds: 240), value: 1); + _prevLocation = widget.location; + _prevBranch = widget.navigationShell.currentIndex; + } + + @override + void didUpdateWidget(AppShell old) { + super.didUpdateWidget(old); + if (widget.location == _prevLocation) return; + final oldRoot = _tabRoots.contains(_prevLocation); + final newRoot = _tabRoots.contains(widget.location); + if (oldRoot && newRoot) { + // tab 间切换：按 tab 左右次序定方向 + final oldPos = _tabForBranch(_prevBranch); + final newPos = _tabForBranch(widget.navigationShell.currentIndex); + _slideFrom = newPos >= oldPos ? 1 : -1; + } else if (newRoot) { + _slideFrom = -1; // 退出二级屏 → 从左滑入 + } else { + _slideFrom = 1; // 进入二级屏/更深页 → 从右滑入 + } + _prevLocation = widget.location; + _prevBranch = widget.navigationShell.currentIndex; + if (MediaQuery.sizeOf(context).width < 600) { + _slideCtrl.forward(from: 0); + } + } + + @override + void dispose() { + _slideCtrl.dispose(); + super.dispose(); + } + /// 打开账号菜单（个人设置 / 退出登录）。[anchorContext] = 用户区组件的 context， /// 据其实测宽度让菜单等宽（不溢出内容区）、据其位置把菜单**完整弹到按钮正上方** /// （留 8px 间隙，不遮挡触发器，对齐原型）。 @@ -225,8 +272,9 @@ class _AppShellState extends ConsumerState { final isTabRoot = _tabRoots.contains(widget.location); // 窄屏横滑手势（2026-07-04 拍板）：tab 根左右滑切换相邻 tab（不循环）； - // 二级屏左滑退出（回来源/我的），右滑无响应。内容区里的横向滚动 - //（分段 tab / 表格横滚）在手势竞技场中优先，互不冲突。 + // 二级屏从左往右滑退出（iOS 返回习惯，回来源/我的），向左滑无响应。 + // 内容区里的横向滚动（分段 tab / 表格横滚）在手势竞技场中优先，互不冲突。 + // 切页时按方向播放一次性滑入过渡（_slideCtrl，didUpdateWidget 触发）。 Widget shellContent = widget.navigationShell; if (isMobile) { shellContent = GestureDetector( @@ -236,14 +284,29 @@ class _AppShellState extends ConsumerState { if (v.abs() < 200) return; // 轻微拖动不触发 if (isTabRoot) { final pos = _tabForBranch(widget.navigationShell.currentIndex); - final next = v < 0 ? pos + 1 : pos - 1; // 左滑→下一个 tab + final next = v < 0 ? pos + 1 : pos - 1; // 向左滑→下一个 tab if (next < 0 || next >= _mobileTabs.length) return; _goBranch(_mobileTabs[next].$3); - } else if (v < 0) { - _backFromSecondary(); // 左滑退出；右滑无响应 + } else if (v > 0) { + _backFromSecondary(); // 从左往右滑=退出；向左滑无响应 } }, - child: widget.navigationShell, + child: AnimatedBuilder( + animation: _slideCtrl, + builder: (ctx, child) { + final p = + Curves.easeOutCubic.transform(_slideCtrl.value); // 0→1 + final w = MediaQuery.sizeOf(ctx).width; + return Opacity( + opacity: 0.4 + 0.6 * p, + child: Transform.translate( + offset: Offset(_slideFrom * 0.18 * w * (1 - p), 0), + child: child, + ), + ); + }, + child: widget.navigationShell, + ), ); }