chore(favicon): 使用预发布环境的图标

src/app/tip/tip-screen.module.css

@@ -68,7 +68,27 @@
 .header {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.backButton {
+  display: grid;
+  width: 42px;
+  height: 42px;
+  place-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.72);
+  color: #382429;
+  box-shadow: 0 12px 26px rgba(112, 67, 66, 0.12);
+  cursor: pointer;
+  backdrop-filter: blur(18px);
+  transition: transform 0.18s ease, box-shadow 0.18s ease;
+}
+
+.backButton:active {
+  transform: scale(0.96);
 }
 
 .headerPill {
@@ -486,6 +506,7 @@
 }
 
 @media (hover: hover) {
+  .backButton:hover,
   .checkoutButton:not(:disabled):hover {
     transform: translateY(-1px);
   }

src/app/tip/tip-screen.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo, useState, type CSSProperties } from "react";
 import Image from "next/image";
-import { Heart, Sparkles } from "lucide-react";
+import { ArrowLeft, Heart, Sparkles } from "lucide-react";
 
 import { CharacterAvatar } from "@/app/_components";
 import { MobileShell } from "@/app/_components/core";
@@ -206,6 +206,10 @@ export function TipScreen({
     }
   };
 
+  const handleBack = () => {
+    navigator.back();
+  };
+
   const handleResetPaidState = () => {
     paymentDispatch({ type: "PaymentReset" });
   };
@@ -225,6 +229,16 @@ export function TipScreen({
         <div className={styles.bgGlowTwo} aria-hidden="true" />
 
         <header className={styles.header}>
+          <button
+            type="button"
+            data-analytics-key="tip.back"
+            data-analytics-label="Go back from tip"
+            className={styles.backButton}
+            aria-label="Go back"
+            onClick={handleBack}
+          >
+            <ArrowLeft size={19} aria-hidden="true" />
+          </button>
           <span className={styles.headerPill}>{character.copy.tipHeader}</span>
         </header>