710

bun.lock

@@ -6,6 +6,7 @@
       "dependencies": {
         "@tailwindcss/vite": "^4.1.11",
         "gsap": "^3.13.0",
+        "jszip": "^3.10.1",
         "normalize.css": "^8.0.1",
         "vue": "^3.5.17",
       },
@@ -219,6 +220,8 @@
 
     "colorjs.io": ["colorjs.io@0.5.2", "", {}, "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw=="],
 
+    "core-util-is": ["core-util-is@1.0.3", "", {}, "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="],
+
     "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
 
     "de-indent": ["de-indent@1.0.2", "", {}, "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg=="],
@@ -251,10 +254,20 @@
 
     "he": ["he@1.2.0", "", { "bin": { "he": "bin/he" } }, "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="],
 
+    "immediate": ["immediate@3.0.6", "", {}, "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="],
+
     "immutable": ["immutable@5.1.3", "", {}, "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg=="],
 
+    "inherits": ["inherits@2.0.4", "", {}, "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="],
+
+    "isarray": ["isarray@1.0.0", "", {}, "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="],
+
     "jiti": ["jiti@2.4.2", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A=="],
 
+    "jszip": ["jszip@3.10.1", "", { "dependencies": { "lie": "~3.3.0", "pako": "~1.0.2", "readable-stream": "~2.3.6", "setimmediate": "^1.0.5" } }, "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g=="],
+
+    "lie": ["lie@3.3.0", "", { "dependencies": { "immediate": "~3.0.5" } }, "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ=="],
+
     "lightningcss": ["lightningcss@1.30.1", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-darwin-arm64": "1.30.1", "lightningcss-darwin-x64": "1.30.1", "lightningcss-freebsd-x64": "1.30.1", "lightningcss-linux-arm-gnueabihf": "1.30.1", "lightningcss-linux-arm64-gnu": "1.30.1", "lightningcss-linux-arm64-musl": "1.30.1", "lightningcss-linux-x64-gnu": "1.30.1", "lightningcss-linux-x64-musl": "1.30.1", "lightningcss-win32-arm64-msvc": "1.30.1", "lightningcss-win32-x64-msvc": "1.30.1" } }, "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg=="],
 
     "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.30.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ=="],
@@ -297,6 +310,8 @@
 
     "normalize.css": ["normalize.css@8.0.1", "", {}, "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="],
 
+    "pako": ["pako@1.0.11", "", {}, "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="],
+
     "path-browserify": ["path-browserify@1.0.1", "", {}, "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="],
 
     "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
@@ -307,10 +322,16 @@
 
     "postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
 
+    "process-nextick-args": ["process-nextick-args@2.0.1", "", {}, "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="],
+
+    "readable-stream": ["readable-stream@2.3.8", "", { "dependencies": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", "isarray": "~1.0.0", "process-nextick-args": "~2.0.0", "safe-buffer": "~5.1.1", "string_decoder": "~1.1.1", "util-deprecate": "~1.0.1" } }, "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA=="],
+
     "rollup": ["rollup@4.44.2", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.44.2", "@rollup/rollup-android-arm64": "4.44.2", "@rollup/rollup-darwin-arm64": "4.44.2", "@rollup/rollup-darwin-x64": "4.44.2", "@rollup/rollup-freebsd-arm64": "4.44.2", "@rollup/rollup-freebsd-x64": "4.44.2", "@rollup/rollup-linux-arm-gnueabihf": "4.44.2", "@rollup/rollup-linux-arm-musleabihf": "4.44.2", "@rollup/rollup-linux-arm64-gnu": "4.44.2", "@rollup/rollup-linux-arm64-musl": "4.44.2", "@rollup/rollup-linux-loongarch64-gnu": "4.44.2", "@rollup/rollup-linux-powerpc64le-gnu": "4.44.2", "@rollup/rollup-linux-riscv64-gnu": "4.44.2", "@rollup/rollup-linux-riscv64-musl": "4.44.2", "@rollup/rollup-linux-s390x-gnu": "4.44.2", "@rollup/rollup-linux-x64-gnu": "4.44.2", "@rollup/rollup-linux-x64-musl": "4.44.2", "@rollup/rollup-win32-arm64-msvc": "4.44.2", "@rollup/rollup-win32-ia32-msvc": "4.44.2", "@rollup/rollup-win32-x64-msvc": "4.44.2", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-PVoapzTwSEcelaWGth3uR66u7ZRo6qhPHc0f2uRO9fX6XDVNrIiGYS0Pj9+R8yIIYSD/mCx2b16Ws9itljKSPg=="],
 
     "rxjs": ["rxjs@7.8.2", "", { "dependencies": { "tslib": "^2.1.0" } }, "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA=="],
 
+    "safe-buffer": ["safe-buffer@5.1.2", "", {}, "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="],
+
     "sass-embedded": ["sass-embedded@1.89.2", "", { "dependencies": { "@bufbuild/protobuf": "^2.5.0", "buffer-builder": "^0.2.0", "colorjs.io": "^0.5.0", "immutable": "^5.0.2", "rxjs": "^7.4.0", "supports-color": "^8.1.1", "sync-child-process": "^1.0.2", "varint": "^6.0.0" }, "optionalDependencies": { "sass-embedded-android-arm": "1.89.2", "sass-embedded-android-arm64": "1.89.2", "sass-embedded-android-riscv64": "1.89.2", "sass-embedded-android-x64": "1.89.2", "sass-embedded-darwin-arm64": "1.89.2", "sass-embedded-darwin-x64": "1.89.2", "sass-embedded-linux-arm": "1.89.2", "sass-embedded-linux-arm64": "1.89.2", "sass-embedded-linux-musl-arm": "1.89.2", "sass-embedded-linux-musl-arm64": "1.89.2", "sass-embedded-linux-musl-riscv64": "1.89.2", "sass-embedded-linux-musl-x64": "1.89.2", "sass-embedded-linux-riscv64": "1.89.2", "sass-embedded-linux-x64": "1.89.2", "sass-embedded-win32-arm64": "1.89.2", "sass-embedded-win32-x64": "1.89.2" }, "bin": { "sass": "dist/bin/sass.js" } }, "sha512-Ack2K8rc57kCFcYlf3HXpZEJFNUX8xd8DILldksREmYXQkRHI879yy8q4mRDJgrojkySMZqmmmW1NxrFxMsYaA=="],
 
     "sass-embedded-android-arm": ["sass-embedded-android-arm@1.89.2", "", { "os": "android", "cpu": "arm" }, "sha512-oHAPTboBHRZlDBhyRB6dvDKh4KvFs+DZibDHXbkSI6dBZxMTT+Yb2ivocHnctVGucKTLQeT7+OM5DjWHyynL/A=="],
@@ -345,8 +366,12 @@
 
     "sass-embedded-win32-x64": ["sass-embedded-win32-x64@1.89.2", "", { "os": "win32", "cpu": "x64" }, "sha512-cS2j5ljdkQsb4PaORiClaVYynE9OAPZG/XjbOMxpQmjRIf7UroY4PEIH+Waf+y47PfXFX9SyxhYuw2NIKGbEng=="],
 
+    "setimmediate": ["setimmediate@1.0.5", "", {}, "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="],
+
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
+    "string_decoder": ["string_decoder@1.1.1", "", { "dependencies": { "safe-buffer": "~5.1.0" } }, "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg=="],
+
     "supports-color": ["supports-color@8.1.1", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q=="],
 
     "sync-child-process": ["sync-child-process@1.0.2", "", { "dependencies": { "sync-message-port": "^1.0.0" } }, "sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA=="],
@@ -367,6 +392,8 @@
 
     "update-browserslist-db": ["update-browserslist-db@1.1.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw=="],
 
+    "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
+
     "varint": ["varint@6.0.0", "", {}, "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg=="],
 
     "vite": ["vite@7.0.2", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.6", "picomatch": "^4.0.2", "postcss": "^8.5.6", "rollup": "^4.40.0", "tinyglobby": "^0.2.14" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-hxdyZDY1CM6SNpKI4w4lcUc3Mtkd9ej4ECWVHSMrOdSinVc2zYOAppHeGc/hzmRo3pxM5blMzkuWHOJA/3NiFw=="],

index.html

@@ -4,8 +4,8 @@
 <head>
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
-  <link rel="stylesheet" href="https://registry.npmmirror.com/@fontsource-variable/noto-serif-sc/5.2.5/files/index.css">
+  <link rel="stylesheet" href="https://registry.npmmirror.com/@fontsource-variable/noto-sans-sc/5.2.5/files/index.css">
   <title>Vite + Vue + TS</title>
 </head>
 

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.1.11",
     "gsap": "^3.13.0",
+    "jszip": "^3.10.1",
     "normalize.css": "^8.0.1",
     "vue": "^3.5.17"
   },

src/App.vue

@@ -1,23 +1,39 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+import Game from './pages/Game.vue';
 import Page1 from './pages/Page1.vue';
+
+const stage = ref(1);
+
+const userData = ref({
+  region: '奥莱',
+  store: '北京斯普瑞斯',
+  username: '测试用户'
+});
+
+function startExploration(payload: { region: string; store: string; username: string }) {
+  userData.value = payload;
+  stage.value = 1;
+}
 </script>
 
 <template>
   <main>
-    <Page1 class="page"/>
+    <Page1 class="page" v-if="stage == 0" @start-exploration="startExploration"/>
-
+    <Game class="page" v-if="stage == 1" :userdata="userData"/>
   </main>
 </template>
 
 <style scoped>
-main{
+main {
   height: 100vh;
   height: 100dvh;
   width: 100vw;
   overflow: hidden;
   position: relative;
 }
-.page{
+
+.page {
   position: absolute;
   top: 50%;
   left: 0;

src/assets/index.ts

@@ -13,5 +13,30 @@ export default {
         "太阳": new URL('./p1/太阳.png', import.meta.url).href,
         "Flexible benefits": new URL('./p1/Flexible benefits.png', import.meta.url).href,
         "Tour": new URL('./p1/Tour.png', import.meta.url).href,
-    }
+    },
+    game:{
+        
+    },
+    ani:{
+        下拉蓄力提示: new URL('./ani/下拉蓄力提示.zip', import.meta.url).href,
+        小太阳总: new URL('./ani/小太阳总.zip', import.meta.url).href,
+        后端效果: new URL('./ani/后段效果.zip', import.meta.url).href,
+        主标出现: new URL('./ani/主标出现.zip', import.meta.url).href,
+        结尾: new URL('./ani/结尾.zip', import.meta.url).href,
+    },
+    icons: [
+        [new URL('./icons/icon1.png', import.meta.url).href, new URL('./icons/bigicon1.png', import.meta.url).href],
+        [new URL('./icons/icon2.png', import.meta.url).href, new URL('./icons/bigicon2.png', import.meta.url).href],
+        [new URL('./icons/icon3.png', import.meta.url).href, new URL('./icons/bigicon3.png', import.meta.url).href],
+        [new URL('./icons/icon4.png', import.meta.url).href, new URL('./icons/bigicon4.png', import.meta.url).href],
+        [new URL('./icons/icon5.png', import.meta.url).href, new URL('./icons/bigicon5.png', import.meta.url).href],
+        [new URL('./icons/icon6.png', import.meta.url).href, new URL('./icons/bigicon6.png', import.meta.url).href],
+        [new URL('./icons/icon7.png', import.meta.url).href, new URL('./icons/bigicon7.png', import.meta.url).href],
+        [new URL('./icons/icon8.png', import.meta.url).href, new URL('./icons/bigicon8.png', import.meta.url).href],
+    ],
+    metal:[
+        [new URL('./game/metal_0.png', import.meta.url).href,],
+        [new URL('./game/metal_1.png', import.meta.url).href,],
+        [new URL('./game/metal_2.png', import.meta.url).href,]
+    ]
 }

src/components/AniEle.vue

@@ -0,0 +1,449 @@
+<template>
+    <div class="ani-ele">
+        <canvas v-if="!loading && !error" ref="canvasRef" :width="canvasWidth" :height="canvasHeight"></canvas>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
+import JSZip from 'jszip'
+
+// Props (接口定义不变)
+interface AnimationRule {
+    name: string
+    frame: number
+    duration?: number
+    loop: number
+    startFrame?: number
+    endFrame?: number
+    reverse?: boolean
+    easing?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out'
+    pauseAfter?: boolean
+}
+
+interface Props {
+    url: string
+    rules: AnimationRule[]
+    width?: number
+    height?: number
+    autoPlay?: boolean
+    log?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    width: 800,
+    height: 600,
+    autoPlay: true
+})
+
+// 响应式状态
+const loading = ref(false)
+const error = ref('')
+const progress = ref(0)
+const images = ref<string[]>([]) // 仍然用于临时存储Blob URL
+// 【优化】: 存储 ImageData 而不是 HTMLImageElement
+const loadedImages = ref<ImageData[]>([])
+const canvasRef = ref<HTMLCanvasElement>()
+const canvasWidth = ref(props.width)
+const canvasHeight = ref(props.height)
+
+const isPlaying = ref(false)
+const isPaused = ref(false)
+const currentRuleIndex = ref(0)
+const currentFrame = ref(0)
+const currentLoopCount = ref(0)
+const animationId = ref<number>()
+const lastFrameTime = ref(0)
+const pendingJumpTo = ref<string>()
+
+// loadImageSequence 函数 (不变)
+const loadImageSequence = async (zipUrl: string) => {
+    try {
+        loading.value = true
+        error.value = ''
+        progress.value = 0
+        images.value = []
+        loadedImages.value = []
+
+        const response = await fetch(zipUrl)
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`)
+        }
+
+        const zipBlob = await response.blob()
+        progress.value = 30
+        const zip = new JSZip()
+        const zipData = await zip.loadAsync(zipBlob)
+        progress.value = 50
+        
+        const webpFiles = Object.keys(zipData.files)
+            .filter(name => !zipData.files[name].dir && (name.endsWith('.webp') || name.endsWith('.png') || name.endsWith('.jpg')))
+            .sort((a, b) => {
+                const numA = parseInt(a.match(/(\d+)\.\w+$/)?.[1] || '0')
+                const numB = parseInt(b.match(/(\d+)\.\w+$/)?.[1] || '0')
+                return numA - numB
+            })
+
+        if (webpFiles.length === 0) {
+            throw new Error('压缩包中没有找到支持的图片文件 (webp, png, jpg)')
+        }
+
+        const imageUrls: string[] = []
+        for (let i = 0; i < webpFiles.length; i++) {
+            const fileName = webpFiles[i]
+            const file = zipData.files[fileName]
+            const imageBlob = await file.async('blob')
+            const blobUrl = URL.createObjectURL(imageBlob)
+            imageUrls.push(blobUrl)
+            progress.value = 50 + (i + 1) / webpFiles.length * 30
+        }
+
+        images.value = imageUrls
+        await loadAllImages()
+        loading.value = false
+        if (props.log) console.log(`成功加载并转换 ${loadedImages.value.length} 帧 ImageData`)
+
+        if (props.autoPlay) {
+            startAnimation()
+        }
+
+    } catch (err) {
+        console.error('加载图片序列失败:', err)
+        error.value = err instanceof Error ? err.message : '未知错误'
+        loading.value = false
+    }
+}
+
+// =================================================================
+// 核心优化区域 1: loadAllImages 函数
+// 将图片转换为 ImageData
+// =================================================================
+const loadAllImages = async () => {
+    const imageDataArray: ImageData[] = [];
+    // 创建一个离屏Canvas用于转换
+    const offscreenCanvas = document.createElement('canvas');
+    const offscreenCtx = offscreenCanvas.getContext('2d', { willReadFrequently: true });
+
+    if (!offscreenCtx) {
+        throw new Error("无法创建离屏Canvas上下文用于图片转换");
+    }
+
+    for (let i = 0; i < images.value.length; i++) {
+        const img = new Image();
+        img.src = images.value[i];
+
+        await new Promise<void>((resolve, reject) => {
+            img.onload = () => {
+                // 第一张图片决定了Canvas的尺寸
+                if (i === 0) {
+                    canvasWidth.value = props.width || img.width;
+                    canvasHeight.value = props.height || img.height;
+                    // 设置离屏Canvas的尺寸
+                    offscreenCanvas.width = canvasWidth.value;
+                    offscreenCanvas.height = canvasHeight.value;
+                }
+                
+                // 将图片绘制到离屏Canvas上
+                offscreenCtx.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
+                offscreenCtx.drawImage(img, 0, 0, offscreenCanvas.width, offscreenCanvas.height);
+                
+                // 从离屏Canvas中提取ImageData
+                const imageData = offscreenCtx.getImageData(0, 0, offscreenCanvas.width, offscreenCanvas.height);
+                imageDataArray.push(imageData);
+
+                // 【内存优化】: 转换完成后，立即释放Blob URL，因为它不再需要
+                URL.revokeObjectURL(img.src);
+
+                resolve();
+            };
+            img.onerror = reject;
+        });
+
+        progress.value = 80 + (i + 1) / images.value.length * 20;
+    }
+
+    loadedImages.value = imageDataArray;
+    // 【内存优化】: 清空临时的URL数组
+    images.value = [];
+};
+
+
+// =================================================================
+// 核心优化区域 2: drawFrame 函数
+// 使用 putImageData 进行绘制
+// =================================================================
+const drawFrame = (frameIndex: number) => {
+    if (!canvasRef.value || !loadedImages.value.length) return;
+    const safeIndex = Math.max(0, Math.min(frameIndex, loadedImages.value.length - 1));
+    
+    // if (props.log) {
+    //     console.log(`绘制帧: ${safeIndex}`);
+    // }
+
+    const canvas = canvasRef.value;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    // 清空画布
+    // ctx.clearRect(0, 0, canvas.width, canvas.height); // putImageData会完全覆盖，所以clearRect可以省略
+    
+    const imageData = loadedImages.value[safeIndex];
+    if (imageData) {
+        // 使用putImageData直接绘制像素数据，性能更高
+        ctx.putImageData(imageData, 0, 0);
+    }
+};
+
+// jumpToRule 函数 (不变)
+const jumpToRule = (ruleName: string) => {
+    const ruleIndex = findRuleIndex(ruleName)
+    if (ruleIndex === -1) {
+        console.warn(`未找到名为 "${ruleName}" 的规则`)
+        return false
+    }
+    if (props.log) console.log(`跳转到规则 "${ruleName}" (索引: ${ruleIndex})`);
+    
+    if (isPlaying.value) {
+        stopAnimation()
+    }
+
+    currentRuleIndex.value = ruleIndex
+    currentLoopCount.value = 0
+    const targetRule = props.rules[ruleIndex]
+    
+    let startFrame = targetRule.startFrame ?? 0
+    if (targetRule.startFrame === undefined) {
+        for (let i = 0; i < ruleIndex; i++) {
+            startFrame += props.rules[i].frame
+        }
+    }
+    
+    const endFrame = targetRule.endFrame ?? (startFrame + targetRule.frame - 1);
+    currentFrame.value = targetRule.reverse ? endFrame : startFrame;
+    
+    if (props.log) {
+        console.log(`跳转到规则 "${ruleName}", 实际开始帧: ${currentFrame.value}, 规则帧范围: ${startFrame} - ${endFrame}`);
+    }
+
+    drawFrame(currentFrame.value)
+    isPaused.value = false
+    pendingJumpTo.value = undefined
+    
+    isPlaying.value = true
+    lastFrameTime.value = performance.now()
+    animate()
+
+    return true
+}
+
+// startAnimation 函数 (不变)
+const startAnimation = () => {
+    if (!props.rules.length || !loadedImages.value.length || isPlaying.value) return
+
+    isPlaying.value = true
+    isPaused.value = false
+
+    if (currentRuleIndex.value >= props.rules.length) {
+        resetAnimation()
+    }
+    
+    const currentRule = props.rules[currentRuleIndex.value]
+    let startFrame = currentRule.startFrame ?? 0
+    if (currentRule.startFrame === undefined) {
+        for (let i = 0; i < currentRuleIndex.value; i++) {
+            startFrame += props.rules[i].frame
+        }
+    }
+
+    const endFrame = currentRule.endFrame ?? (startFrame + currentRule.frame - 1);
+    currentFrame.value = currentRule.reverse ? endFrame : startFrame;
+    
+    if (props.log) console.log(`开始播放规则 "${currentRule.name}", 实际开始帧: ${currentFrame.value}`);
+
+    lastFrameTime.value = performance.now()
+    animate()
+}
+
+// animate 函数 (不变)
+const animate = () => {
+    if (!isPlaying.value || currentRuleIndex.value >= props.rules.length) {
+        animationId.value = undefined;
+        return;
+    }
+
+    animationId.value = requestAnimationFrame(animate);
+
+    const now = performance.now();
+    const currentRule = props.rules[currentRuleIndex.value];
+    const frameDuration = currentRule.duration ?? 33;
+
+    if (now - lastFrameTime.value >= frameDuration) {
+        lastFrameTime.value = now - (now - lastFrameTime.value) % frameDuration;
+
+        let startFrame = currentRule.startFrame ?? 0;
+        if (currentRule.startFrame === undefined) {
+            for (let i = 0; i < currentRuleIndex.value; i++) {
+                startFrame += props.rules[i].frame;
+            }
+        }
+        const endFrame = currentRule.endFrame ?? (startFrame + currentRule.frame - 1);
+        let nextFrame = currentFrame.value + (currentRule.reverse ? -1 : 1);
+        const isEndOfRuleSegment = currentRule.reverse ? (nextFrame < startFrame) : (nextFrame > endFrame);
+
+        if (isEndOfRuleSegment) {
+            currentLoopCount.value++;
+            const isRuleFinished = currentRule.loop > 0 && currentLoopCount.value >= currentRule.loop;
+            if (isRuleFinished) {
+                if (pendingJumpTo.value) {
+                    const targetRule = pendingJumpTo.value;
+                    pendingJumpTo.value = undefined;
+                    jumpToRule(targetRule);
+                    return;
+                }
+                if (currentRule.pauseAfter) {
+                    isPaused.value = true;
+                    isPlaying.value = false;
+                    if(props.log) console.log(`规则 "${currentRule.name}" 完成，暂停等待跳转指令`);
+                    drawFrame(currentRule.reverse ? startFrame : endFrame);
+                    return;
+                }
+                currentRuleIndex.value++;
+                currentLoopCount.value = 0;
+                if (currentRuleIndex.value >= props.rules.length) {
+                    isPlaying.value = false;
+                    if(props.log) console.log('所有规则播放完毕');
+                    drawFrame(currentRule.reverse ? startFrame : endFrame);
+                    return;
+                }
+                const nextRule = props.rules[currentRuleIndex.value];
+                let nextRuleStartFrame = nextRule.startFrame ?? 0;
+                if (nextRule.startFrame === undefined) {
+                    nextRuleStartFrame = endFrame + 1;
+                }
+                const nextRuleEndFrame = nextRule.endFrame ?? (nextRuleStartFrame + nextRule.frame - 1);
+                currentFrame.value = nextRule.reverse ? nextRuleEndFrame : nextRuleStartFrame;
+                if(props.log) console.log(`进入下一规则 "${nextRule.name}", 实际开始帧: ${currentFrame.value}`);
+            } else {
+                currentFrame.value = currentRule.reverse ? endFrame : startFrame;
+            }
+        } else {
+            currentFrame.value = nextFrame;
+        }
+        drawFrame(currentFrame.value);
+    }
+};
+
+// stopAnimation, resetAnimation, etc. (不变)
+const stopAnimation = () => {
+    isPlaying.value = false
+    isPaused.value = false
+    if (animationId.value) {
+        cancelAnimationFrame(animationId.value)
+        animationId.value = undefined
+    }
+}
+
+const resetAnimation = () => {
+    stopAnimation()
+    currentRuleIndex.value = 0
+    currentFrame.value = 0
+    currentLoopCount.value = 0
+    pendingJumpTo.value = undefined
+    if (loadedImages.value.length > 0) {
+        drawFrame(0)
+    }
+}
+
+const togglePlayback = () => {
+    if (isPlaying.value) {
+        stopAnimation()
+    } else {
+        startAnimation()
+    }
+}
+
+const setJumpTarget = (ruleName: string) => {
+    if (isPaused.value) {
+        jumpToRule(ruleName)
+    } else {
+        pendingJumpTo.value = ruleName
+    }
+}
+
+const jumpToRuleImmediately = (ruleName: string) => {
+    return jumpToRule(ruleName)
+}
+
+const resumeFromPause = () => {
+    if (isPaused.value) {
+        isPaused.value = false
+        isPlaying.value = true
+        lastFrameTime.value = performance.now()
+        animate()
+    }
+}
+
+// watch 和 onMounted (清理逻辑现在更加健壮)
+watch(() => props.url, (newUrl) => {
+    if (newUrl) {
+        stopAnimation()
+        // 由于Blob URL在加载时已释放，这里主要是清空状态
+        images.value.forEach(url => URL.revokeObjectURL(url)); // 以防加载中途切换URL
+        images.value = [];
+        loadedImages.value = [];
+        loadImageSequence(newUrl)
+    }
+}, { immediate: true })
+
+watch(() => props.rules, () => {
+    if (loadedImages.value.length > 0) {
+        resetAnimation()
+        if (props.autoPlay) {
+            startAnimation()
+        }
+    }
+}, { deep: true })
+
+onBeforeUnmount(() => {
+    stopAnimation();
+    // 由于images数组在加载成功后会被清空，此处的forEach可能为空操作，但作为安全保障是好的。
+    images.value.forEach(url => URL.revokeObjectURL(url));
+});
+
+// findRuleIndex 和 defineExpose (不变)
+const findRuleIndex = (ruleName: string): number => {
+    return props.rules.findIndex(rule => rule.name === ruleName)
+}
+
+defineExpose({
+    images,
+    loadedImages,
+    loading,
+    error,
+    isPlaying,
+    isPaused,
+    currentFrame,
+    currentRuleIndex,
+    currentLoopCount,
+    reload: () => loadImageSequence(props.url),
+    play: startAnimation,
+    pause: stopAnimation,
+    reset: resetAnimation,
+    toggle: togglePlayback,
+    resume: resumeFromPause,
+    jumpTo: jumpToRuleImmediately,
+    setJumpTarget,
+    drawFrame: (frameIndex: number) => drawFrame(frameIndex),
+    findRuleIndex,
+    getRules: () => props.rules,
+    getCurrentRule: () => props.rules[currentRuleIndex.value],
+    getRuleByName: (name: string) => props.rules.find(rule => rule.name === name)
+})
+</script>
+
+<style scoped>
+canvas {
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+}
+</style>

src/pages/Page1.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
 import assets from '../assets';
 
 import { regions, type RegionData, type Store } from '../data';
+import AniEle from '../components/AniEle.vue';
 
 const regionsPos = [
     { w: 68.8, h: 68.8, l: -1, t: -4, src: assets.p1.大北区, tt: '大北区', trt: -13, ad: 6, key: '大北区' },
@@ -97,10 +98,25 @@ function cleanupObserver() {
         observer = null;
     }
 }
-
+const emit = defineEmits<{
+    (e: 'startExploration', payload: { region: string; store: string, username: string }): void;
+}>();
 function startExploration() {
     // 这里可以添加开始探索的逻辑
     console.log('开始探索:', selectedStores.value[selectedStoreIndex.value]);
+    if (!selectedRegion.value || selectedStores.value.length === 0) {
+        alert('请选择一个区域和店铺！');
+        return;
+    }
+    if ((document.querySelector('.name-input') as HTMLInputElement).value.trim() === '') {
+        alert('请输入你的名字！');
+        return;
+    }
+    emit('startExploration', {
+        region: selectedRegion.value,
+        store: selectedStores.value[selectedStoreIndex.value].店铺,
+        username: (document.querySelector('.name-input') as HTMLInputElement).value
+    });
 }
 
 // 动画管理
@@ -200,8 +216,15 @@ function createBubbleDropAnimation(element: Element, startTop: string, startLeft
     return animation;
 }
 
+const mainLogo = useTemplateRef('main-logo');
+
+const mainLogoRules = ref([
+    { name: 'main', frame: 41, loop: 1, pauseAfter: true, duration: 33, reverse: false }
+]);
 // 反向播放所有动画来淡出
 function reverseAllAnimations() {
+    mainLogoRules.value[0].reverse = true;
+   
     allAnimations.forEach(animation => {
         // 确保动画已经完成
         if (animation.playState === 'finished') {
@@ -356,61 +379,10 @@ onUnmounted(() => {
     <section class="p1">
         <img :src="assets.标准logo" alt="" class="logo" style="top: 6%;left: 8%;width: 12%;opacity: 0;">
         <img :src="assets.p1.蓝天" alt="" class="bg">
-        <div style="height: 12vw;top: 11.4%;left: 6%">
-            <span class="green scale-in-ctn" style="border-radius: 6vw;font-size: 9vw; padding: 0 3vw;height: 100%;transform: scale(0);--base-delay: 0s;">
-                <span class="scale-in-txt" style="transform: scale(0);">太阳脸</span>
-            </span>
-            <span class="green fake scale-in-txt" style="border-radius: 6vw;font-size: 9vw; padding: 0 3vw;height: 100%;transform: scale(0);--base-delay: 0s;">
-                <span class="scale-in-txt" style="transform: scale(0);">太阳脸</span>
-            </span>
 
-            <span class="green scale-in-ctn"
+        <AniEle :url="assets.ani.主标出现" :width="1015" :height="336" :rules="mainLogoRules"
-                style="width: 12vw;border-radius: 5vw; padding: 2vw 2vw 2vw 3vw; left: 34vw;height: 100%;transform: scale(0);--base-delay: 0s;">
+            style="top: 10%;width: 84%;left: 8%;" ref="main-logo" />
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                    viewBox="0 0 91.18 90.18" preserveAspectRatio="xMidYMid meet">
-                    <path fill-rule="evenodd" stroke="rgb(255, 255, 255)" stroke-width="12.12px" stroke-linecap="round"
-                        stroke-linejoin="round" fill="none" d="M13.003,13.014 L13.003,71.540 L72.429,71.540 " />
-                    <path fill-rule="evenodd" stroke="rgb(255, 255, 255)" stroke-width="12.12px" stroke-linecap="round"
-                        stroke-linejoin="round" fill="none" d="M60.428,21.892 L14.854,70.801 " />
-                </svg>
-            </span>
-            <span class="green fake scale-in-txt"
-                style="width: 12vw;border-radius: 5vw; padding: 2vw 2vw 2vw 3vw; left: 34vw;height: 100%;transform: scale(0);--base-delay: 0s;">
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                    viewBox="0 0 91.18 90.18" preserveAspectRatio="xMidYMid meet">
-                    <path fill-rule="evenodd" stroke="rgb(255, 255, 255)" stroke-width="12.12px" stroke-linecap="round"
-                        stroke-linejoin="round" fill="none" d="M13.003,13.014 L13.003,71.540 L72.429,71.540 " />
-                    <path fill-rule="evenodd" stroke="rgb(255, 255, 255)" stroke-width="12.12px" stroke-linecap="round"
-                        stroke-linejoin="round" fill="none" d="M60.428,21.892 L14.854,70.801 " />
-                </svg>
-            </span>
 
-        </div>
-        <div style="left: 12%;top: 17.2%;width: 73vw;height: 7%;">
-            <span class="black scale-in-ctn" style="border-radius: 7vw;height: 100%;width: 100%;transform: scale(0);--base-delay:0.1s">
-                <span>弹性福利之旅</span>
-            </span>
-            <span class="black fake scale-in-txt" style="border-radius: 7vw;height: 100%;width: 100%;transform: scale(0);--base-delay:0.1s">
-                <span>弹性福利之旅</span>
-            </span>
-            <span class="green scale-in-ctn"
-                style="padding: 0 1.5vw;top: -17%;font-size: 3.5vw;right: -6%;height: 30%;border-radius: 3vw;transform: scale(0);--base-delay:0.2s">
-                <span class="elan block relative">TOUR</span>
-            </span>
-            <span class="green fake scale-in-txt"
-                style="padding: 0 1.5vw;top: -17%;font-size: 3.5vw;right: -6%;height: 30%;border-radius: 3vw;transform: scale(0);--base-delay:0.2s">
-                <span class="elan block relative">TOUR</span>
-            </span>
-
-        </div>
-        <div style="top: 11.7%;left: 53%; display: flex; flex-direction: column;">
-            <span class="white relative swap-in" style="left: 30%;height: 5.5vw;clip-path: inset(0 100% 0 0);--base-delay:0.6s">
-                <span class="elan">FLEXIBEL</span>
-            </span>
-            <span class="white relative swap-in" style="height: 5.5vw;clip-path: inset(0 100% 0 0);--base-delay:0.9s">
-                <span class="elan">BENEFITS</span>
-            </span>
-        </div>
         <!-- <img :src="assets.p1.太阳" alt="" style="top: 30%;left: 5%;width: 26%;"> -->
         <div style="width: 86vw;height: 86vw;top: 47%; left: 50%;transform: translate3d(-50%, -50%, 0); z-index: -1;">
             <div v-for="i in regionsPos" :style="{
@@ -429,22 +401,28 @@ onUnmounted(() => {
         </div>
 
         <div style="color: white; bottom: 16%;left: 50%;transform: translateX(-50%); font-size: 4.5vw;">
-            <span class="block tag scale-in-ctn" style="background-color: #000;top: -1vw;left: -12vw;color: transparent;transform: scale(0);--base-delay:1s;">
+            <span class="block tag scale-in-ctn"
+                style="background-color: #000;top: -1vw;left: -12vw;color: transparent;transform: scale(0);--base-delay:1s;">
                 <span>点击</span>
             </span>
-            <span class="block tag scale-in-ctn" style="background-color: #304A7B;top: 4vw;left: -6vw;color: transparent;transform: scale(0);--base-delay:1.1s;">
+            <span class="block tag scale-in-ctn"
+                style="background-color: #304A7B;top: 4vw;left: -6vw;color: transparent;transform: scale(0);--base-delay:1.1s;">
                 <span>选择</span>
             </span>
-            <span class="block tag scale-in-ctn" style="background-color: #8FBE56;top: .8vw;left: 4.5vw;color: transparent;transform: scale(0);--base-delay:1.1s;">
+            <span class="block tag scale-in-ctn"
+                style="background-color: #8FBE56;top: .8vw;left: 4.5vw;color: transparent;transform: scale(0);--base-delay:1.1s;">
                 <span>阵营</span>
             </span>
-            <span class="block tag scale-in-txt" style="background-color: transparent;top: -1vw;left: -12vw;transform: scale(0);--base-delay:1.2s;">
+            <span class="block tag scale-in-txt"
+                style="background-color: transparent;top: -1vw;left: -12vw;transform: scale(0);--base-delay:1.2s;">
                 <span>点击</span>
             </span>
-            <span class="block tag scale-in-txt" style="background-color: transparent;top: 4vw;left: -6vw;transform: scale(0);--base-delay:1.2s;">
+            <span class="block tag scale-in-txt"
+                style="background-color: transparent;top: 4vw;left: -6vw;transform: scale(0);--base-delay:1.2s;">
                 <span>选择</span>
             </span>
-            <span class="block tag scale-in-txt" style="background-color: transparent;top: .8vw;left: 4.5vw;transform: scale(0);--base-delay:1.3s;">
+            <span class="block tag scale-in-txt"
+                style="background-color: transparent;top: .8vw;left: 4.5vw;transform: scale(0);--base-delay:1.3s;">
                 <span>阵营</span>
             </span>
         </div>
@@ -459,13 +437,8 @@ onUnmounted(() => {
                         <!-- 顶部填充，确保第一个元素能滚动到中间 -->
                         <div class="scroll-padding relative"></div>
 
-                        <div 
+                        <div v-for="(store, index) in selectedStores" :key="store.店铺号" class="store-item relative"
-                            v-for="(store, index) in selectedStores"
+                            :class="{ active: index === selectedStoreIndex }" @click="selectStore(index)">
-                            :key="store.店铺号"
-                            class="store-item relative"
-                            :class="{ active: index === selectedStoreIndex }"
-                            @click="selectStore(index)"
-                        >
                             <div class="store-name relative">{{ store.店铺 }}</div>
                         </div>
 
@@ -474,19 +447,16 @@ onUnmounted(() => {
                     </div>
                 </div>
 
-                <div class="name-input-section">
+                <div class="name-input-section relative">
-                    <h3>请输入你的名字</h3>
+                    <div class="title relative">请输入你的名字</div>
-                    <div class="input-container">
+                    <div class="input-container relative">
                         <input type="text" class="name-input" placeholder="">
-                        <div class="input-line"></div>
                     </div>
                 </div>
 
-                <div class="action-buttons">
+                <div class="action-buttons relative">
-                    <button class="start-button" @click="startExploration">
+                    <div class="start-button relative" @click="startExploration">
-                        <span class="arrow">→</span>
+                    </div>
-                        <span>开始探索</span>
-                    </button>
                 </div>
             </div>
         </div>
@@ -579,22 +549,20 @@ img {
     width: 100%;
     height: 100%;
     z-index: 1000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
 }
 
 .store-selector-content {
+    top: 15%;
+    left: 5%;
     width: 90%;
-    max-width: 400px;
     text-align: center;
     color: #333;
 }
 
 .region-title {
     font-size: 6vw;
-    font-weight: bold;
+    font-weight: 400;
-    margin-bottom: 8vw;
+    margin-bottom: 6vw;
     color: #333;
 }
 
@@ -603,20 +571,16 @@ img {
     height: 40vh;
     overflow: hidden;
     position: relative;
-    mask-image: linear-gradient(
+    mask-image: linear-gradient(to bottom,
-        to bottom, 
             transparent 0%,
             black 15%,
             black 85%,
-        transparent 100%
+            transparent 100%);
-    );
+    -webkit-mask-image: linear-gradient(to bottom,
-    -webkit-mask-image: linear-gradient(
-        to bottom, 
             transparent 0%,
             black 15%,
             black 85%,
-        transparent 100%
+            transparent 100%);
-    );
 }
 
 .store-list {
@@ -628,7 +592,8 @@ img {
 }
 
 .scroll-padding {
-    height: calc(20vh - 4vw); /* 容器高度的一半减去项目高度的一半 */
+    height: calc(20vh - 4vw);
+    /* 容器高度的一半减去项目高度的一半 */
     flex-shrink: 0;
 }
 
@@ -662,8 +627,6 @@ img {
     transform: translate(-50%, -50%);
     width: 90%;
     height: 10vw;
-    border: 2px solid rgba(51, 51, 51, 0.2);
-    border-radius: 10vw;
     pointer-events: none;
     z-index: 2;
     background: rgba(255, 255, 255, 0.05);
@@ -674,8 +637,9 @@ img {
     margin-bottom: 8vw;
 }
 
-.name-input-section h3 {
+.name-input-section .title {
     font-size: 5vw;
+    font-weight: 600;
     color: #333;
     margin-bottom: 4vw;
     font-weight: normal;
@@ -696,26 +660,10 @@ img {
     outline: none;
     color: #333;
     text-align: center;
-}
+    background: url('../assets/p1/输入框.png');
-
+    background-size: contain;
-.input-line {
+    background-repeat: no-repeat;
-    width: 100%;
+    background-position: center;
-    height: 2px;
-    background: #333;
-    margin-top: 1vw;
-    position: relative;
-}
-
-.input-line::after {
-    content: '';
-    position: absolute;
-    right: 0;
-    top: -8px;
-    width: 0;
-    height: 0;
-    border-left: 12px solid transparent;
-    border-right: 12px solid transparent;
-    border-bottom: 16px solid #333;
 }
 
 .action-buttons {
@@ -726,17 +674,13 @@ img {
 }
 
 .start-button {
-    display: flex;
+    width: 40vw;
-    align-items: center;
+    height: 15vw;
-    gap: 3vw;
+    background-size: contain;
-    padding: 4vw 8vw;
+    background-repeat: no-repeat;
-    background: #000;
+    background-position: center;
-    color: #fff;
-    border: none;
-    border-radius: 50px;
-    font-size: 4.5vw;
-    font-weight: bold;
     cursor: pointer;
+    background-image: url('../assets/p1/开始探索.png');
     transition: all 0.3s ease;
 }
 

src/style.css

@@ -1,9 +1,9 @@
-@import "tailwindcss";
+
 @import "./assets/fonts/stylesheet.css";
 
 body {
   margin: 0;
-  font-family: 'Noto Serif SC Variable' sans-serif;
+  font-family: 'Noto Sans SC Variable', sans-serif;
   user-select: none;
   touch-action: none;
 }

src/vite-env.d.ts

@@ -1 +1,6 @@
 /// <reference types="vite/client" />
+
+// JSZip类型定义
+declare module 'jszip' {
+  export default JSZip
+}

test-ani-ele.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AniEle 组件测试</title>
+</head>
+<body>
+    <div id="app">
+        <h1>AniEle 组件测试</h1>
+        <div>
+            <label>ZIP文件URL:</label>
+            <input v-model="zipUrl" type="text" placeholder="输入包含图片序列的ZIP文件URL" style="width: 400px;">
+            <button @click="loadImages">加载</button>
+        </div>
+        <br>
+        <AniEle :url="currentUrl" ref="aniEleRef" />
+        <div v-if="aniEleRef?.images.length > 0">
+            <h3>加载的图片预览:</h3>
+            <div style="display: flex; flex-wrap: wrap; gap: 10px;">
+                <img 
+                    v-for="(imgUrl, index) in aniEleRef.images.slice(0, 5)" 
+                    :key="index"
+                    :src="imgUrl" 
+                    :alt="`Frame ${index}`"
+                    style="width: 100px; height: 100px; object-fit: cover; border: 1px solid #ccc;"
+                />
+                <div v-if="aniEleRef.images.length > 5" style="display: flex; align-items: center; padding: 10px;">
+                    ...还有 {{ aniEleRef.images.length - 5 }} 张图片
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script type="module">
+        import { createApp, ref } from 'vue'
+        import AniEle from './src/components/AniEle.vue'
+
+        const app = createApp({
+            components: {
+                AniEle
+            },
+            setup() {
+                const zipUrl = ref('')
+                const currentUrl = ref('')
+                const aniEleRef = ref(null)
+
+                const loadImages = () => {
+                    currentUrl.value = zipUrl.value
+                }
+
+                return {
+                    zipUrl,
+                    currentUrl,
+                    aniEleRef,
+                    loadImages
+                }
+            }
+        })
+
+        app.mount('#app')
+    </script>
+</body>
+</html>