@yangyongtao/gaea 1.1.10 → 1.1.11

package/src/components/swiperSecAnimation.vue

@@ -0,0 +1,208 @@
+<!-- 组件名：SwiperSecAnimation.vue（无需修改引用） -->
+<template>
+    <div class="swiper-sec-animation">
+        <!-- 左箭头按钮（上一页） -->
+        <button class="control-btn left" @click="handlePrev" :disabled="!loop && currentIndex === 0" aria-label="上一页">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round">
+                <path d="M15 18l-6-6 6-6" />
+            </svg>
+        </button>
+
+        <!-- 中间滑块区域 -->
+        <div class="slider-wrap">
+            <div class="slider-track" @click="handleTrackClick">
+                <div class="slider-thumb" :style="{ left: `${thumbLeft}%`, width: `${thumbWidth}%` }" @mousedown="startDrag" aria-label="拖动切换索引">
+                </div>
+            </div>
+        </div>
+
+        <!-- 右箭头按钮（下一页） -->
+        <button class="control-btn right" @click="handleNext" :disabled="!loop && currentIndex === total - 1"
+            aria-label="下一页">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round">
+                <path d="M9 6l6 6-6 6" />
+            </svg>
+        </button>
+    </div>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue';
+
+// Props 保持不变
+const props = defineProps({
+    total: {
+        type: Number,
+        required: true,
+        default: 6
+    },
+    initialIndex: {
+        type: Number,
+        default: 2
+    },
+    loop: {
+        type: Boolean,
+        default: true
+    }
+});
+
+// 响应式状态
+const currentIndex = ref(props.initialIndex);
+const isDragging = ref(false);
+
+// 核心修改：滑块宽度动态适配total（100% / total）
+const thumbWidth = computed(() => {
+    // 最小宽度8%（避免total太大时滑块过窄），最大宽度33%（total=3时刚好1/3）
+    const minWidth = 8;
+    const maxWidth = 33.33;
+    const calcWidth = 100 / props.total;
+    return Math.min(Math.max(calcWidth, minWidth), maxWidth);
+});
+
+// 滑块最大左移距离（100% - 滑块宽度，避免超出轨道）
+const maxLeft = computed(() => 100 - thumbWidth.value);
+
+// 滑块位置计算（基于动态宽度和maxLeft）
+const thumbLeft = computed(() => {
+    if (props.total === 1) return 0;
+    // 索引比例 → 滑块位置
+    return (currentIndex.value / (props.total - 1)) * maxLeft.value;
+});
+
+// 上一页（不变）
+function handlePrev() {
+    if (!props.loop && currentIndex.value === 0) return;
+    currentIndex.value = currentIndex.value === 0
+        ? props.total - 1
+        : currentIndex.value - 1;
+    emit('index-change', currentIndex.value);
+}
+
+// 下一页（不变）
+function handleNext() {
+    if (!props.loop && currentIndex.value === props.total - 1) return;
+    currentIndex.value = currentIndex.value === props.total - 1
+        ? 0
+        : currentIndex.value + 1;
+    emit('index-change', currentIndex.value);
+}
+
+// 拖动滑块（适配动态宽度）
+function startDrag() {
+    isDragging.value = true;
+    const track = document.querySelector('.slider-track');
+    const trackRect = track.getBoundingClientRect();
+
+    const onDrag = (e) => {
+        if (!isDragging.value) return;
+        const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX;
+        // 计算拖动位置百分比（适配动态maxLeft）
+        const dragPercent = Math.max(0, Math.min(1, (clientX - trackRect.left) / trackRect.width)) * maxLeft.value;
+        currentIndex.value = Math.round((dragPercent / maxLeft.value) * (props.total - 1));
+    };
+
+    const endDrag = () => {
+        isDragging.value = false;
+        document.removeEventListener('mousemove', onDrag);
+        document.removeEventListener('mouseup', endDrag);
+        emit('index-change', currentIndex.value);
+    };
+
+    document.addEventListener('mousemove', onDrag);
+    document.addEventListener('mouseup', endDrag);
+}
+
+// 点击轨道跳转（适配动态宽度）
+function handleTrackClick(e) {
+    if (isDragging.value) return;
+    const track = e.currentTarget;
+    const trackRect = track.getBoundingClientRect();
+    // 计算点击位置对应的索引（适配动态maxLeft）
+    const clickPercent = Math.max(0, Math.min(1, (e.clientX - trackRect.left) / trackRect.width)) * maxLeft.value;
+    currentIndex.value = Math.round((clickPercent / maxLeft.value) * (props.total - 1));
+    emit('index-change', currentIndex.value);
+}
+
+// 发射事件（不变）
+const emit = defineEmits(['index-change']);
+</script>
+
+<style scoped>
+/* 容器样式（不变） */
+.swiper-sec-animation {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px;
+    width: 40%;
+    min-width: 300px;
+    box-sizing: border-box;
+}
+
+/* 蓝色主题按钮样式（不变） */
+.control-btn {
+    width: 30px;
+    height: 30px;
+    border: none;
+    border-radius: 50%;
+    background: #1890ff;
+    color: white;
+    cursor: pointer;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    padding: 0;
+}
+
+.control-btn:hover:not(:disabled) {
+    background: #096dd9;
+    transform: scale(1.05);
+}
+
+.control-btn:disabled {
+    background: #e6f7ff;
+    color: #8cc5ff;
+    cursor: not-allowed;
+    transform: none;
+}
+
+/* 中间滑块容器（不变） */
+.slider-wrap {
+    flex: 1;
+    height: 40px;
+    display: flex;
+    align-items: center;
+}
+
+/* 蓝色主题轨道（不变） */
+.slider-track {
+    width: 100%;
+    height: 0.5rem;
+    background: rgba(230, 247, 255, 0.5);
+    border-radius: 8px;
+    position: relative;
+    cursor: pointer;
+}
+
+/* 蓝色主题滑块（仅移除固定宽度，由JS动态计算） */
+.slider-thumb {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background: #1890ff;
+    border-radius: 8px;
+    cursor: grab;
+    transition: left 0.2s ease, background 0.2s ease;
+    z-index: 2;
+}
+
+.slider-thumb:active {
+    cursor: grabbing;
+    background: #096dd9;
+}
+</style>

package/src/vite-plugin.js

@@ -26,6 +26,9 @@ const MIME = {
   '.png': 'image/png',
   '.jpg': 'image/jpeg',
   '.res': 'application/octet-stream',
+  '.gltf': 'model/gltf+json',
+  '.glb': 'model/gltf-binary',
+  '.bin': 'application/octet-stream',
 };
 
 const COEP_HEADERS = {
@@ -48,13 +51,13 @@ export default function gaeaVitePlugin() {
       server.middlewares.stack.unshift({
         route: '',
         handle: function gaeaServe(req, res, next) {
-          const url = req.url.split('?')[0];
+          const url = decodeURIComponent(req.url.split('?')[0]);
 
           const gaeaTopFiles = [
             'Gaea.js', 'Gaea.wasm', 'Gaea.pck', 'Gaea.worker.js',
             'Gaea.audio.worklet.js', 'index.js', 'config.js', 'constants.js',
           ];
-          const gaeaDirs = ['math/', 'static/'];
+          const gaeaDirs = ['math/', 'static/', 'image/'];
 
           let relative = null;
           for (const name of gaeaTopFiles) {