leefer/xiaobaifupan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(HEL-75): 手机端丝滑度整改①——动效Token/按压反馈/日夜平滑/空态入场

Browse Source 
Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
施工员
2026-08-24 10:35:50 +08:00
co-authored by multica-agent
parent 6174efaee5
commit 7752648e4b
3 changed files with 104 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/frontend/m/css/shell.css
+82 -2
View File
@@ -23,6 +23,26 @@ body {
color: var(--text-primary);
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--motion-pop) var(--ease-press),
border-color var(--motion-pop) var(--ease-press);
}
.m-motion-fade-in {
animation: m-fade-in var(--motion-fade) var(--ease-press) both;
}
@keyframes m-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.m-motion-rise-in {
animation: m-rise-in var(--motion-enter) var(--ease-enter) both;
}
@keyframes m-rise-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.m-header {
@@ -35,6 +55,8 @@ body {
padding: 0 4px;
background: var(--surface);
border-bottom: 1px solid var(--border);
transition: background-color var(--motion-pop) var(--ease-press),
border-color var(--motion-pop) var(--ease-press);
}
.m-header-btn {
@@ -48,10 +70,14 @@ body {
background: transparent;
color: var(--text-primary);
cursor: pointer;
transition: transform var(--motion-press-release) var(--ease-press),
background-color var(--motion-press-release) var(--ease-press);
}
.m-header-btn:active {
background: var(--surface-hover);
transform: scale(0.94);
transition-duration: var(--motion-press);
}
.m-title {
@@ -63,6 +89,7 @@ body {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: color var(--motion-pop) var(--ease-press);
}
.m-actions {
@@ -135,11 +162,14 @@ body {
color: var(--text-primary);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform var(--motion-press-release) var(--ease-press),
background-color var(--motion-press-release) var(--ease-press);
}
.m-grid-item:active {
background: var(--surface);
transform: scale(0.96);
background: var(--surface-hover);
transform: scale(0.94);
transition-duration: var(--motion-press);
}
.m-grid-icon {
@@ -152,6 +182,8 @@ body {
background: var(--action-soft);
color: var(--action);
flex: 0 0 auto;
transition: background-color var(--motion-pop) var(--ease-press),
border-color var(--motion-pop) var(--ease-press);
}
.m-grid-icon svg {
@@ -168,6 +200,7 @@ body {
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100%;
transition: color var(--motion-pop) var(--ease-press);
}
.m-auth {
@@ -275,6 +308,14 @@ body {
font-size: var(--font-size-body);
font-weight: 600;
cursor: pointer;
transition: transform var(--motion-press-release) var(--ease-press),
background-color var(--motion-press-release) var(--ease-press);
}
.m-btn-primary:active {
background: var(--action-hover);
transform: scale(0.98);
transition-duration: var(--motion-press);
}
.m-btn-primary:disabled {
@@ -294,6 +335,8 @@ body {
padding-bottom: var(--mobile-safe-bottom);
background: var(--surface);
border-top: 1px solid var(--border);
transition: background-color var(--motion-pop) var(--ease-press),
border-color var(--motion-pop) var(--ease-press);
}
.m-tabbar-item {
@@ -310,10 +353,15 @@ body {
color: var(--text-tertiary);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform var(--motion-press-release) var(--ease-press),
background-color var(--motion-press-release) var(--ease-press),
color var(--motion-pop) var(--ease-press);
}
.m-tabbar-item:active {
background: var(--surface-hover);
transform: scale(0.94);
transition-duration: var(--motion-press), var(--motion-press), var(--motion-pop);
}
.m-tabbar-icon {
@@ -323,6 +371,12 @@ body {
width: 24px;
height: 24px;
flex: 0 0 auto;
transition: transform var(--motion-press-release) var(--ease-press);
}
.m-tabbar-item:active .m-tabbar-icon {
transform: scale(0.88);
transition-duration: var(--motion-press);
}
.m-tabbar-label {
@@ -351,6 +405,8 @@ body {
border-radius: 12px;
background: var(--surface);
box-shadow: var(--elevation-card);
transition: background-color var(--motion-pop) var(--ease-press),
border-color var(--motion-pop) var(--ease-press);
}
.m-theme-row-icon {
@@ -363,6 +419,8 @@ body {
background: var(--action-soft);
color: var(--action);
flex: 0 0 auto;
transition: background-color var(--motion-pop) var(--ease-press),
border-color var(--motion-pop) var(--ease-press);
}
.m-theme-row-body {
@@ -416,3 +474,25 @@ body {
.m-theme-switch[aria-checked="true"] .m-theme-switch-thumb {
transform: translateX(20px);
}
@media (prefers-reduced-motion: reduce) {
.m-motion-rise-in {
animation-name: m-fade-in;
animation-duration: 100ms;
}
.m-motion-fade-in {
animation-duration: 100ms;
}
.m-grid-item:active,
.m-header-btn:active,
.m-btn-primary:active,
.m-tabbar-item:active {
transform: none;
}
.m-tabbar-item:active .m-tabbar-icon {
transform: none;
}
}
app/frontend/m/css/tokens.css
+10
View File
@@ -30,6 +30,16 @@
--elevation-float: 0 12px 32px rgba(0, 0, 0, .14);
--backdrop: rgba(17, 24, 39, .48);
--motion-press: 100ms;
--motion-press-release: 160ms;
--motion-fade: 120ms;
--motion-enter: 260ms;
--motion-exit: 200ms;
--motion-pop: 240ms;
--ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
--ease-exit: cubic-bezier(0.4, 0, 1, 1);
--ease-press: ease-out;
--mobile-header-height: 52px;
--mobile-touch-size: 44px;
--mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
app/frontend/m/js/router.js
+12 -2
View File
@@ -144,7 +144,7 @@
}
function placeholderHtml(title, subtitle) {
return '<div class="m-placeholder">' +
return '<div class="m-placeholder m-motion-rise-in">' +
'<span class="m-placeholder-icon">' + icon("inbox", 26) + "</span>" +
"<h2>" + escapeHtml(title) + "</h2>" +
"<p>" + escapeHtml(subtitle || "该页面将在后续批次实现，返回即可继续浏览。") + "</p>" +
@@ -172,6 +172,16 @@
"</div></div>";
}
function syncThemeToggleUI() {
const dark = document.getElementById("m-app").dataset.theme === "dark";
const toggle = document.querySelector("[data-theme-toggle]");
if (toggle) toggle.setAttribute("aria-checked", dark ? "true" : "false");
const rowIcon = document.querySelector(".m-theme-row-icon");
if (rowIcon) rowIcon.innerHTML = icon(dark ? "moon" : "sun");
const rowBodySmall = document.querySelector(".m-theme-row-body small");
if (rowBodySmall) rowBodySmall.textContent = dark ? "当前：夜间模式" : "当前：日间模式";
}
function visibleHubItems(hub) {
const items = hub && hub.items ? hub.items : [];
return items.filter(function (item) {
@@ -339,7 +349,7 @@
const toggle = event.target.closest("[data-theme-toggle]");
if (!toggle) return;
global.MobileTheme.toggle();
render();
syncThemeToggleUI();
});
window.addEventListener("hashchange", function () {
if (internalNav > 0) {