From 65367f0d065d58862d7712c1cd38f0384263ceae Mon Sep 17 00:00:00 2001 From: 7015725 Date: Thu, 14 May 2026 03:00:15 +0800 Subject: [PATCH] feat: add interactive ToolApp back preview --- README.md | 8 +- code/th_02_core.js | 4 + code/th_09_animation.js | 4 + code/th_15_extra.js | 227 ++++++++++++++++++++++++++++++++++++---- manifest.json | 14 +-- manifest.sig | 2 +- 6 files changed, 225 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 8911d56..9eebd42 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ https://git.xin-blog.com/linshenjianlu/ShortX_ToolHub - **防回滚**：入口内置 `MIN_TRUSTED_MANIFEST_VERSION`，并记录本地已信任清单版本，拒绝旧版本清单。 - **本地可信回退**：网络或远端清单异常时，不盲目覆盖；已验证过的本地模块可继续使用。 - **App 化设置页**：设置主页、按钮管理、按钮编辑等页面使用统一 Shell 与页面栈，支持顶部返回/关闭。 -- **系统返回适配**：支持导航键返回；悬浮窗内置左右边缘滑动返回，优先在 ToolHub 页面栈内返回，栈空后关闭面板。 +- **系统返回适配**：支持导航键返回；悬浮窗内置左右边缘交互式滑动返回，拖动时实时露出上级页面，松手后完成返回。 - **ShortX 图标选择器**：支持图标点选、搜索、分页、自适应列数，不再依赖手填图标名。 - **颜色选择器**：使用折叠式完整调色板，支持常用色、最近色、RGB、透明度和实时预览；避免重复内联色板。 - **自适应布局**：ToolApp 根据屏幕尺寸调整宽高，按钮管理页底部操作区保持可见。 @@ -192,7 +192,8 @@ toolhub-targets-2026-rsa3072 - 设置、按钮管理、按钮编辑统一运行在 ToolApp Shell 内。 - 顶部栏提供返回与关闭，子页面优先通过页面栈返回。 - 系统返回键会优先回到上一页；没有上一页时关闭 ToolApp。 -- 悬浮窗无法稳定接入系统级预测性返回动画，因此 ToolHub 内置左右边缘滑动返回作为可用替代。 +- 悬浮窗无法稳定接入系统级预测性返回动画，因此 ToolHub 内置左右边缘交互式滑动返回作为替代。 +- 拖动过程中当前页面跟随手指横移，上级页面在底层实时露出；松手达到阈值后完成返回，未达到阈值则回弹。 - 面板尺寸按屏幕自适应，减少小屏溢出与大屏空白。 - 按钮管理页底部操作区保持可见，避免被列表内容挤出屏幕。 @@ -275,7 +276,8 @@ ToolHub.js.sha256 **功能改进** - 新增 ToolApp 式设置主页与页面栈，设置、按钮管理、按钮编辑改为更接近 App 的层级导航。 -- 支持系统导航返回；因 ToolHub 是悬浮窗 Overlay，系统级预测性返回动画不稳定，改为内置左右边缘滑动返回。 +- 支持系统导航返回；因 ToolHub 是悬浮窗 Overlay，系统级预测性返回动画不稳定，改为内置左右边缘交互式滑动返回。 +- 边缘返回拖动时会预渲染上级页面，当前页面随手指横移并露出上级页面，松手后完成返回或回弹。 - ToolApp 尺寸按屏幕自适应，按钮管理页底部操作区保持可见。 - 按钮管理与按钮编辑布局继续轻量化，减少说明文字和视觉负担。 - ShortX 图标选择器风格与设置 UI 对齐。 diff --git a/code/th_02_core.js b/code/th_02_core.js index 6655e2e..c376a98 100644 --- a/code/th_02_core.js +++ b/code/th_02_core.js @@ -51,7 +51,11 @@ function FloatBallAppWM(logger) { toolAppNavStack: [], toolAppRoute: null, toolAppRoot: null, + toolAppBody: null, toolAppContentHost: null, + toolAppBackPreviewView: null, + toolAppBackPreviewRoute: null, + toolAppBackPreviewReady: false, toolAppTitleView: null, toolAppBackButton: null, settingsGroupKey: null, diff --git a/code/th_09_animation.js b/code/th_09_animation.js index aec5e31..9d7c300 100644 --- a/code/th_09_animation.js +++ b/code/th_09_animation.js @@ -190,7 +190,11 @@ FloatBallAppWM.prototype.hideViewerPanel = function() { this.state.viewerPanelType = null; if (oldViewerType === "tool_app") { this.state.toolAppRoot = null; + this.state.toolAppBody = null; this.state.toolAppContentHost = null; + this.state.toolAppBackPreviewView = null; + this.state.toolAppBackPreviewRoute = null; + this.state.toolAppBackPreviewReady = false; this.state.toolAppTitleView = null; this.state.toolAppBackButton = null; } diff --git a/code/th_15_extra.js b/code/th_15_extra.js index 03b4daa..8de0ada 100644 --- a/code/th_15_extra.js +++ b/code/th_15_extra.js @@ -515,12 +515,199 @@ FloatBallAppWM.prototype.closeToolApp = function() { this.state.settingsGroupKey = null; this.hideViewerPanel(); this.state.toolAppRoot = null; + this.state.toolAppBody = null; this.state.toolAppContentHost = null; + this.state.toolAppBackPreviewView = null; + this.state.toolAppBackPreviewRoute = null; + this.state.toolAppBackPreviewReady = false; this.state.toolAppTitleView = null; this.state.toolAppBackButton = null; } catch (e) { safeLog(this.L, 'e', "closeToolApp fail: " + String(e)); } }; +FloatBallAppWM.prototype.clearToolAppBackPreview = function(resetCurrent) { + try { + var prev = this.state.toolAppBackPreviewView; + var root = this.state.toolAppRoot; + if (prev && root) { + try { root.removeView(prev); } catch (eRm) {} + } + this.state.toolAppBackPreviewView = null; + this.state.toolAppBackPreviewRoute = null; + this.state.toolAppBackPreviewReady = false; + var body = this.state.toolAppBody; + if (resetCurrent && body) { + try { body.animate().cancel(); } catch (eCancel) {} + try { body.setTranslationX(0); body.setAlpha(1); body.setScaleX(1); body.setScaleY(1); } catch (eBody) {} + } + } catch (e) { safeLog(this.L, 'w', "clear tool app back preview fail: " + String(e)); } +}; + +FloatBallAppWM.prototype.getToolAppPreviousStackEntry = function() { + try { + var st = this.state.toolAppNavStack || []; + if (!st || st.length <= 1) return null; + return st[st.length - 2]; + } catch (e) {} + return null; +}; + +FloatBallAppWM.prototype.makeToolAppStackEntry = function(route) { + return { + route: String(route || "settings"), + settingsGroupKey: String(this.state.settingsGroupKey || "") + }; +}; + +FloatBallAppWM.prototype.buildToolAppPreviewBody = function(route) { + try { + var r = this.isToolAppRoute(route) ? String(route) : "settings"; + var isDark = this.isDarkTheme(); + var C = this.ui.colors; + var body = new android.widget.LinearLayout(context); + body.setOrientation(android.widget.LinearLayout.VERTICAL); + body.setBackground(this.ui.createRoundDrawable(isDark ? C.bgDark : C.bgLight, this.dp(18))); + try { body.setElevation(this.dp(6)); } catch (eElev) {} + + var bar = new android.widget.LinearLayout(context); + bar.setOrientation(android.widget.LinearLayout.HORIZONTAL); + bar.setGravity(android.view.Gravity.CENTER_VERTICAL); + bar.setPadding(this.dp(8), this.dp(8), this.dp(8), this.dp(6)); + + var btnBack = this.ui.createFlatButton(this, "‹", C.primary, function() {}); + btnBack.setTextSize(android.util.TypedValue.COMPLEX_UNIT_SP, 24); + btnBack.setEnabled(false); + bar.addView(btnBack, new android.widget.LinearLayout.LayoutParams(this.dp(42), this.dp(38))); + + var tvTitle = new android.widget.TextView(context); + tvTitle.setText(String(this.getToolAppTitle(r) || "ToolHub")); + tvTitle.setTextColor(isDark ? C.textPriDark : C.textPriLight); + tvTitle.setTextSize(android.util.TypedValue.COMPLEX_UNIT_SP, 16); + tvTitle.setTypeface(null, android.graphics.Typeface.BOLD); + tvTitle.setGravity(android.view.Gravity.CENTER_VERTICAL); + var titleLp = new android.widget.LinearLayout.LayoutParams(0, -1); + titleLp.weight = 1; + bar.addView(tvTitle, titleLp); + + var btnClose = this.ui.createFlatButton(this, "✕", isDark ? C.textSecDark : C.textSecLight, function() {}); + btnClose.setTextSize(android.util.TypedValue.COMPLEX_UNIT_SP, 18); + btnClose.setEnabled(false); + bar.addView(btnClose, new android.widget.LinearLayout.LayoutParams(this.dp(42), this.dp(38))); + body.addView(bar, new android.widget.LinearLayout.LayoutParams(-1, this.dp(52))); + + var host = new android.widget.FrameLayout(context); + var raw = this.buildPanelView(r); + try { raw.setBackground(null); } catch (eBg) {} + try { raw.setElevation(0); } catch (eEl) {} + host.addView(raw, new android.widget.FrameLayout.LayoutParams(-1, -1)); + body.addView(host, new android.widget.LinearLayout.LayoutParams(-1, 0, 1)); + return body; + } catch (e) { + safeLog(this.L, 'w', "build tool app preview body fail route=" + String(route || "") + " err=" + String(e)); + } + return null; +}; + +FloatBallAppWM.prototype.prepareToolAppBackPreview = function(edge) { + try { + if (this.state.toolAppBackPreviewReady) return true; + var root = this.state.toolAppRoot; + var body = this.state.toolAppBody; + var prevEntry = this.getToolAppPreviousStackEntry(); + if (!root || !body || !prevEntry || !prevEntry.route) return false; + var prevRoute = String(prevEntry.route || "settings"); + var oldGroupKey = String(this.state.settingsGroupKey || ""); + if (prevRoute === "settings_group" && prevEntry.settingsGroupKey) this.state.settingsGroupKey = String(prevEntry.settingsGroupKey); + var prevBody = this.buildToolAppPreviewBody(prevRoute); + this.state.settingsGroupKey = oldGroupKey; + if (!prevBody) return false; + var lp = new android.widget.FrameLayout.LayoutParams(-1, -1); + prevBody.setAlpha(0.65); + prevBody.setScaleX(0.985); + prevBody.setScaleY(0.985); + prevBody.setTranslationX((Number(edge) === 1 ? 1 : -1) * this.dp(18)); + try { + root.addView(prevBody, 0, lp); + } catch (eAddIdx) { + try { root.addView(prevBody, lp); } catch (eAdd) { return false; } + try { prevBody.bringToFront(); body.bringToFront(); } catch (eFront) {} + } + try { body.bringToFront(); } catch (eBodyFront) {} + this.state.toolAppBackPreviewView = prevBody; + this.state.toolAppBackPreviewRoute = prevRoute; + this.state.toolAppBackPreviewReady = true; + return true; + } catch (e) { + safeLog(this.L, 'w', "prepare tool app back preview fail: " + String(e)); + } + return false; +}; + +FloatBallAppWM.prototype.applyToolAppBackPreviewProgress = function(edge, progress) { + try { + var p = Number(progress || 0); + if (isNaN(p)) p = 0; + if (p < 0) p = 0; + if (p > 1) p = 1; + if (!this.prepareToolAppBackPreview(edge)) return false; + var body = this.state.toolAppBody; + var prev = this.state.toolAppBackPreviewView; + var dir = Number(edge) === 1 ? -1 : 1; + var w = 0; + try { w = Number((this.state.viewerPanelLp && this.state.viewerPanelLp.width) || 0); } catch (eW0) {} + if (!w || w < this.dp(120)) { + try { w = Number((this.state.toolAppRoot && this.state.toolAppRoot.getWidth && this.state.toolAppRoot.getWidth()) || 0); } catch (eW1) {} + } + if (!w || w < this.dp(120)) w = this.dp(320); + if (body) { + body.setTranslationX(dir * w * p); + body.setAlpha(1.0 - 0.16 * p); + var s = 1.0 - 0.025 * p; + body.setScaleX(s); + body.setScaleY(s); + } + if (prev) { + prev.setAlpha(0.65 + 0.35 * p); + prev.setTranslationX(-dir * this.dp(18) * (1.0 - p)); + var ps = 0.985 + 0.015 * p; + prev.setScaleX(ps); + prev.setScaleY(ps); + } + return true; + } catch (e) { safeLog(this.L, 'w', "apply tool app back preview fail: " + String(e)); } + return false; +}; + +FloatBallAppWM.prototype.finishToolAppBackPreview = function(edge, complete) { + try { + var self = this; + var body = this.state.toolAppBody; + var dir = Number(edge) === 1 ? -1 : 1; + if (complete && body) { + var w = 0; + try { w = Number((this.state.viewerPanelLp && this.state.viewerPanelLp.width) || 0); } catch (eW0) {} + if (!w || w < this.dp(120)) w = this.dp(320); + body.animate().translationX(dir * w).alpha(0.78).setDuration(120).withEndAction(new java.lang.Runnable({ + run: function() { + try { self.clearToolAppBackPreview(true); } catch (eClear) {} + try { self.popToolAppPage("edge_swipe_back"); } catch (ePop) {} + } + })).start(); + return; + } + if (body) { + body.animate().translationX(0).alpha(1).scaleX(1).scaleY(1).setDuration(140).withEndAction(new java.lang.Runnable({ + run: function() { try { self.clearToolAppBackPreview(true); } catch (eClear2) {} } + })).start(); + } else { + this.clearToolAppBackPreview(true); + } + } catch (e) { + this.clearToolAppBackPreview(true); + safeLog(this.L, 'w', "finish tool app back preview fail: " + String(e)); + } +}; + FloatBallAppWM.prototype.createToolAppEdgeBackStrip = function(edge) { var self = this; var strip = new android.view.View(context); @@ -537,8 +724,9 @@ FloatBallAppWM.prototype.createToolAppEdgeBackStrip = function(edge) { if (action === android.view.MotionEvent.ACTION_DOWN) { downX = event.getRawX(); downY = event.getRawY(); - active = !!(self.state && self.state.toolAppActive); + active = !!(self.state && self.state.toolAppActive && self.getToolAppPreviousStackEntry()); moved = false; + if (active) self.prepareToolAppBackPreview(edge); return active; } if (!active) return false; @@ -546,33 +734,24 @@ FloatBallAppWM.prototype.createToolAppEdgeBackStrip = function(edge) { var mx = event.getRawX() - downX; var my = event.getRawY() - downY; var validDir = (edge === 0 && mx > 0) || (edge === 1 && mx < 0); - if (validDir && Math.abs(mx) > self.dp(8) && Math.abs(mx) > Math.abs(my)) { + if (validDir && Math.abs(mx) > self.dp(4) && Math.abs(mx) > Math.abs(my)) { moved = true; - var p = Math.min(1, Math.abs(mx) / self.dp(120)); - var panel = self.state ? self.state.toolAppRoot : null; - if (panel) { - try { - panel.setTranslationX((edge === 0 ? 1 : -1) * self.dp(28) * p); - panel.setAlpha(1.0 - 0.10 * p); - } catch (eAnim) {} - } + var p = Math.min(1, Math.abs(mx) / self.dp(180)); + self.applyToolAppBackPreviewProgress(edge, p); } return true; } if (action === android.view.MotionEvent.ACTION_UP || action === android.view.MotionEvent.ACTION_CANCEL) { var ux = event.getRawX() - downX; var uy = event.getRawY() - downY; - var okDir = (edge === 0 && ux > self.dp(56)) || (edge === 1 && ux < -self.dp(56)); - var ok = moved && okDir && Math.abs(ux) > Math.abs(uy) * 1.2; - try { self.resetPanelPredictiveBackVisual(self.state ? self.state.toolAppRoot : null); } catch (eReset) {} + var okDir = (edge === 0 && ux > self.dp(72)) || (edge === 1 && ux < -self.dp(72)); + var ok = (action === android.view.MotionEvent.ACTION_UP) && moved && okDir && Math.abs(ux) > Math.abs(uy) * 1.2; active = false; - if (ok) { - try { self.popToolAppPage("edge_swipe_back"); } catch (ePop) {} - return true; - } + self.finishToolAppBackPreview(edge, ok); return true; } } catch (e) { + try { self.clearToolAppBackPreview(true); } catch (eClear) {} try { safeLog(self.L, 'w', "tool app edge back fail: " + String(e)); } catch(eLog) {} } return false; @@ -643,6 +822,7 @@ FloatBallAppWM.prototype.buildToolAppShell = function(contentView, title, canBac } catch (eStrip) { safeLog(this.L, 'w', "add edge back strip fail: " + String(eStrip)); } this.state.toolAppRoot = root; + this.state.toolAppBody = body; this.state.toolAppContentHost = host; this.state.toolAppTitleView = tvTitle; this.state.toolAppBackButton = btnBack; @@ -762,9 +942,9 @@ FloatBallAppWM.prototype.showToolApp = function(route, resetStack) { this.state.previewMode = false; } if (resetStack || !this.state.toolAppNavStack || !this.state.toolAppNavStack.length) { - this.state.toolAppNavStack = [{ route: r }]; + this.state.toolAppNavStack = [this.makeToolAppStackEntry(r)]; } else { - this.state.toolAppNavStack[this.state.toolAppNavStack.length - 1] = { route: r }; + this.state.toolAppNavStack[this.state.toolAppNavStack.length - 1] = this.makeToolAppStackEntry(r); } var raw = this.buildPanelView(r); @@ -803,7 +983,7 @@ FloatBallAppWM.prototype.showToolApp = function(route, resetStack) { FloatBallAppWM.prototype.pushToolAppPage = function(route) { if (!this.isToolAppRoute(route)) return; if (!this.state.toolAppNavStack) this.state.toolAppNavStack = []; - this.state.toolAppNavStack.push({ route: String(route) }); + this.state.toolAppNavStack.push(this.makeToolAppStackEntry(route)); this.showToolApp(route, false); }; @@ -814,8 +994,8 @@ FloatBallAppWM.prototype.pushToolAppSettingsGroup = function(groupKey) { FloatBallAppWM.prototype.replaceToolAppPage = function(route) { if (!this.isToolAppRoute(route)) return; - if (!this.state.toolAppNavStack || !this.state.toolAppNavStack.length) this.state.toolAppNavStack = [{ route: String(route) }]; - else this.state.toolAppNavStack[this.state.toolAppNavStack.length - 1] = { route: String(route) }; + if (!this.state.toolAppNavStack || !this.state.toolAppNavStack.length) this.state.toolAppNavStack = [this.makeToolAppStackEntry(route)]; + else this.state.toolAppNavStack[this.state.toolAppNavStack.length - 1] = this.makeToolAppStackEntry(route); this.showToolApp(route, false); }; @@ -837,7 +1017,8 @@ FloatBallAppWM.prototype.popToolAppPage = function(reason) { this.state.toolAppNavStack.pop(); var top = this.state.toolAppNavStack[this.state.toolAppNavStack.length - 1]; var nextRoute = top && top.route ? String(top.route) : "settings"; - if (nextRoute !== "settings_group") this.state.settingsGroupKey = null; + if (nextRoute === "settings_group") this.state.settingsGroupKey = String((top && top.settingsGroupKey) ? top.settingsGroupKey : (this.state.settingsGroupKey || "")); + else this.state.settingsGroupKey = null; this.showToolApp(nextRoute, false); return true; } catch (e) { diff --git a/manifest.json b/manifest.json index 0aa56f7..5eb72bf 100644 --- a/manifest.json +++ b/manifest.json @@ -6,8 +6,8 @@ "size": 52546 }, "th_02_core.js": { - "sha256": "23b94eb4afbf978a75363b412b542d4f2b1f5260c63ab966dcf5b44076a05b6f", - "size": 4423 + "sha256": "c8d823e135a4b58a50336586ab13265e5ff4b72531633908b635b243401f461a", + "size": 4551 }, "th_03_icon.js": { "sha256": "717f7f37474d3616c2cd944581455f600020a850ec8812100d0546ec1302c987", @@ -34,8 +34,8 @@ "size": 7938 }, "th_09_animation.js": { - "sha256": "8c8c0c166816c36569923de31c2951d16fce5ca2e68168cb6190283e058d14c3", - "size": 35207 + "sha256": "1c323579c090e635f9ab52fb26c21151738e9a845e6c1a6ef86fdcc6adc16da6", + "size": 35383 }, "th_10_shell.js": { "sha256": "0ed793079c2f6ba7d29f4c0d411705cb72419f45f572cbe37ed32ac16527a8bc", @@ -58,8 +58,8 @@ "size": 239523 }, "th_15_extra.js": { - "sha256": "c39103bc3728fb6b5f0ced8975d064f50d7f6ef091355391f2f18b0d3c1cdb22", - "size": 79219 + "sha256": "2f440db325b0349e86bdfdfcea98c96aa84b1c4457b623d9e4219cd67c9d045a", + "size": 87017 }, "th_16_entry.js": { "sha256": "e7c99c3dfbd6aedab05551426955081ae6cae034754f2f557cefa01dc75dc001", @@ -68,5 +68,5 @@ }, "keyId": "toolhub-targets-2026-rsa3072", "schema": 2, - "version": 20260513185115 + "version": 20260513190003 } diff --git a/manifest.sig b/manifest.sig index f5dcd1c..62ec13a 100644 --- a/manifest.sig +++ b/manifest.sig @@ -1 +1 @@ -Fsvy+vxIvc2+e29Z+Wq+pxms/IVoB04bKhmiDZB5DYq47f5RD4rc12AiiHPFm6tdYY2JQ4Ri/2XAPFW+GGJnhKSLJ9ngw/eSfEKPwlmLqitLTXUMH0qdl68+3BtoDLrBEF9Io1XnmeaLHizEAOM/Ubu5qc+IeDgEbnoMBWI+1eYp/VkeBRxl1TDDhTkb5yiRDCxES8X67FSismFOGQfCFA5T1oSUmX1YdkUkkd29ihUFnP0Jm+L2UIH+etms2LEsaGDXm7JUlGLK145U3pAsjoZzx/00v1ytyNtmE2qgb0NFAcEJqx6fpmKWfF7Ix0IeUTyeCkQXJsKnGsiYe3RxLAL2GGBc3EanIDQJTgsnb5Q96mV37HmHqGk6l/T3hPMpSDkc2AMq/pD2YQTsahW6k22m+/hHCftIBCO/1HkpkBVx+gkrt09OUZPkREuwq+nERSCowgRZLbmSYCjK2Mkl8jn1sXKk017Ew0EjcVzcyk+8rUVnJo7s/Pz4cZgjIp5+ +TxKSEMoO+ieBxrJQNOj3L0B9LYm42eVfpbDI2kDu9ztx3VcxmIrTfg2NlvpL9JHVy3zSshl61nB21XqPchEwS8G3/hZzF8bEyiL0/H0QuvbpBxE6Q8ZhrS6iyuuGGpTfxOdrTYZ1NLw3y1eqlWt3zsPr4/vcEEMrr49yQJaWAYdkNUpL3687uFB6ZABZdOuPiUcf2vQC7V9T3+ltwFxaCH1bxig3AGmPDTbREqgTckn8hClliBsqtoUjhnADwpBu1fFoAhIdb+p+sqYgA3kL7plSQHPjfKDz6fQwwv2EXdzCMbIMipPpS0fSHoDY66Z29Lxyr2hwBsCsze0Sd5TFEt8Ri1q8srVHgSOcxnRfa752Alw10KbQ24YKmiUbR1oLVvjGN7k4b8dsdFCZEVSyXedYJY1a5TJFwH3CtCbKK0v/RPTMhlhNOczgVakXba1JukLAiq7BF7aGlEvIf9rMQqsvpywvlAuu1sQQVT+0JK6puOkvfRnXxh1KK/EN8pqj