diff --git a/frontend/pages.json b/frontend/pages.json
index 4a2f41f..2b0f39e 100644
--- a/frontend/pages.json
+++ b/frontend/pages.json
@@ -131,6 +131,15 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/castlove/mint/tear-card",
+			"style": {
+				"navigationStyle": "custom",
+				"app-plus": {
+					"bounce": "none"
+				}
+			}
+		},
 		{
 			"path": "pages/support-activity/index",
 			"style": {
diff --git a/frontend/pages/castlove/mint/tear-card.vue b/frontend/pages/castlove/mint/tear-card.vue
new file mode 100644
index 0000000..0da5658
--- /dev/null
+++ b/frontend/pages/castlove/mint/tear-card.vue
@@ -0,0 +1,28 @@
+<template>
+  <web-view :src="webviewUrl" @onError="onWebviewError"></web-view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const webviewUrl = ref('')
+
+// 底层图片地址，修改这里即可更换图片
+const BOTTOM_IMAGE_URL = '/static/sucai/image-02.png'
+
+onMounted(() => {
+  // 指向 static 目录下的 HTML 文件，带上图片参数
+  webviewUrl.value = `/static/html/tear-card.html?imageUrl=${encodeURIComponent(BOTTOM_IMAGE_URL)}`
+})
+
+function onWebviewError(e) {
+  console.error('Webview error:', e)
+}
+</script>
+
+<style scoped>
+web-view {
+  width: 100%;
+  height: 100vh;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/static/html/tear-card.html b/frontend/static/html/tear-card.html
new file mode 100644
index 0000000..a35f1ca
--- /dev/null
+++ b/frontend/static/html/tear-card.html
@@ -0,0 +1,629 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <!-- <title>伪3D撕纸 · 初始顶层覆盖 · 拖拽后露出底层</title> -->
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background: #1a1a2e;
+            color: #eee;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            user-select: none;
+            -webkit-user-select: none;
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        h1 {
+            font-size: 20px;
+            font-weight: 400;
+            color: #e94560;
+            margin-bottom: 8px;
+            letter-spacing: 0.5px;
+        }
+
+        .subtitle {
+            color: #aaa;
+            font-size: 13px;
+            margin-bottom: 30px;
+            text-align: center;
+            line-height: 1.7;
+        }
+
+        .tear-container {
+            position: relative;
+            width: 90vw;
+            height: 70vh;
+            background: transparent;
+            border-radius: 12px;
+            overflow: visible;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+            touch-action: none;
+            cursor: default;
+        }
+
+        .layer {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            pointer-events: none;
+            border-radius: 12px;
+            font-weight: bold;
+            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+            z-index: 1;
+        }
+
+        .layer-1 {
+            background: transparent;
+            color: rgba(0, 0, 0, 0.0);
+            font-size: 42px;
+            font-weight: 700;
+            pointer-events: auto;
+        }
+
+        .layer-1 img {
+            max-width: 80%;
+            max-height: 80%;
+            object-fit: contain;
+            display: none;
+        }
+
+        #tearCanvas {
+            position: absolute;
+            z-index: 10;
+            pointer-events: auto;
+            cursor: grab;
+            border-radius: 12px;
+        }
+
+        #tearCanvas:active {
+            cursor: grabbing;
+        }
+
+        .instructions {
+            margin-top: 20px;
+            color: #777;
+            font-size: 12px;
+            text-align: center;
+            line-height: 1.6;
+            max-width: 400px;
+        }
+
+        .reset-btn {
+            margin-top: 50px;
+            padding: 9px 24px;
+            background: transparent;
+            border: 1px solid #444;
+            color: #aaa;
+            border-radius: 20px;
+            cursor: pointer;
+            font-size: 13px;
+            transition: all 0.2s;
+            letter-spacing: 0.5px;
+        }
+
+        .reset-btn:hover {
+            border-color: #e94560;
+            color: #e94560;
+            box-shadow: 0 0 12px rgba(233, 68, 96, 0.2);
+        }
+
+        @media (max-width: 440px) {
+            .tear-container {
+                width: 90vw;
+                height: 70vh;
+            }
+
+            h1 {
+                font-size: 18px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <!-- <h1>伪3D撕纸 · 初始完全覆盖</h1> -->
+    <!-- <p class="subtitle">从顶部边缘向下拖拽 → 逐步撕开顶层，露出底层</p> -->
+    <div class="tear-container" id="container">
+        <div class="layer layer-1">
+            <img data-src="" alt="底层">
+        </div>
+        <canvas id="tearCanvas"></canvas>
+    </div>
+    <!-- <p class="instructions">
+        ⬇️ 从顶部边缘拖拽 → 顶层撕裂并弯曲，底层显露<br>
+        🖱️ 只有在锯齿线附近(±20px)移动，才能改变弯曲中心<br>
+        🌊 拖拽接近底部 → 顶层逐渐淡出消失，完全露出底层<br>
+        双击画布或点击按钮重置
+    </p> -->
+    <button class="reset-btn" id="resetBtn">重 置</button>
+
+    <script>
+        (function () {
+            const container = document.getElementById('container');
+            const canvas = document.getElementById('tearCanvas');
+            const ctx = canvas.getContext('2d');
+            const resetBtn = document.getElementById('resetBtn');
+
+            const PAD = 48;
+            const DRAG_THRESHOLD = 3;
+            const EDGE_THRESHOLD = 26;
+            const TEAR_TOLERANCE = 20;
+            const JAGGED_SEGMENTS = 18;
+            const JAGGED_AMPLITUDE = 5.0;
+            const JAGGED_FREQ = 3.5;
+            const MAX_BEND = 54;
+            const MIN_BEND = 5;
+            const SHADOW_OFFSET_FACTOR = 0.7;
+            const THICKNESS_COLOR = '#6B4226';
+            const FADE_START_DISTANCE = 48;
+
+            // 从URL参数或data-src获取图片地址
+            function getBottomImageSrc() {
+                const params = new URLSearchParams(window.location.search);
+                const urlParam = params.get('imageUrl');
+                const dataSrc = document.querySelector('.layer-1 img').dataset.src;
+                return urlParam || dataSrc || '';
+            }
+
+            const BOTTOM_IMAGE_SRC = getBottomImageSrc();
+            let bottomImageLoaded = false;
+            let bottomImgEl = null;
+
+            let isDragging = false;
+            let hasTorn = false;
+            let containerW = 0, containerH = 0;
+            let canvasW = 0, canvasH = 0;
+            let offsetX = PAD, offsetY = PAD;
+
+            let edgePosition = 0;          // 撕裂线Y坐标（从0开始向下）
+            let freeEdgeOffset = 0;         // 纸片翘起偏移量
+            let bendCenterX = 0;            // 弯曲中心X
+            let dragStartX = 0, dragStartY = 0;
+
+            function getCoords(e) {
+                const rect = container.getBoundingClientRect();
+                return { x: e.clientX - rect.left, y: e.clientY - rect.top, w: rect.width, h: rect.height };
+            }
+
+            function getTouchCoords(e) {
+                const touch = e.touches[0] || e.changedTouches[0];
+                const rect = container.getBoundingClientRect();
+                return { x: touch.clientX - rect.left, y: touch.clientY - rect.top, w: rect.width, h: rect.height };
+            }
+
+            function dist(x1, y1, x2, y2) { return Math.hypot(x1 - x2, y1 - y2); }
+            function clamp(v, min, max) { return Math.max(min, Math.min(max, v)); }
+
+            function getJaggedPoints(x1, y1, x2, y2, segments, amp, freq, seed) {
+                const points = [{ x: x1, y: y1 }];
+                const dx = x2 - x1, dy = y2 - y1;
+                const len = Math.hypot(dx, dy);
+                if (len < 1.5) { points.push({ x: x2, y: y2 }); return points; }
+                const ux = dx / len, uy = dy / len;
+                const px = -uy, py = ux;
+                for (let i = 1; i < segments; i++) {
+                    const t = i / segments;
+                    const bx = x1 + dx * t, by = y1 + dy * t;
+                    const offset = amp * (Math.sin(t * freq * Math.PI + seed) * 0.7 +
+                        Math.sin(t * freq * 2.3 * Math.PI + seed * 1.7) * 0.3);
+                    points.push({ x: bx + px * offset, y: by + py * offset });
+                }
+                points.push({ x: x2, y: y2 });
+                return points;
+            }
+
+            function cx(x) { return x + offsetX; }
+            function cy(y) { return y + offsetY; }
+
+            // 计算顶层剩余部分的透明度（用于底部淡出效果）
+            function getTopLayerAlpha() {
+                if (!hasTorn) return 1;
+                const distanceToBottom = containerH - edgePosition;
+                if (distanceToBottom <= 0) return 0;
+                if (distanceToBottom >= FADE_START_DISTANCE) return 1;
+                return distanceToBottom / FADE_START_DISTANCE;
+            }
+
+            function updateEdgeTearAndCenter(mx, my) {
+                if (!hasTorn) return;
+                let newPos = clamp(my, 0, containerH);
+                if (newPos > edgePosition) edgePosition = newPos;
+
+                const desiredOffset = -my;
+                const absOffset = Math.abs(desiredOffset);
+                const clampedOffset = Math.min(absOffset, MAX_BEND);
+                const signedOffset = desiredOffset >= 0 ? clampedOffset : -clampedOffset;
+                if (Math.abs(signedOffset) > Math.abs(freeEdgeOffset)) {
+                    freeEdgeOffset = signedOffset;
+                }
+
+                if (containerW > 0) {
+                    bendCenterX = clamp(mx, 8, containerW - 8);
+                }
+            }
+
+            // 预加载底层图片
+            function preloadBottomImage(callback) {
+                if (!BOTTOM_IMAGE_SRC) {
+                    callback();
+                    return;
+                }
+                bottomImgEl = new Image();
+                bottomImgEl.src = BOTTOM_IMAGE_SRC;
+                bottomImgEl.onload = () => {
+                    bottomImageLoaded = true;
+                    callback();
+                };
+                bottomImgEl.onerror = () => {
+                    bottomImageLoaded = false;
+                    callback();
+                };
+            }
+
+            // 绘制明亮的底层（青瓷色，与顶层形成对比）
+            function drawBaseLayer() {
+                const w = containerW, h = containerH;
+                const grad = ctx.createLinearGradient(cx(0), cy(0), cx(w * 0.3), cy(h * 0.7));
+                grad.addColorStop(0, '#E9F5EF');
+                grad.addColorStop(0.5, '#CDE5D9');
+                grad.addColorStop(1, '#B0D2C2');
+                ctx.fillStyle = grad;
+                ctx.fillRect(cx(0), cy(0), w, h);
+
+                // 网格纹理
+                ctx.save();
+                ctx.globalAlpha = 0.2;
+                ctx.lineWidth = 0.8;
+                ctx.strokeStyle = '#5D8B7A';
+                for (let i = 0; i < w; i += 25) {
+                    ctx.beginPath();
+                    ctx.moveTo(cx(i), cy(0));
+                    ctx.lineTo(cx(i), cy(h));
+                    ctx.stroke();
+                }
+                for (let i = 0; i < h; i += 25) {
+                    ctx.beginPath();
+                    ctx.moveTo(cx(0), cy(i));
+                    ctx.lineTo(cx(w), cy(i));
+                    ctx.stroke();
+                }
+                ctx.restore();
+
+                // 底层图片
+                if (bottomImageLoaded && bottomImgEl) {
+                    const scale = Math.min(w / bottomImgEl.width, h / bottomImgEl.height) * 0.8;
+                    const drawW = bottomImgEl.width * scale;
+                    const drawH = bottomImgEl.height * scale;
+                    ctx.drawImage(bottomImgEl, cx(w / 2 - drawW / 2), cy(h / 2 - drawH / 2), drawW, drawH);
+                }
+            }
+
+            // 绘制未被撕裂的顶层部分（即撕裂线以下区域）
+            function drawUnrippedTop(alpha) {
+                if (!hasTorn) return;
+                if (alpha <= 0) return;
+                const w = containerW, h = containerH;
+                const tearY = edgePosition;
+                if (tearY >= h) return;
+
+                ctx.save();
+                ctx.globalAlpha = alpha;
+                ctx.beginPath();
+                ctx.rect(cx(0), cy(tearY), w, h - tearY);
+                ctx.clip();
+
+                // 顶层完整覆盖区域的材质（深色仿牛皮纸）
+                const grad = ctx.createLinearGradient(cx(0), cy(tearY), cx(w * 0.5), cy(h));
+                grad.addColorStop(0, '#B87C4E');
+                grad.addColorStop(0.6, '#9C633A');
+                grad.addColorStop(1, '#7A4A28');
+                ctx.fillStyle = grad;
+                ctx.fillRect(cx(0), cy(tearY), w, h - tearY);
+
+                // 添加细微纹理
+                ctx.globalCompositeOperation = 'overlay';
+                ctx.globalAlpha = 0.12;
+                for (let i = 0; i < 200; i++) {
+                    ctx.fillStyle = '#FFF0D0';
+                    ctx.beginPath();
+                    ctx.arc(cx(Math.random() * w), cy(tearY + Math.random() * (h - tearY)), Math.random() * 2 + 0.5, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+                ctx.globalCompositeOperation = 'source-over';
+                ctx.restore();
+            }
+
+            // 绘制翘起的纸片（撕裂线以上部分，带弯曲和厚度）
+            function drawTornPiece(alpha) {
+                if (!hasTorn) return;
+                if (alpha <= 0) return;
+                const w = containerW, h = containerH;
+                const absOff = Math.abs(freeEdgeOffset);
+                if (absOff < 1) return;
+
+                const bendDir = freeEdgeOffset > 0 ? 1 : -1;
+                const bendAmount = clamp(absOff, MIN_BEND, MAX_BEND);
+
+                const jaggedStart = { x: 0, y: edgePosition };
+                const jaggedEnd = { x: w, y: edgePosition };
+                const freeEdgeStart = { x: 0, y: edgePosition + freeEdgeOffset };
+                const freeEdgeEnd = { x: w, y: edgePosition + freeEdgeOffset };
+
+                let dynamicCenterX = bendCenterX;
+                if (isNaN(dynamicCenterX)) dynamicCenterX = w / 2;
+                dynamicCenterX = clamp(dynamicCenterX, 8, w - 8);
+                const arcMidX = dynamicCenterX;
+                const arcMidY = edgePosition + freeEdgeOffset + freeEdgeOffset * 0.5;
+
+                const seed = jaggedStart.x * 0.37 + jaggedEnd.y * 0.53;
+                const jagged = getJaggedPoints(jaggedStart.x, jaggedStart.y, jaggedEnd.x, jaggedEnd.y, JAGGED_SEGMENTS,
+                    JAGGED_AMPLITUDE, JAGGED_FREQ, seed);
+
+                function buildPath(offX, offY) {
+                    const pts = [];
+                    for (const p of jagged) pts.push({ x: p.x + offX, y: p.y + offY });
+                    const cpOff = bendAmount * 0.15;
+                    pts.push({ x: freeEdgeEnd.x + offX + (bendDir * cpOff), y: freeEdgeEnd.y + offY });
+                    pts.push({ x: arcMidX + offX, y: arcMidY + offY });
+                    pts.push({ x: freeEdgeStart.x + offX + (bendDir * cpOff), y: freeEdgeStart.y + offY });
+                    return pts;
+                }
+
+                const mainPath = buildPath(0, 0);
+                const shadowDir = -bendDir;
+                const shadowDist = bendAmount * SHADOW_OFFSET_FACTOR;
+                const shadowPath = buildPath(shadowDir * shadowDist, 0);
+
+                ctx.save();
+                ctx.globalAlpha = alpha;
+
+                // 阴影
+                ctx.beginPath();
+                ctx.moveTo(cx(shadowPath[0].x), cy(shadowPath[0].y));
+                for (let i = 1; i < shadowPath.length; i++) ctx.lineTo(cx(shadowPath[i].x), cy(shadowPath[i].y));
+                ctx.closePath();
+                ctx.fillStyle = 'rgba(0,0,0,0.5)';
+                ctx.shadowBlur = 15;
+                ctx.shadowOffsetX = 3;
+                ctx.shadowOffsetY = 5;
+                ctx.fill();
+
+                // 厚度
+                const thick = bendAmount * 0.48;
+                function drawEdgeThick(p1, p2, sign) {
+                    const dx = p2.x - p1.x, dy = p2.y - p1.y;
+                    const len = Math.hypot(dx, dy);
+                    if (len < 1) return;
+                    const nx = -dy / len, ny = dx / len;
+                    const offNx = nx * thick * sign, offNy = ny * thick * sign;
+                    ctx.beginPath();
+                    ctx.moveTo(cx(p1.x), cy(p1.y));
+                    ctx.lineTo(cx(p1.x + offNx), cy(p1.y + offNy));
+                    ctx.lineTo(cx(p2.x + offNx), cy(p2.y + offNy));
+                    ctx.lineTo(cx(p2.x), cy(p2.y));
+                    ctx.closePath();
+                    const grad = ctx.createLinearGradient(cx(p1.x), cy(p1.y), cx(p2.x), cy(p2.y));
+                    grad.addColorStop(0, '#9B6A3C');
+                    grad.addColorStop(1, '#553A22');
+                    ctx.fillStyle = grad;
+                    ctx.fill();
+                }
+                drawEdgeThick(jagged[jagged.length - 1], mainPath[jagged.length], -1);
+                drawEdgeThick(mainPath[mainPath.length - 1], jagged[0], 1);
+
+                // 纸片正面（深色，与底层形成反差）
+                ctx.beginPath();
+                ctx.moveTo(cx(mainPath[0].x), cy(mainPath[0].y));
+                for (let i = 1; i < mainPath.length; i++) ctx.lineTo(cx(mainPath[i].x), cy(mainPath[i].y));
+                ctx.closePath();
+                const paperGrad = ctx.createLinearGradient(cx(freeEdgeStart.x), cy(freeEdgeStart.y), cx(jaggedStart.x), cy(jaggedStart.y));
+                paperGrad.addColorStop(0, '#D09E6E');
+                paperGrad.addColorStop(0.5, '#B47C48');
+                paperGrad.addColorStop(1, '#8B5A2E');
+                ctx.fillStyle = paperGrad;
+                ctx.fill();
+                ctx.strokeStyle = 'rgba(40,20,5,0.3)';
+                ctx.lineWidth = 1.2;
+                ctx.stroke();
+
+                // 弯曲高光
+                ctx.beginPath();
+                for (let i = jagged.length; i < mainPath.length; i++) ctx.lineTo(cx(mainPath[i].x), cy(mainPath[i].y));
+                ctx.strokeStyle = 'rgba(255,225,150,0.6)';
+                ctx.lineWidth = 2;
+                ctx.shadowBlur = 5;
+                ctx.stroke();
+
+                // 锯齿边缘金色高光
+                ctx.beginPath();
+                ctx.moveTo(cx(jagged[0].x), cy(jagged[0].y));
+                for (let i = 1; i < jagged.length; i++) ctx.lineTo(cx(jagged[i].x), cy(jagged[i].y));
+                ctx.strokeStyle = 'rgba(245,195,80,0.9)';
+                ctx.lineWidth = 2.0;
+                ctx.stroke();
+
+                ctx.restore();
+            }
+
+            // 绘制锯齿边缘线（撕裂线位置，仅在撕裂存在时显示）
+            function drawTearLine(alpha) {
+                if (!hasTorn) return;
+                if (alpha <= 0) return;
+                const w = containerW;
+                const seed = 0.618;
+                const jagged = getJaggedPoints(0, edgePosition, w, edgePosition, JAGGED_SEGMENTS, JAGGED_AMPLITUDE, JAGGED_FREQ, seed);
+                ctx.save();
+                ctx.globalAlpha = alpha;
+                ctx.beginPath();
+                ctx.moveTo(cx(jagged[0].x), cy(jagged[0].y));
+                for (let i = 1; i < jagged.length; i++) ctx.lineTo(cx(jagged[i].x), cy(jagged[i].y));
+                ctx.strokeStyle = 'rgba(210,150,70,0.8)';
+                ctx.lineWidth = 2.2;
+                ctx.shadowBlur = 6;
+                ctx.stroke();
+                ctx.restore();
+            }
+
+            // 绘制整个场景：底层 + 未被撕掉的顶层部分 + 翘起纸片 + 撕裂线
+            function drawScene() {
+                ctx.clearRect(0, 0, canvasW, canvasH);
+                drawBaseLayer();               // 先绘制底层（一直存在）
+
+                if (!hasTorn) {
+                    // 未撕裂时，绘制完整顶层覆盖
+                    ctx.save();
+                    const w = containerW, h = containerH;
+                    const grad = ctx.createLinearGradient(cx(0), cy(0), cx(w * 0.5), cy(h));
+                    grad.addColorStop(0, '#B87C4E');
+                    grad.addColorStop(0.6, '#9C633A');
+                    grad.addColorStop(1, '#7A4A28');
+                    ctx.fillStyle = grad;
+                    ctx.fillRect(cx(0), cy(0), w, h);
+                    // 添加纹理
+                    ctx.globalCompositeOperation = 'overlay';
+                    ctx.globalAlpha = 0.1;
+                    for (let i = 0; i < 300; i++) {
+                        ctx.fillStyle = '#FFF0D0';
+                        ctx.beginPath();
+                        ctx.arc(cx(Math.random() * w), cy(Math.random() * h), Math.random() * 2 + 0.5, 0, Math.PI * 2);
+                        ctx.fill();
+                    }
+                    ctx.restore();
+                    return;
+                }
+
+                // 已撕裂状态：先绘制未被撕裂的顶层部分（撕裂线以下区域）
+                const alpha = getTopLayerAlpha();
+                drawUnrippedTop(alpha);
+                // 绘制翘起的纸片（撕裂线以上）
+                drawTornPiece(alpha);
+                // 绘制锯齿撕裂线
+                drawTearLine(alpha);
+            }
+
+            function resizeCanvas() {
+                const rect = container.getBoundingClientRect();
+                const newW = Math.round(rect.width);
+                const newH = Math.round(rect.height);
+                if (containerW === newW && containerH === newH && canvasW > 0) return;
+
+                if (hasTorn && containerW > 0 && containerH > 0) {
+                    const sy = newH / containerH;
+                    edgePosition = Math.min(edgePosition * sy, newH);
+                    freeEdgeOffset *= sy;
+                }
+                containerW = newW;
+                containerH = newH;
+                canvasW = newW + 2 * PAD;
+                canvasH = newH + 2 * PAD;
+                offsetX = PAD;
+                offsetY = PAD;
+                canvas.width = canvasW;
+                canvas.height = canvasH;
+                canvas.style.width = canvasW + 'px';
+                canvas.style.height = canvasH + 'px';
+                canvas.style.left = -PAD + 'px';
+                canvas.style.top = -PAD + 'px';
+
+                if (containerW > 0) bendCenterX = clamp(bendCenterX, 5, containerW - 5);
+                else bendCenterX = containerW / 2;
+                drawScene();
+            }
+
+            // 交互逻辑
+            function onPointerDown(x, y) {
+                dragStartX = x;
+                dragStartY = y;
+                isDragging = true;
+            }
+
+            function onPointerMove(x, y) {
+                if (!isDragging) return;
+
+                if (!hasTorn) {
+                    if (dist(x, y, dragStartX, dragStartY) < DRAG_THRESHOLD) return;
+                    if (dragStartY > EDGE_THRESHOLD) {
+                        isDragging = false;
+                        return;
+                    }
+                    hasTorn = true;
+                    edgePosition = clamp(dragStartY, 0, containerH);
+                    let initOffset = -edgePosition;
+                    initOffset = clamp(initOffset, -MAX_BEND, MAX_BEND);
+                    freeEdgeOffset = initOffset;
+                    bendCenterX = clamp(dragStartX, 8, containerW - 8);
+                    drawScene();
+                    updateEdgeTearAndCenter(x, y);
+                    drawScene();
+                    return;
+                }
+
+                const distToLine = Math.abs(y - edgePosition);
+                if (distToLine <= TEAR_TOLERANCE) {
+                    updateEdgeTearAndCenter(x, y);
+                    drawScene();
+                }
+                // 线外不更新任何状态
+            }
+
+            function onPointerUp() {
+                isDragging = false;
+            }
+
+            function resetTear() {
+                hasTorn = false;
+                isDragging = false;
+                edgePosition = 0;
+                freeEdgeOffset = 0;
+                if (containerW > 0) bendCenterX = containerW / 2;
+                drawScene();
+            }
+
+            // 事件绑定 - 修复：同时在 container 和 canvas 上绑定双击事件
+            container.addEventListener('mousedown', (e) => { e.preventDefault(); const c = getCoords(e); onPointerDown(c.x, c.y); });
+            window.addEventListener('mousemove', (e) => { if (!isDragging) return; e.preventDefault(); const c = getCoords(e); onPointerMove(c.x, c.y); });
+            window.addEventListener('mouseup', onPointerUp);
+            container.addEventListener('touchstart', (e) => { e.preventDefault(); const c = getTouchCoords(e); onPointerDown(c.x, c.y); }, { passive: false });
+            window.addEventListener('touchmove', (e) => { if (!isDragging) return; e.preventDefault(); const c = getTouchCoords(e); onPointerMove(c.x, c.y); }, { passive: false });
+            window.addEventListener('touchend', onPointerUp);
+            window.addEventListener('touchcancel', onPointerUp);
+            
+            // 修复：在 container 和 canvas 上都添加双击事件
+            // container.addEventListener('dblclick', (e) => { e.preventDefault(); resetTear(); });
+            // canvas.addEventListener('dblclick', (e) => { e.preventDefault(); resetTear(); });
+            
+            resetBtn.addEventListener('click', resetTear);
+            window.addEventListener('resize', () => { clearTimeout(window._rst); window._rst = setTimeout(resizeCanvas, 100); });
+            window.addEventListener('orientationchange', () => setTimeout(resizeCanvas, 200));
+
+            // 设置底层图片
+            const imgEl = document.querySelector('.layer-1 img');
+            imgEl.src = BOTTOM_IMAGE_SRC;
+            imgEl.dataset.src = BOTTOM_IMAGE_SRC;
+
+            // 预加载完成后初始化
+            preloadBottomImage(() => {
+                resizeCanvas();
+                resetTear();
+            });
+            resetTear();
+        })();
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/frontend/utils/api.js b/frontend/utils/api.js
index f1fa43f..4735bef 100644
--- a/frontend/utils/api.js
+++ b/frontend/utils/api.js
@@ -1,7 +1,7 @@
 // API 基础配置
 // const baseURL = 'http://101.132.250.62:8080'
-// const baseURL = 'http://192.168.110.60:8080'
-const baseURL = 'http://localhost:8080'
+const baseURL = 'http://192.168.110.60:8080'
+// const baseURL = 'http://localhost:8080'
 
 // 是否使用模拟数据（开发调试时设为 true，后端API准备好后改为 false）
 const USE_MOCK_API = false
@@ -60,7 +60,8 @@ export function request(options) {
 					if (res.data && res.data.code !== undefined) {
 						if (res.data.code === 200) {
 							resolve(res.data)
-						} else if (res.data.code === 401 || res.data.code === 400 || res.data.code === 403) {
+						} else if (res.data.code === 401 || res.data.code === 400 || res.data
+							.code === 403) {
 							// 业务状态码401/400/403（未授权/冻结/封号），清除缓存并跳转到登录页
 							uni.removeStorageSync('access_token')
 							uni.removeStorageSync('user')
@@ -68,7 +69,8 @@ export function request(options) {
 							// 保留错误消息用于显示
 							const errorMsg = res.data.message || '登录已过期，请重新登录'
 							uni.reLaunch({
-								url: '/pages/login/login?error=' + encodeURIComponent(errorMsg)
+								url: '/pages/login/login?error=' + encodeURIComponent(
+									errorMsg)
 							})
 
 							reject(new Error(errorMsg))
diff --git a/横向瀑布流.html b/横向瀑布流.html
new file mode 100644
index 0000000..4136633
--- /dev/null
+++ b/横向瀑布流.html
@@ -0,0 +1,420 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <title>横向瀑布流 · 完美填满与呼吸间隙</title>
+  <style>
+    * { margin:0; padding:0; box-sizing:border-box; }
+    body { background:#0f0f14; overflow:hidden; height:100vh; height:-webkit-fill-available; font-family:system-ui, -apple-system, sans-serif; }
+    .scroll-container {
+      position:fixed; top:0; left:0; width:100vw; height:100vh; height:-webkit-fill-available;
+      overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; cursor:grab;
+    }
+    .scroll-container:active { cursor:grabbing; }
+    .scroll-container.dragging { cursor:grabbing; }
+    .waterfall-inner { position:relative; height:100%; min-height:100%; }
+    .card {
+      position:absolute; border-radius:14px; overflow:hidden; cursor:pointer;
+      transition: transform 0.25s, box-shadow 0.3s; will-change:transform;
+      box-shadow:0 4px 18px rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.06);
+      background-size:cover; background-position:center;
+      display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
+    }
+    .card:active { transform:scale(0.96); }
+    .card .pattern-layer { position:absolute; inset:0; opacity:0.25; pointer-events:none; }
+    .card .likes {
+      position:relative; z-index:1; color:white; font-weight:700; font-size:1rem;
+      text-shadow:0 2px 6px rgba(0,0,0,0.7); margin-bottom:12px; user-select:none;
+    }
+    .header {
+      position:fixed; top:0; left:0; right:0; z-index:100; padding:12px 18px;
+      display:flex; align-items:center; justify-content:space-between;
+      background:linear-gradient(180deg, rgba(15,15,20,0.95) 50%, rgba(15,15,20,0) 100%);
+      pointer-events:none;
+    }
+    .header > * { pointer-events:auto; }
+    .header-title { font-size:1.05rem; font-weight:700; color:#fff; display:flex; align-items:center; gap:8px; }
+    .header-dot { width:9px; height:9px; border-radius:50%; background:#ff6b6b; animation:pulse 2s infinite; }
+    @keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,107,107,0.6)} 50%{box-shadow:0 0 0 12px rgba(255,107,107,0)} }
+    .status { color:#ccc; font-size:0.8rem; }
+  </style>
+</head>
+<body>
+<div class="header">
+  <div class="header-title"><div class="header-dot"></div>灵感瀑布</div>
+  <div class="status" id="statusText">自动滚动中</div>
+</div>
+<div class="scroll-container" id="scrollContainer">
+  <div class="waterfall-inner" id="waterfallInner"></div>
+</div>
+
+<script>
+  (() => {
+    const container = document.getElementById('scrollContainer');
+    const inner = document.getElementById('waterfallInner');
+    const statusText = document.getElementById('statusText');
+
+    // ---------- 布局引擎（带列间隙填充）----------
+    class WaterfallLayout {
+      constructor(containerHeight, unitHeight = 35, minGap = 10, jitter = 0.4) {
+        this.containerHeight = containerHeight;
+        this.unitHeight = unitHeight;
+        this.minGap = minGap;
+        this.jitter = jitter;
+        this.recalcUnits();
+      }
+
+      recalcUnits() {
+        this.unitCount = Math.max(4, Math.round(this.containerHeight / this.unitHeight));
+        this.actualUnitHeight = this.containerHeight / this.unitCount;
+        this.rowCurrentX = new Array(this.unitCount).fill(0);
+      }
+
+      // 分段高度
+      computeHeights(allCards) {
+        const n = allCards.length;
+        if (n === 0) return new Map();
+        const sortedLikes = [...allCards.map(c => c.likes)].sort((a,b)=>a-b);
+        const heightMap = new Map();
+        const perturbation = 0.08;
+
+        for (const card of allCards) {
+          let less = 0, equal = 0;
+          for (const v of sortedLikes) {
+            if (v < card.likes) less++;
+            else if (v === card.likes) equal++;
+          }
+          const percentile = (less + equal * 0.5) / n;
+          let ratio;
+          if (percentile < 0.60) ratio = 0.25;
+          else if (percentile < 0.85) ratio = 0.333;
+          else if (percentile < 0.96) ratio = 0.5;
+          else ratio = 1.0;
+
+          const noise = 1 + (Math.random() - 0.5) * 2 * perturbation;
+          let rawHeight = this.containerHeight * ratio * noise;
+          rawHeight = Math.max(this.containerHeight * 0.22, Math.min(this.containerHeight, rawHeight));
+          const units = Math.round(rawHeight / this.actualUnitHeight);
+          const clampedUnits = Math.max(1, Math.min(units, this.unitCount));
+          const finalHeight = clampedUnits * this.actualUnitHeight;
+          heightMap.set(card.id, finalHeight);
+        }
+        return heightMap;
+      }
+
+      // 全量计算
+      compute(cardsData) {
+        this.rowCurrentX = new Array(this.unitCount).fill(0);
+        const heightMap = this.computeHeights(cardsData);
+        const rawCards = [];
+        for (const card of cardsData) {
+          const height = heightMap.get(card.id);
+          const width = (height * 9) / 16;
+          const units = Math.round(height / this.actualUnitHeight);
+          const span = Math.max(1, Math.min(units, this.unitCount));
+
+          let bestRow = 0, bestX = Infinity;
+          for (let r = 0; r <= this.unitCount - span; r++) {
+            let maxX = 0;
+            for (let s = 0; s < span; s++) maxX = Math.max(maxX, this.rowCurrentX[r + s]);
+            if (maxX < bestX) { bestX = maxX; bestRow = r; }
+          }
+          const left = bestX;
+          const top = bestRow * this.actualUnitHeight;
+          const gap = this.minGap + (Math.random() - 0.5) * this.minGap * this.jitter * 2;
+          const newX = left + width + gap;
+          for (let s = 0; s < span; s++) this.rowCurrentX[bestRow + s] = newX;
+
+          rawCards.push({ ...card, left, top, width, height, spanUnits: span });
+        }
+        // 应用列间隙分布
+        return this.applyColumnGaps(rawCards);
+      }
+
+      // 追加卡片并应用间隙
+      addCards(newCards, allCardsSoFar) {
+        const heightMap = this.computeHeights(allCardsSoFar);
+        const rawCards = [];
+        for (const card of newCards) {
+          const height = heightMap.get(card.id);
+          const width = (height * 9) / 16;
+          const units = Math.round(height / this.actualUnitHeight);
+          const span = Math.max(1, Math.min(units, this.unitCount));
+
+          let bestRow = 0, bestX = Infinity;
+          for (let r = 0; r <= this.unitCount - span; r++) {
+            let maxX = 0;
+            for (let s = 0; s < span; s++) maxX = Math.max(maxX, this.rowCurrentX[r + s]);
+            if (maxX < bestX) { bestX = maxX; bestRow = r; }
+          }
+          const left = bestX;
+          const top = bestRow * this.actualUnitHeight;
+          const gap = this.minGap + (Math.random() - 0.5) * this.minGap * this.jitter * 2;
+          const newX = left + width + gap;
+          for (let s = 0; s < span; s++) this.rowCurrentX[bestRow + s] = newX;
+
+          rawCards.push({ ...card, left, top, width, height, spanUnits: span });
+        }
+        return this.applyColumnGaps(rawCards);
+      }
+
+      // 核心：将每一列的剩余垂直空间随机分配为卡片间隙
+      applyColumnGaps(cards) {
+        if (cards.length === 0) return cards;
+        // 按 left 聚类成列（同一列的卡片 left 几乎相同）
+        const sorted = [...cards].sort((a,b) => a.left - b.left);
+        const columns = [];
+        let currentCol = [sorted[0]];
+        for (let i = 1; i < sorted.length; i++) {
+          const prev = currentCol[currentCol.length - 1];
+          if (Math.abs(sorted[i].left - prev.left) < this.minGap * 2) {
+            currentCol.push(sorted[i]);
+          } else {
+            columns.push(currentCol);
+            currentCol = [sorted[i]];
+          }
+        }
+        columns.push(currentCol);
+
+        // 处理每一列
+        for (const col of columns) {
+          // 按 top 排序
+          col.sort((a,b) => a.top - b.top);
+          const sumHeight = col.reduce((s, c) => s + c.height, 0);
+          const slack = this.containerHeight - sumHeight;
+          if (slack <= 0) continue; // 已满或超出，保持原样
+
+          const n = col.length;
+          // 生成 n-1 个间隙（如果只有一张卡片，则将 slack 分配为顶部间隙？不，单卡片直接全高即可，无需间隙）
+          if (n === 1) {
+            // 单卡片：可稍微增加高度到容器高度，或者保持原高度在顶部，底部留白就无法避免。
+            // 为了视觉一致，不改变单卡高度，但可以居中？为了简单，不做变动。
+            continue;
+          }
+
+          // 生成 n-1 个随机权重，归一化使总和为 slack
+          const rawWeights = Array.from({ length: n - 1 }, () => Math.random());
+          const weightSum = rawWeights.reduce((a,b) => a + b, 0) || 1;
+          const gaps = rawWeights.map(w => (w / weightSum) * slack);
+
+          // 调整每张卡片的 top
+          let currentTop = col[0].top;
+          col[0].finalTop = currentTop;
+          for (let i = 1; i < n; i++) {
+            currentTop += col[i-1].height + gaps[i-1];
+            col[i].finalTop = currentTop;
+          }
+          // 最后一张卡片底部：currentTop + lastCard.height 应等于 containerHeight
+          // 为精确，可微调最后一个间隙
+        }
+
+        // 合并 finalTop 到卡片对象
+        const updatedCards = cards.map(card => {
+          const colCard = columns.flat().find(c => c.id === card.id);
+          return {
+            ...card,
+            top: colCard?.finalTop !== undefined ? colCard.finalTop : card.top,
+            // 高度不变
+          };
+        });
+        return updatedCards;
+      }
+
+      getTotalWidth() {
+        return Math.max(...this.rowCurrentX) + this.minGap * 2;
+      }
+    }
+
+    // ---------- 颜色/图案 ----------
+    const palettes = [
+      { grad: 'linear-gradient(135deg, #2d1b69 0%, #4c1d95 50%, #5b21b6 100%)', acc: '#a78bfa' },
+      { grad: 'linear-gradient(135deg, #0c4a6e 0%, #0369a1 50%, #0284c7 100%)', acc: '#38bdf8' },
+      { grad: 'linear-gradient(135deg, #450a0a 0%, #991b1b 50%, #b91c1c 100%)', acc: '#f87171' },
+      { grad: 'linear-gradient(135deg, #064e3b 0%, #047857 50%, #059669 100%)', acc: '#4ade80' },
+      { grad: 'linear-gradient(135deg, #3b0764 0%, #6d28d9 50%, #7c3aed 100%)', acc: '#c084fc' },
+      { grad: 'linear-gradient(135deg, #78350f 0%, #b45309 50%, #d97706 100%)', acc: '#fbbf24' },
+      { grad: 'linear-gradient(135deg, #1e3a5f 0%, #1d4ed8 50%, #2563eb 100%)', acc: '#60a5fa' },
+      { grad: 'linear-gradient(135deg, #4a1942 0%, #9d174d 50%, #be185d 100%)', acc: '#f472b6' },
+    ];
+    function randomPalette() { return palettes[Math.floor(Math.random() * palettes.length)]; }
+    function patternSVG(acc, seed) {
+      const op = '0.15';
+      const shapes = ['circles','triangles','dots','waves'];
+      const s = shapes[seed % shapes.length];
+      if(s==='circles') return `<svg width="100%" height="100%" viewBox="0 0 200 150" preserveAspectRatio="none"><circle cx="30" cy="30" r="25" fill="none" stroke="${acc}" stroke-width="2" opacity="${op}"/><circle cx="160" cy="50" r="35" fill="none" stroke="${acc}" stroke-width="1.5" opacity="${op}"/><circle cx="80" cy="110" r="20" fill="none" stroke="${acc}" stroke-width="2" opacity="${op}"/></svg>`;
+      if(s==='triangles') return `<svg width="100%" height="100%" viewBox="0 0 200 150" preserveAspectRatio="none"><polygon points="40,20 70,70 10,70" fill="none" stroke="${acc}" stroke-width="1.5" opacity="${op}"/><polygon points="150,30 180,80 120,80" fill="none" stroke="${acc}" stroke-width="1" opacity="${op}"/></svg>`;
+      if(s==='dots') return `<svg width="100%" height="100%" viewBox="0 0 200 150" preserveAspectRatio="none"><circle cx="25" cy="25" r="3" fill="${acc}" opacity="${op}"/><circle cx="60" cy="40" r="2" fill="${acc}" opacity="${op}"/><circle cx="100" cy="20" r="4" fill="${acc}" opacity="${op}"/><circle cx="150" cy="55" r="2.5" fill="${acc}" opacity="${op}"/></svg>`;
+      if(s==='waves') return `<svg width="100%" height="100%" viewBox="0 0 200 150" preserveAspectRatio="none"><path d="M0,60 Q50,30 100,60 Q150,90 200,60" fill="none" stroke="${acc}" stroke-width="2" opacity="${op}"/><path d="M0,90 Q50,70 100,90 Q150,110 200,90" fill="none" stroke="${acc}" stroke-width="1.5" opacity="${op}"/></svg>`;
+      return '';
+    }
+
+    // ---------- 全局状态 ----------
+    let allCards = [];
+    let idCounter = 0;
+    const layout = new WaterfallLayout(window.innerHeight - 80, 35, 10, 0.4);
+    let autoScrollActive = true;
+    const autoScrollSpeed = 1.2;
+    let userInteracting = false;
+    let interactionTimeout = null;
+    const AUTO_RESUME_DELAY = 2500;
+
+    function createCardElement(cardData) {
+      const div = document.createElement('div');
+      div.className = 'card';
+      div.dataset.id = cardData.id;
+      div.style.left = cardData.left + 'px';
+      div.style.top = cardData.top + 'px';
+      div.style.width = cardData.width + 'px';
+      div.style.height = cardData.height + 'px';
+      div.style.background = cardData.palette.grad;
+      const pattern = document.createElement('div');
+      pattern.className = 'pattern-layer';
+      pattern.innerHTML = patternSVG(cardData.palette.acc, cardData.id);
+      div.appendChild(pattern);
+      const likesSpan = document.createElement('div');
+      likesSpan.className = 'likes';
+      likesSpan.textContent = '❤️ ' + cardData.likes;
+      div.appendChild(likesSpan);
+      return div;
+    }
+
+    function renderAllCards() {
+      inner.innerHTML = '';
+      const frag = document.createDocumentFragment();
+      allCards.forEach(c => frag.appendChild(createCardElement(c)));
+      inner.appendChild(frag);
+      inner.style.width = layout.getTotalWidth() + 'px';
+    }
+
+    function updateCardDOM(cardData) {
+      const el = document.querySelector(`.card[data-id="${cardData.id}"]`);
+      if (!el) return;
+      el.style.left = cardData.left + 'px';
+      el.style.top = cardData.top + 'px';
+      el.style.width = cardData.width + 'px';
+      el.style.height = cardData.height + 'px';
+      const likesEl = el.querySelector('.likes');
+      if (likesEl) likesEl.textContent = '❤️ ' + cardData.likes;
+    }
+
+    function generateBatch(count) {
+      const batch = [];
+      const minLikes = 20;
+      const maxLikes = 1800;
+      const alpha = 0.7;
+      for (let i = 0; i < count; i++) {
+        const u = Math.random();
+        const likes = Math.floor(minLikes + (maxLikes - minLikes) * Math.pow(1 - u, 1/alpha));
+        batch.push({ id: idCounter++, likes, palette: randomPalette() });
+      }
+      return batch;
+    }
+
+    function initLoad() {
+      const initialCards = generateBatch(50);
+      allCards = layout.compute(initialCards);
+      renderAllCards();
+    }
+
+    function appendMore(count = 35) {
+      const newCards = generateBatch(count);
+      const placed = layout.addCards(newCards, allCards);
+      allCards.push(...placed);
+      const frag = document.createDocumentFragment();
+      placed.forEach(c => frag.appendChild(createCardElement(c)));
+      inner.appendChild(frag);
+      inner.style.width = layout.getTotalWidth() + 'px';
+
+      const leftEdge = container.scrollLeft - 600;
+      allCards.forEach(c => {
+        if (c.left + c.width < leftEdge) {
+          const el = document.querySelector(`.card[data-id="${c.id}"]`);
+          if (el) el.remove();
+        }
+      });
+      if (allCards.length > 200) allCards = allCards.slice(-150);
+    }
+
+    function handleLike(cardId) {
+      const idx = allCards.findIndex(c => c.id == cardId);
+      if (idx === -1) return;
+      allCards[idx].likes += Math.floor(20 + Math.random() * 80);
+      const plainData = allCards.map(c => ({ id: c.id, likes: c.likes, palette: c.palette }));
+      const newLayout = layout.compute(plainData);
+      allCards = newLayout.map((c, i) => ({ ...c, palette: allCards[i].palette }));
+      allCards.forEach(c => updateCardDOM(c));
+      inner.style.width = layout.getTotalWidth() + 'px';
+    }
+
+    function autoScroll() {
+      if (!autoScrollActive || userInteracting) return;
+      container.scrollLeft += autoScrollSpeed;
+      const maxScroll = inner.scrollWidth - container.clientWidth;
+      if (container.scrollLeft >= maxScroll - 600) {
+        appendMore(35);
+      }
+      requestAnimationFrame(() => autoScroll());
+    }
+
+    function pauseAutoScroll() {
+      userInteracting = true;
+      statusText.textContent = '手动模式';
+      clearTimeout(interactionTimeout);
+      interactionTimeout = setTimeout(() => {
+        userInteracting = false;
+        autoScrollActive = true;
+        statusText.textContent = '自动滚动中';
+      }, AUTO_RESUME_DELAY);
+    }
+
+    container.addEventListener('wheel', (e) => {
+      if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
+      e.preventDefault();
+      container.scrollLeft += e.deltaY;
+      pauseAutoScroll();
+    }, { passive: false });
+
+    let dragging = false, startX, startScroll;
+    container.addEventListener('pointerdown', (e) => {
+      dragging = true;
+      startX = e.clientX;
+      startScroll = container.scrollLeft;
+      container.classList.add('dragging');
+      pauseAutoScroll();
+    });
+    window.addEventListener('pointermove', (e) => {
+      if (!dragging) return;
+      container.scrollLeft = startScroll + (startX - e.clientX);
+    });
+    window.addEventListener('pointerup', () => {
+      dragging = false;
+      container.classList.remove('dragging');
+    });
+
+    inner.addEventListener('click', (e) => {
+      const cardEl = e.target.closest('.card');
+      if (!cardEl) return;
+      const id = Number(cardEl.dataset.id);
+      handleLike(id);
+      pauseAutoScroll();
+    });
+
+    container.addEventListener('touchstart', () => pauseAutoScroll(), { passive: true });
+
+    window.addEventListener('resize', () => {
+      layout.containerHeight = window.innerHeight - 80;
+      layout.recalcUnits();
+      const plainData = allCards.map(c => ({ id: c.id, likes: c.likes, palette: c.palette }));
+      allCards = layout.compute(plainData);
+      renderAllCards();
+    });
+
+    initLoad();
+    autoScroll();
+
+    console.log('✨ 完美填满：随机垂直间隙分布，零底部留白');
+  })();
+</script>
+</body>
+</html>
\ No newline at end of file
