{"id":2678,"date":"2026-03-20T18:49:22","date_gmt":"2026-03-20T10:49:22","guid":{"rendered":"https:\/\/purestudio.com.tw\/official\/?p=2678"},"modified":"2026-04-09T00:48:34","modified_gmt":"2026-04-08T16:48:34","slug":"t-test-plus-analyzer","status":"publish","type":"post","link":"https:\/\/purestudio.com.tw\/official\/t-test-plus-analyzer\/","title":{"rendered":"\u2726 T\u6aa2\u5b9a-plus"},"content":{"rendered":"\n<div class=\"wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-ac719c21 wp-block-group-is-layout-flex\" style=\"margin-top:0;margin-bottom:0;padding-top:0px;padding-bottom:30px\">\n<h2 class=\"wp-block-heading has-x-large-font-size\">2026 \u7d71\u8a08\u5206\u6790\u5f15\u64ce<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div id=\"tp-engine-wrapper\">\n    <style>\n        \/* 1. \u57fa\u790e\u5bb9\u5668 - \u7dad\u6301\u5e95\u8272 #e2e2e2 *\/\n        #tp-engine-wrapper {\n            font-family: \"Inter\", \"PingFang TC\", \"Microsoft JhengHei\", sans-serif;\n            color: #2c2c2c;\n            line-height: 1.7;\n            max-width: 1000px;\n            margin: 0 auto;\n            padding: 20px;\n            background-color: #e2e2e2; \n            box-sizing: border-box;\n            position: relative;\n        }\n\n        #tp-engine-wrapper * { box-sizing: border-box; }\n\n        \/* \u9802\u90e8\u7cfb\u7d71\u72c0\u614b *\/\n        .tp-system-status {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            margin-bottom: 15px;\n            font-size: 0.85rem;\n            font-weight: 600;\n            color: #666;\n        }\n\n        .tp-status-dot {\n            width: 8px; height: 8px;\n            background-color: #4facfe;\n            border-radius: 50%;\n            box-shadow: 0 0 8px #4facfe;\n            animation: tp-pulse 2s infinite;\n        }\n\n        @keyframes tp-pulse {\n            0% { opacity: 1; }\n            50% { opacity: 0.4; }\n            100% { opacity: 1; }\n        }\n\n        \/* 2. \u6838\u5fc3\u770b\u677f - \u6f38\u5c64\u8207 Canvas *\/\n        .tp-hero-canvas {\n            position: relative;\n            width: 100%;\n            min-height: 450px;\n            border-radius: 20px;\n            margin-bottom: 25px;\n            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);\n            overflow: hidden;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            padding: 40px;\n            box-shadow: 0 10px 30px rgba(0,0,0,0.2);\n            z-index: 5;\n        }\n\n        #tp-curve-canvas {\n            position: absolute;\n            top: 0; left: 0;\n            width: 100%; height: 100%;\n            opacity: 0.6;\n            pointer-events: none;\n        }\n\n        .tp-main-title {\n            font-size: clamp(2rem, 5vw, 3.5rem);\n            font-weight: 900;\n            color: #ffffff;\n            z-index: 2;\n            text-shadow: 0 2px 10px rgba(0,0,0,0.5);\n            margin: 0 0 15px 0;\n            letter-spacing: -1px;\n            line-height: 1.1;\n        }\n\n        .tp-tagline {\n            margin-top:10px;\n            font-size: 1rem;\n            max-width: 650px;\n            color: rgba(255, 255, 255, 0.9);\n            background: rgba(255, 255, 255, 0.1);\n            padding: 15px;\n            border-radius: 12px;\n            backdrop-filter: blur(12px);\n            -webkit-backdrop-filter: blur(12px);\n            border: 1px solid rgba(255,255,255,0.15);\n            z-index: 2;\n        }\n\n        \/* \u5f71\u7247\u6309\u9215\u5340 *\/\n        .tp-video-trigger-wrap {\n            position: absolute;\n            bottom: 30px;\n            right: 30px;\n            z-index: 1000;\n        }\n\n        .tp-video-btn {\n            background: rgba(255, 255, 255, 0.15);\n            border: 1px solid rgba(255, 255, 255, 0.2);\n            color: white;\n            padding: 10px 24px;\n            border-radius: 10px;\n            font-size: 16px;\n            font-weight: 800;\n            cursor: pointer;\n            backdrop-filter: blur(20px);\n            transition: 0.2s;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            letter-spacing: 1px;\n        }\n\n        .tp-video-btn:hover {\n            background: #4facfe;\n            color: #000;\n            border-color: #4facfe;\n            transform: scale(1.05);\n        }\n\n        \/* \u5f71\u7247\u62bd\u5c5c *\/\n        .tp-video-drawer {\n            max-height: 0;\n            overflow: hidden;\n            transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);\n            width: 100%;\n            border-radius: 20px;\n            margin-bottom: 0;\n            opacity: 0;\n        }\n\n        .tp-video-drawer.is-open {\n            max-height: 800px;\n            margin-bottom: 25px;\n            opacity: 1;\n        }\n\n        .tp-video-container {\n            position: relative;\n            padding-bottom: 56.25%;\n            height: 0;\n            border-radius: 20px;\n            overflow: hidden;\n            background: #000;\n            box-shadow: 0 20px 40px rgba(0,0,0,0.2);\n        }\n\n        .tp-video-container iframe {\n            position: absolute;\n            top: 0; left: 0;\n            width: 100%; height: 100%;\n            border: 0;\n        }\n\n        \/* 3. \u529f\u80fd\u7db2\u683c *\/\n        .tp-feature-grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: 20px;\n        }\n\n        .tp-card {\n            background: #ffffff;\n            border: 1px solid #e0e0e0;\n            border-radius: 14px;\n            padding: 25px;\n            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n            box-shadow: 0 2px 5px rgba(0,0,0,0.02);\n            position: relative;\n        }\n\n        .tp-card:hover {\n            border-color: #4facfe;\n            transform: translateY(-8px);\n            box-shadow: 0 15px 35px rgba(0,0,0,0.12);\n            z-index: 10;\n        }\n\n        .tp-card-header { display: flex; align-items: center; margin-bottom: 15px; }\n\n        .tp-index-num {\n            background: #f1f5f9; color: #4facfe;\n            width: 26px; height: 26px;\n            display: flex; align-items: center; justify-content: center;\n            font-size: 0.8rem; font-weight: 900; border-radius: 6px; margin-right: 12px;\n        }\n\n        .tp-card-title { font-size: 1.15rem; font-weight: 800; color: #1a1a1a; }\n        .tp-item-title {\n            font-weight: 700; display: block; color: #444; font-size: 0.95rem;\n            margin-top: 15px; border-left: 3px solid #4facfe; padding-left: 8px;\n        }\n        .tp-item-desc { font-size: 0.85rem; color: #666; display: block; margin-top: 5px; line-height: 1.6; }\n\n        \/* 4. \u5e95\u90e8\u8f38\u51fa\u5340 *\/\n        .tp-export-box {\n            margin-top: 25px;\n            background: #0f172a;\n            color: #fff;\n            padding: 30px;\n            border-radius: 16px;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            gap: 20px;\n        }\n\n        .tp-export-text h3 { margin: 0; font-size: 1.2rem; color: #4facfe; }\n        .tp-export-text p { margin: 5px 0 0 0; font-size: 0.9rem; color: #94a3b8; }\n\n        .tp-btn {\n            background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);\n            color: #fff;\n            padding: 14px 32px; border-radius: 10px;\n            text-decoration: none; font-weight: 800; transition: 0.3s;\n            white-space: nowrap;\n        }\n\n        .tp-btn:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(79, 172, 254, 0.4); }\n\n        \/* 6. \u624b\u6a5f\u7248\u512a\u5316 *\/\n        @media (max-width: 768px) {\n            #tp-engine-wrapper {\n                padding: 0; \n            }\n\n            .tp-hero-canvas {\n                padding: 20px;\n                min-height: 380px;\n            }\n\n            .tp-video-trigger-wrap {\n                position: relative;\n                bottom: auto;\n                right: auto;\n                margin-top: 25px;\n            }\n\n            .tp-feature-grid {\n                grid-template-columns: 1fr;\n                gap: 20px;\n            }\n\n            .tp-export-box {\n                flex-direction: column;\n                text-align: center;\n                gap: 15px;\n            }\n\n            .tp-btn {\n                width: 100%;\n                text-align: center;\n            }\n        }\n    <\/style>\n\n    <div class=\"tp-system-status\">\n        <div class=\"tp-status-dot\"><\/div>\n        <span>STATISTICAL ENGINE READY | ALPHA = 0.05<\/span>\n    <\/div>\n\n    <header class=\"tp-hero-canvas\" id=\"tp-wall\">\n        <canvas id=\"tp-curve-canvas\"><\/canvas>\n        <h1 class=\"tp-main-title\">T\u6aa2\u5b9a-plus<br>\u667a\u6167\u7d71\u8a08\u5206\u6790\u5100<\/h1>\n        <div class=\"tp-tagline\">\n            \u5c08\u70ba\u7814\u7a76\u751f\u6253\u9020\u7684\u91cf\u5316\u7814\u7a76\u6551\u661f\u3002\u5167\u5efa\u667a\u6167\u9632\u79a6\u6a5f\u5236\uff0c\u81ea\u52d5\u5224\u5225\u6578\u64da\u5206\u4f48\u4e26\u751f\u6210 APA \u7b2c\u4e03\u7248\u6a19\u6e96\u6587\u672c\uff0c\u8b93\u7d71\u8a08\u4e0d\u518d\u662f\u5beb\u4f5c\u7684\u963b\u7919\u3002\n        <\/div>\n\n        <div class=\"tp-video-trigger-wrap\">\n            <button class=\"tp-video-btn\" onclick=\"toggleVideo()\">\n                <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n                \u5f71\u7247\u5c55\u793a\n            <\/button>\n        <\/div>\n    <\/header>\n\n    <div class=\"tp-video-drawer\" id=\"tpVideoDrawer\">\n        <div class=\"tp-video-container\">\n            <iframe id=\"tpIframe\" src=\"\" title=\"T\u6aa2\u5b9a Plus \u529f\u80fd\u6f14\u793a\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n        <\/div>\n    <\/div>\n\n    <div class=\"tp-feature-grid\">\n        <article class=\"tp-card\">\n            <div class=\"tp-card-header\">\n                <span class=\"tp-index-num\">A<\/span>\n                <div class=\"tp-card-title\">\u667a\u6167\u7d71\u8a08\u9632\u79a6<\/div>\n            <\/div>\n            <span class=\"tp-item-title\">\u5e38\u614b\u6027\u81ea\u52d5\u5075\u6e2c<\/span>\n            <span class=\"tp-item-desc\">\u5167\u5efa Shapiro-Wilk \u6aa2\u5b9a\uff0c\u81ea\u52d5\u8a55\u4f30\u6578\u64da\u5206\u4f48\uff0c\u78ba\u4fdd\u7d71\u8a08\u65b9\u6cd5\u7684\u7cbe\u78ba\u8207\u56b4\u8b39\u3002<\/span>\n            <span class=\"tp-item-title\">\u7121\u6bcd\u6578\u81ea\u52d5\u8f49\u8f09<\/span>\n            <span class=\"tp-item-desc\">\u7576\u6578\u64da\u4e0d\u7b26\u5408\u5e38\u614b\u5206\u4f48\u6642\uff0c\u7cfb\u7d71\u5c07\u81ea\u52d5\u5efa\u8b70\u4e26\u5207\u63db\u81f3\u7121\u6bcd\u6578\u5206\u6790\u8def\u5f91\uff0c\u4e26\u9644\u4e0a\u76f8\u95dc\u7279\u5225\u63d0\u9192\u3002<\/span>\n        <\/article>\n\n        <article class=\"tp-card\">\n            <div class=\"tp-card-header\">\n                <span class=\"tp-index-num\">B<\/span>\n                <div class=\"tp-card-title\">APA \u81ea\u52d5\u5316\u7522\u51fa<\/div>\n            <\/div>\n            <span class=\"tp-item-title\">\u6a19\u6e96\u5b78\u8853\u6587\u672c<\/span>\n            <span class=\"tp-item-desc\">\u5206\u6790\u5b8c\u6210\u5373\u523b\u751f\u6210 APA \u7b2c\u4e03\u7248\u683c\u5f0f\u5831\u544a\uff0c\u652f\u63f4\u4e00\u9375\u8907\u88fd\uff0c\u5927\u5e45\u7bc0\u7701\u8ad6\u6587\u7de8\u4fee\u6642\u9593\u3002<\/span>\n            <span class=\"tp-item-title\">\u986f\u8457\u6027\u5dee\u7570\u81ea\u52d5\u6a19\u8a18<\/span>\n            <span class=\"tp-item-desc\">\u4e00\u9375\u751f\u6210\u5b78\u8853\u7b49\u7d1a\u7684\u5716\u8868\uff0c\u4e26\u81ea\u52d5\u6a19\u793a\u986f\u8457\u6027\u5dee\u7570\u7b26\u865f\u3002<\/span>\n        <\/article>\n\n        <article class=\"tp-card\">\n            <div class=\"tp-card-header\">\n                <span class=\"tp-index-num\">C<\/span>\n                <div class=\"tp-card-title\">\u5168\u65b9\u4f4d\u6aa2\u5b9a\u6a21\u7d44<\/div>\n            <\/div>\n            <span class=\"tp-item-title\">\u56db\u6838\u5fc3\u5206\u6790\u67b6\u69cb<\/span>\n            <span class=\"tp-item-desc\">\u56ca\u62ec\u55ae\u4e00\u6a23\u672c\u3001\u7368\u7acb\u6a23\u672c\u3001\u6210\u5c0d\u6a23\u672c T \u6aa2\u5b9a\u53ca\u55ae\u56e0\u5b50\u8b8a\u7570\u6578\u5206\u6790 (ANOVA)\u3002<\/span>\n            <span class=\"tp-item-title\">\u5c08\u696d\u8996\u89ba\u5316\u5716\u8868<\/span>\n            <span class=\"tp-item-desc\">\u4e00\u9375\u7522\u51fa\u9ad8\u89e3\u6790\u5ea6\u7bb1\u578b\u5716\u8207\u5e73\u5747\u6578\u6bd4\u8f03\u5716\uff0c\u8b93\u6578\u64da\u8da8\u52e2\u4e00\u773c\u6d1e\u5bdf\u3002<\/span>\n        <\/article>\n\n        <article class=\"tp-card\">\n            <div class=\"tp-card-header\">\n                <span class=\"tp-index-num\">D<\/span>\n                <div class=\"tp-card-title\">\u884c\u52d5\u7814\u7a76\u5ba4<\/div>\n            <\/div>\n            <span class=\"tp-item-title\">\u8de8\u88dd\u7f6e\u901a\u7528\u6280\u8853<\/span>\n            <span class=\"tp-item-desc\">\u652f\u63f4 iPhone \u8207 iPad \u6a6b\u76f4\u5c4f\u64cd\u4f5c\uff0c\u96a8\u6642\u96a8\u5730\u5728\u5496\u5561\u5ef3\u6216\u7814\u7a76\u5ba4\u555f\u52d5\u5206\u6790\u3002<\/span>\n            <span class=\"tp-item-title\">CSV \u9ad8\u901f\u532f\u5165<\/span>\n            <span class=\"tp-item-desc\">\u4ed8\u8cbb\u89e3\u9396 CSV \u6279\u6b21\u529f\u80fd\uff0c\u6578\u5343\u7b46\u554f\u5377\u6578\u64da\u4e00\u79d2\u8f09\u5165\uff0c\u5fb9\u5e95\u89e3\u653e\u96d9\u624b\u3002<\/span>\n        <\/article>\n    <\/div>\n\n    <section class=\"tp-export-box\">\n        <div class=\"tp-export-text\">\n            <h3>\u555f\u52d5\u91cf\u5316\u7814\u7a76\u65b0\u5883\u754c<\/h3>\n            <p>\u624b\u52d5\u6a21\u5f0f\u6c38\u4e45\u514d\u8cbb\uff0cCSV \u6279\u6b21\u532f\u5165\u4e00\u6b21\u6027\u8cb7\u65b7\uff0c\u96a8\u624b\u638c\u63e1\u7d71\u8a08\u6578\u64da\u3002<\/p>\n        <\/div>\n        <a href=\"https:\/\/apps.apple.com\/tw\/app\/t%E6%AA%A2%E5%AE%9A-plus\/id6759829255\" class=\"tp-btn\" target=\"_blank\">\u53d6\u5f97\u91cf\u5316\u5f15\u64ce \u2192<\/a>\n    <\/section>\n\n    <footer style=\"margin-top:40px; text-align:center; font-size:0.75rem; color:#888; letter-spacing: 2px;\">\n        \u00a9 T-TEST PLUS | ADVANCED STATISTICAL SOLUTIONS\n    <\/footer>\n\n    <script>\n        function toggleVideo() {\n            const drawer = document.getElementById('tpVideoDrawer');\n            const iframe = document.getElementById('tpIframe');\n            const videoSrc = \"https:\/\/www.youtube.com\/embed\/VOe1-A0KCSM?si=NUqm769sxTmjt3P2&autoplay=1\";\n            \n            drawer.classList.toggle('is-open');\n            \n            if(drawer.classList.contains('is-open')) {\n                iframe.src = videoSrc;\n                setTimeout(() => {\n                    drawer.scrollIntoView({ behavior: 'smooth', block: 'center' });\n                }, 300);\n            } else {\n                iframe.src = \"\";\n            }\n        }\n\n        (function() {\n            const canvas = document.getElementById('tp-curve-canvas');\n            const ctx = canvas.getContext('2d');\n            const wall = document.getElementById('tp-wall');\n            let width, height;\n            let mouseX = 0, lastMouseX = 0, mouseVelocity = 0;\n            let controlStrength = 0;\n            let tick = 0;\n\n            const globalConfig = {\n                yRange: [0.45, 0.88],\n                globalSpeed: 0.012,\n                whipPower: 2.5,\n                edgeFade: 2.2\n            };\n\n            const curveStyles = [\n                ['#4facfe', 1.0, 2.1, 0.8, 0.022, 55, 0.85],\n                ['#00f2fe', 0.6, 1.8, 0.0, 0.015, 35,  0.78],\n                ['#c3e88d', 0.4, 1.5, 0.0, 0.008, 28,  0.82],\n                ['#4facfe', 0.2, 1.2, 0.0, 0.028, 37,  0.72],\n                ['#ffffff', 0.1, 1.0, 0.0, 0.005, 28,  0.96]\n            ];\n\n            function resize() {\n                width = canvas.width = wall.offsetWidth;\n                height = canvas.height = wall.offsetHeight;\n            }\n            window.addEventListener('resize', resize);\n            resize();\n\n            function calcWhip(x, tick, flowSpeed) {\n                const t = tick * flowSpeed * 130;\n                const w1 = Math.sin(x * 0.005 + t) * 1.2;\n                const w2 = Math.sin(x * 0.012 + t * 0.8) * 0.6;\n                const w3 = Math.cos(x * 0.003 - t * 0.3) * 0.4;\n                const combined = w1 + w2 + w3;\n                return Math.sign(combined) * Math.pow(Math.abs(combined), globalConfig.whipPower);\n            }\n\n            function animate() {\n                tick += globalConfig.globalSpeed; \n                ctx.clearRect(0, 0, width, height);\n                \n                const deltaX = mouseX - lastMouseX;\n                mouseVelocity = Math.abs(deltaX) * 0.2; \n                lastMouseX = mouseX;\n\n                if (mouseVelocity > 0.5) {\n                    controlStrength += (1.0 - controlStrength) * 0.1;\n                } else {\n                    controlStrength += (0 - controlStrength) * 0.02;\n                }\n\n                curveStyles.forEach((style, index) => {\n                    const [color, opacity, lineWidth, followWeight, flowSpeed, amplitude, yPosFactor] = style;\n                    const isMainLine = (index === 0);\n                    const driftMean = width \/ 2 + Math.sin(tick * 0.4 + index) * (width * 0.38);\n                    let currentMean = isMainLine ? ( (width \/ 2 + (mouseX - width \/ 2) * 0.85) * controlStrength * followWeight) + (driftMean * (1 - (controlStrength * followWeight))) : driftMean;\n\n                    ctx.beginPath();\n                    ctx.strokeStyle = color + Math.floor((isMainLine ? (0.8 + controlStrength * 0.2) : 1) * opacity * 255).toString(16).padStart(2, '0');\n                    ctx.lineWidth = lineWidth + (isMainLine ? controlStrength * 1.5 : 0);\n\n                    for (let i = 0; i < width; i += 3) {\n                        const distFromCenter = Math.abs(i - width \/ 2) \/ (width \/ 2);\n                        const globalFade = Math.exp(-Math.pow(distFromCenter * globalConfig.edgeFade, 2)); \n                        const envWidth = 85 + (isMainLine ? -controlStrength * 20 : 0);\n                        const localEnvelope = Math.exp(-0.5 * Math.pow((i - currentMean) \/ envWidth, 2));\n                        const dynamicAmp = amplitude + (isMainLine ? controlStrength * 30 : 0);\n                        const whip = calcWhip(i, tick, flowSpeed) * dynamicAmp * localEnvelope;\n                        const rawYFactor = yPosFactor - (localEnvelope * 0.1);\n                        const clampedYFactor = Math.min(Math.max(rawYFactor, globalConfig.yRange[0]), globalConfig.yRange[1]);\n                        const y = (height * clampedYFactor) - whip * globalFade;\n\n                        if (i === 0) ctx.moveTo(i, y);\n                        else ctx.lineTo(i, y);\n                    }\n                    ctx.stroke();\n                });\n                requestAnimationFrame(animate);\n            }\n\n            let targetMouseX = width \/ 2;\n            wall.addEventListener('mousemove', (e) => {\n                const rect = wall.getBoundingClientRect();\n                targetMouseX = e.clientX - rect.left;\n            });\n\n            setInterval(() => {\n                mouseX += (targetMouseX - mouseX) * 0.12;\n            }, 16);\n\n            animate();\n        })();\n    <\/script>\n<\/div>\n\n\n\n<div class=\"tp-global-container\" style=\"width: 100%; user-select: none; -webkit-user-select: none; display: flex; flex-direction: column; align-items: center; padding: 0;\">\n    <style>\n        \/* =============================================\n           1. \u8a2d\u5099\u5207\u63db\uff1a\u9ad8\u4eae\u6253\u78e8\u73bb\u7483\n           ============================================= *\/\n        .tp-device-switcher-wrap {\n            margin-top: 55px; margin-bottom: 0px; display: flex; justify-content: center;\n            z-index: 30; position: relative;\n        }\n        .tp-device-switcher {\n            background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(20px) saturate(180%);\n            -webkit-backdrop-filter: blur(20px) saturate(180%);\n            padding: 6px; border-radius: 14px; display: flex; gap: 6px;\n            border: 1px solid rgba(255, 255, 255, 0.8);\n            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.3);\n        }\n        .tp-nav-tab {\n            position: relative; color: rgba(60, 60, 60, 0.6); font-family: \"SF Pro Text\", sans-serif;\n            font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600;\n            cursor: pointer; padding: 10px 24px; border-radius: 10px; transition: 0.4s;\n        }\n        .tp-nav-tab.active { color: #000; background: rgba(255, 255, 255, 0.7); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); }\n        .tp-nav-tab.active::after {\n            content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);\n            width: 14px; height: 2px; background: rgba(0, 0, 0, 0.4); border-radius: 4px;\n        }\n\n        \/* =============================================\n           2. \u8a2d\u5099\u5bb9\u5668\uff1a\u7e2e\u653e\u8207\u7269\u7406\u63a8\u79fb\u6838\u5fc3\n           ============================================= *\/\n        .tp-device-wrapper { \n            position: relative; display: none; width: 100%; max-width: 1000px; \n            line-height: 0; touch-action: none;\n            transition: margin-bottom 0.5s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n        }\n        \n        .tp-device-wrapper img {\n            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n            transform-origin: center center;\n        }\n\n        .tp-base-frame { width: 100%; height: auto; display: block; pointer-events: none; }\n        .tp-flow-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }\n        \n        .tp-screen-handler { \n            position: absolute; z-index: 10; cursor: pointer; -webkit-tap-highlight-color: transparent;\n            transform-origin: center top; \n            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s, box-shadow 0.4s;\n        }\n\n        @keyframes glow-main {\n            0%, 100% { border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 0 45px rgba(255, 255, 255, 0.1); }\n            50% { border-color: rgba(255, 255, 255, 1); box-shadow: 0 0 260px rgba(255, 255, 255, 0.7); }\n        }\n\n        #mac-screen-handler { top: 19.0%; left: 10.95%; width: 77.8%; height: 66.5%; border: 0.3px solid rgba(255, 255, 255, 0.3); border-radius: 11px; animation: glow-main 3.8s infinite; }\n        #ipad-screen-handler { top: 11.0%; left: 28.9%; width: 42.0%; height: 80.0%; border: 0.4px solid rgba(255, 255, 255, 0.3); border-radius: 10px; animation: glow-main 3.5s infinite; }\n        #iphone-screen-handler { top: 41.7%; left: 41.1%; width: 17.65%; height: 51.5%; border: 0.4px solid rgba(255, 255, 255, 0.3); border-radius: 27px; animation: glow-main 2.3s infinite; }\n\n        \/* =============================================\n           3. \u72c0\u614b\u8cc7\u8a0a\u8207\u653e\u5927\u6309\u9215\n           ============================================= *\/\n        .tp-status-text-wrap { \n            margin-top: 20px; padding: 8px 22px; \n            background: linear-gradient(145deg, #333 0%, #111 100%);\n            border-radius: 4px; display: flex; align-items: center;\n            position: relative; z-index: 25;\n        }\n        .tp-status-text { color: #E2E2E2; font-family: \"SF Pro Text\", sans-serif; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; }\n\n        .tp-zoom-controls { display: none; gap: 8px; margin-top: 20px; z-index: 25; position: relative; }\n        .tp-zoom-btn {\n            background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(0,0,0,0.05);\n            padding: 5px 12px; border-radius: 6px; font-size: 10px; font-weight: 700;\n            color: #555; cursor: pointer; transition: 0.3s;\n        }\n        .tp-zoom-btn.active { background: #000; color: #fff; border-color: #000; }\n\n        @media (max-width: 1024px) {\n            .tp-zoom-controls { display: flex; }\n            #ipad-screen-handler { border-radius: 9px; }\n            #iphone-screen-handler { border-radius: 27px; }\n        }\n\n        @media (max-width: 767px) {\n            .tp-nav-tab { padding: 8px 18px; font-size: 10px; letter-spacing: 1.5px; }\n            #mac-screen-handler { width: 77.55%; height: 66.1%; border-radius: 2.6px; }\n            #ipad-screen-handler { width: 41.75%; height: 79.5%; border-radius: 3.5px; }\n            #iphone-screen-handler { top: 41.7%;width: 17.5%; height: 51.2%; border-radius: 9.3px; }\n        }\n    <\/style>\n\n    <div class=\"tp-device-switcher-wrap\">\n        <div class=\"tp-device-switcher\">\n            <div id=\"tab-mac\" class=\"tp-nav-tab active\" onclick=\"switchDevice('mac')\">Mac<\/div>\n            <div id=\"tab-ipad\" class=\"tp-nav-tab\" onclick=\"switchDevice('ipad')\">iPad<\/div>\n            <div id=\"tab-iphone\" class=\"tp-nav-tab\" onclick=\"switchDevice('iphone')\">iPhone<\/div>\n        <\/div>\n    <\/div>\n\n    <div id=\"mac-wrapper\" class=\"tp-device-wrapper\" style=\"display: inline-block;\">\n        <img decoding=\"async\" src=\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/mac-mockup-frame.webp\" class=\"tp-base-frame\">\n        <img decoding=\"async\" id=\"mac-screen\" src=\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/mac-flow-01-main-menu.webp\" class=\"tp-flow-layer\">\n        <div id=\"mac-screen-handler\" class=\"tp-screen-handler\"><\/div>\n    <\/div>\n\n    <div id=\"ipad-wrapper\" class=\"tp-device-wrapper\">\n        <img decoding=\"async\" src=\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/ipad-mockup-frame.webp\" class=\"tp-base-frame\">\n        <img decoding=\"async\" id=\"ipad-screen\" src=\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/ipad-flow-01-main-menu.webp\" class=\"tp-flow-layer\">\n        <div id=\"ipad-screen-handler\" class=\"tp-screen-handler\"><\/div>\n    <\/div>\n\n    <div id=\"iphone-wrapper\" class=\"tp-device-wrapper\">\n        <img decoding=\"async\" src=\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/iphone-mockup-frame.webp\" class=\"tp-base-frame\">\n        <img decoding=\"async\" id=\"iphone-screen\" src=\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/iphone-flow-01-main-menu.webp\" class=\"tp-flow-layer\">\n        <div id=\"iphone-screen-handler\" class=\"tp-screen-handler\"><\/div>\n    <\/div>\n\n    <div class=\"tp-status-text-wrap\">\n        <span id=\"tp-counter\" class=\"tp-status-text\">Step 1 \/ 9<\/span>\n    <\/div>\n\n    <div class=\"tp-zoom-controls\">\n        <div class=\"tp-zoom-btn active\" onclick=\"setZoom(1, this)\">1.0x<\/div>\n        <div class=\"tp-zoom-btn\" onclick=\"setZoom(1.5, this)\">1.5x<\/div>\n        <div class=\"tp-zoom-btn\" onclick=\"setZoom(1.8, this)\">1.8x<\/div>\n        <div class=\"tp-zoom-btn\" onclick=\"setZoom(2, this)\">2.0x<\/div>\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    const data = {\n        mac: [\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/mac-flow-01-main-menu.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/mac-flow-02-import-csv.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/mac-flow-03-data-editor-empty.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/mac-flow-04-data-editor-filled.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/mac-flow-05-pro-unlock-modal.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/mac-flow-06-test-config.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/mac-flow-07-calculating-logic.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/mac-flow-08-report-summary.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/mac-flow-09-report-details.webp\"],\n        ipad: [\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/ipad-flow-01-main-menu.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/04\/ipad-flow-v2-03-data-editor-empty.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/04\/ipad-flow-v2-04-data-editor-filled.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/04\/ipad-flow-v2-02-import-csv.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/ipad-flow-05-test-config.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/ipad-flow-06-pro-unlock-modal.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/ipad-flow-07-calculating-logic.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/ipad-flow-08-report-summary.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/ipad-flow-09-report-details.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/ipad-flow-10-export-options.webp\"],\n        iphone: [\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/iphone-flow-01-main-menu-v2.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/iphone-flow-02-import-csv-v2.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/iphone-flow-03-data-editor-empty-v2.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/iphone-flow-04-data-editor-filled-v2.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/iphone-flow-05-pro-unlock-modal-v2.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/iphone-flow-06-test-config-v2.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/iphone-flow-07-calculating-logic-v2.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/iphone-flow-08-report-summary-v2.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/iphone-flow-09-report-results-v2.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/iphone-flow-10-report-details-v2.webp\",\"https:\/\/purestudio.com.tw\/official\/wp-content\/uploads\/2026\/03\/iphone-flow-11-export-options.webp\"]\n    };\n    let curD = 'mac', idxs = { mac: 0, ipad: 0, iphone: 0 };\n    const counter = document.getElementById('tp-counter');\n\n    \/\/ ============================================================\n    \/\/ [\u624b\u52d5\u5fae\u8abf\u6838\u5fc3\uff1a\u5206\u5340\u584a\u914d\u7f6e]\n    \/\/ ============================================================\n    \n    \/\/ 1. \u624b\u6a5f\u7248 (767px \u4ee5\u4e0b) - \u76ee\u524d\u5b8c\u7f8e\u7684\u53c3\u6578\n    const mobileOffsets = {\n        mac:    { \"1.0\": 0, \"1.5\": -25, \"1.8\": -34,   \"2.0\": -38 },\n        ipad:   { \"1.0\": 0, \"1.5\": -32, \"1.8\": -42.9, \"2.0\": -48 },\n        iphone: { \"1.0\": 0, \"1.5\": -7,   \"1.8\": -9,    \"2.0\": -10 }\n    };\n\n    \/\/ 2. \u5e73\u677f\/\u684c\u9762\u7248 (768px \u4ee5\u4e0a) - \u4f9b\u4f60\u624b\u52d5\u5fae\u8abf\n    const tabletOffsets = {\n        mac:    { \"1.0\": 0, \"1.5\": -67, \"1.8\": -88.4,   \"2.0\": -100 },\n        ipad:   { \"1.0\": 0, \"1.5\": -84.1, \"1.8\": -112.2, \"2.0\": -125.5 },\n        iphone: { \"1.0\": 0, \"1.5\": -18.4,   \"1.8\": -24.1,    \"2.0\": -27.1 }\n    };\n\n    function update() {\n        document.getElementById(`${curD}-screen`).src = data[curD][idxs[curD]];\n        counter.innerText = `Step ${idxs[curD] + 1} \/ ${data[curD].length}`;\n    }\n\n    window.setZoom = function(level, btn) {\n        document.querySelectorAll('.tp-zoom-btn').forEach(b => b.classList.remove('active'));\n        btn.classList.add('active');\n        \n        const wrap = document.getElementById(`${curD}-wrapper`);\n        const handler = document.getElementById(`${curD}-screen-handler`);\n        const baseHeight = wrap.offsetHeight;\n        \n        const verticalPush = level > 1 ? (baseHeight * (level - 1) \/ 2) : 0;\n\n        document.querySelectorAll('.tp-device-wrapper').forEach(w => {\n            const imgs = w.querySelectorAll('img');\n            imgs.forEach(img => img.style.transform = `scale(${level})`);\n            \n            if (w.style.display !== 'none') {\n                w.style.marginTop = `${verticalPush}px`;\n                w.style.marginBottom = `${verticalPush}px`;\n            } else {\n                w.style.marginTop = '0px';\n                w.style.marginBottom = '0px';\n            }\n        });\n\n        \/\/ \u5224\u65b7\u7576\u524d\u5bec\u5ea6\uff0c\u9078\u53d6\u5c0d\u61c9\u914d\u7f6e\n        const isMobile = window.innerWidth <= 767;\n        const config = isMobile ? mobileOffsets : tabletOffsets;\n        \n        const deviceOffsets = config[curD];\n        const zoomKey = level.toFixed(1);\n        const manualTopOffset = deviceOffsets[zoomKey] || 0;\n\n        handler.style.transform = `scale(${level}) translateY(${manualTopOffset}px)`;\n    };\n\n    window.switchDevice = function(d) {\n        curD = d;\n        ['mac', 'ipad', 'iphone'].forEach(v => {\n            const wrap = document.getElementById(`${v}-wrapper`);\n            wrap.style.display = (v === d) ? 'inline-block' : 'none';\n            document.getElementById(`tab-${v}`).classList.toggle('active', v === d);\n            wrap.style.marginTop = '0px';\n            wrap.style.marginBottom = '0px';\n        });\n        const zoomBtns = document.querySelectorAll('.tp-zoom-btn');\n        if (zoomBtns.length > 0) setZoom(1, zoomBtns[0]);\n        update();\n    };\n\n    function flow(dir) {\n        const len = data[curD].length;\n        idxs[curD] = (dir === 'next') ? (idxs[curD] + 1) % len : (idxs[curD] - 1 + len) % len;\n        update();\n    }\n\n    ['mac', 'ipad', 'iphone'].forEach(d => {\n        const h = document.getElementById(`${d}-screen-handler`);\n        h.addEventListener('click', (e) => { if (e.pointerType !== 'touch') flow('next'); });\n        h.addEventListener('contextmenu', (e) => { e.preventDefault(); flow('prev'); });\n        h.addEventListener('touchstart', (e) => {\n            e.preventDefault();\n            if (e.touches.length === 2) flow('prev');\n            else if (e.touches.length === 1) flow('next');\n        }, { passive: false });\n    });\n})();\n<\/script>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>2026 \u7d71\u8a08\u5206\u6790\u5f15\u64ce<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2678","post","type-post","status-publish","format-standard","hentry","category-recentposts"],"_links":{"self":[{"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/posts\/2678","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/comments?post=2678"}],"version-history":[{"count":349,"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/posts\/2678\/revisions"}],"predecessor-version":[{"id":3312,"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/posts\/2678\/revisions\/3312"}],"wp:attachment":[{"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/media?parent=2678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/categories?post=2678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/tags?post=2678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}