diff --git a/package-lock.json b/package-lock.json
index fdc1ac7..15b5e05 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "sanyue_imghub",
-  "version": "2.3.4",
+  "version": "2.4.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sanyue_imghub",
-      "version": "2.3.4",
+      "version": "2.4.1",
       "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
         "@fortawesome/fontawesome-svg-core": "^6.6.0",
diff --git a/src/components/SysCogOthers.vue b/src/components/SysCogOthers.vue
index 19c270a..45e608a 100644
--- a/src/components/SysCogOthers.vue
+++ b/src/components/SysCogOthers.vue
@@ -63,6 +63,33 @@
                     <el-input v-model="settings.webDAV.password" :disabled="settings.webDAV.fixed" type="password" show-password autocomplete="new-password"></el-input>
                 </el-form-item>
             </el-form>
+            <h3 class="first-title">公开浏览
+                <el-tooltip content="启用后，访客可通过 /browse 路径浏览指定目录的图片（只读，无法删除/移动）" placement="right" raw-content>
+                    <font-awesome-icon icon="question-circle" style="margin-left: 5px; cursor: pointer;"/>
+                </el-tooltip>
+            </h3>
+            <el-form :model="settings.publicBrowse" label-width="120px">
+                <el-form-item label="启用">
+                    <el-switch v-model="settings.publicBrowse.enabled" :disabled="settings.publicBrowse.fixed"></el-switch>
+                </el-form-item>
+                <el-form-item prop="publicBrowse.allowedDir">
+                    <template #label>
+                        <span>开放目录</span>
+                        <el-tooltip placement="right" raw-content>
+                            <template #content>
+                                <div style="max-width: 320px; line-height: 1.6;">
+                                    <p style="margin: 0 0 8px 0;"><b>允许公开浏览的目录，多个目录用逗号分隔</b></p>
+                                    <p style="margin: 0 0 8px 0;">示例：wallpaper,photos,album</p>
+                                    <p style="margin: 0 0 8px 0; color: #909399;">支持子目录：2026/lucky,2026/rich</p>
+                                    <p style="margin: 0; color: #67c23a;">访问链接：https://你的域名/browse/2026/lucky</p>
+                                </div>
+                            </template>
+                            <font-awesome-icon icon="question-circle" style="margin-left: 5px; cursor: pointer;"/>
+                        </el-tooltip>
+                    </template>
+                    <el-input v-model="settings.publicBrowse.allowedDir" :disabled="settings.publicBrowse.fixed" placeholder="wallpaper,photos,album"></el-input>
+                </el-form-item>
+            </el-form>
         </div>
 
     
@@ -83,7 +110,8 @@ data() {
             telemetry: {},
             randomImageAPI: {},
             cloudflareApiToken: {},
-            webDAV: {}
+            webDAV: {},
+            publicBrowse: {}
         },
         // 加载状态
         loading: false
diff --git a/src/components/TransformMedia.vue b/src/components/TransformMedia.vue
new file mode 100644
index 0000000..7716c66
--- /dev/null
+++ b/src/components/TransformMedia.vue
@@ -0,0 +1,407 @@
+<template>
+  <div
+    class="tm-viewport"
+    ref="viewport"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+    @pointercancel="onPointerUp"
+    @dblclick.prevent="onDblClick"
+  >
+    <img
+      v-if="isImage"
+      class="tm-media"
+      :src="src"
+      draggable="false"
+      :style="mediaStyle"
+      @load="onLoad"
+    />
+    <video
+      v-else-if="isVideo"
+      class="tm-media"
+      :src="src"
+      controls
+      autoplay
+      playsinline
+      :style="mediaStyle"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TransformMedia",
+  props: {
+    file: { type: Object, required: true },
+    src: { type: String, required: true },
+    isImage: { type: Boolean, default: true },
+    isVideo: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      pointers: new Map(),
+      // transform state
+      scale: 1,
+      rotation: 0,  // 落地的旋转角度：0, 90, 180, 270
+      rotatePreview: 0,  // 旋转预览角度（-90~+90，跟手）
+      tx: 0,
+      ty: 0,
+      // 图片原始尺寸
+      naturalWidth: 0,
+      naturalHeight: 0,
+      // gesture start snapshots
+      startScale: 1,
+      startRotation: 0,
+      startTx: 0,
+      startTy: 0,
+      startCenter: null,
+      startDist: 0,
+      startAngle: 0,
+      // drag
+      dragging: false,
+      dragStart: null,
+      viewportRect: null,
+      // bounds
+      minScale: 1,
+      maxScale: 4,
+      // 手势模式锁定：'pinch' | 'rotate' | null
+      gestureMode: null,
+      // 边界翻页相关
+      edgeOverflow: 0,  // 超出边界的累计距离
+      edgeDir: 0,       // 超出方向：-1左 +1右
+    };
+  },
+  computed: {
+    isActiveTransform() {
+      return this.scale > 1.001 || this.pointers.size >= 2 || this.dragging;
+    },
+    // 实际显示的旋转角度 = 落地角度 + 预览角度
+    displayRotation() {
+      return this.rotation + this.rotatePreview;
+    },
+    // 旋转时缩小系数（中间最小，两端恢复）
+    rotateShrink() {
+      const p = Math.min(1, Math.abs(this.rotatePreview) / 90);
+      const k = Math.sin(Math.PI * p);
+      return 1 - 0.12 * k;  // 最多缩小12%
+    },
+    mediaStyle() {
+      const finalScale = this.scale * this.rotateShrink;
+      const inGesture = this.pointers.size > 0;
+      return {
+        transform: `translate3d(${this.tx}px, ${this.ty}px, 0) scale(${finalScale}) rotate(${this.displayRotation}deg)`,
+        transition: inGesture ? "none" : "transform 0.25s ease",
+        transformOrigin: "center center",
+      };
+    },
+  },
+  watch: {
+    isActiveTransform(v) {
+      this.$emit(v ? "lock" : "unlock");
+    },
+  },
+  methods: {
+    onLoad(e) {
+      // 记录图片原始尺寸
+      const img = e.target;
+      this.naturalWidth = img.naturalWidth;
+      this.naturalHeight = img.naturalHeight;
+    },
+
+    reset() {
+      this.scale = 1;
+      this.rotation = 0;
+      this.rotatePreview = 0;
+      this.tx = 0;
+      this.ty = 0;
+      this.pointers.clear();
+      this.dragging = false;
+      this.edgeOverflow = 0;
+      this.edgeDir = 0;
+      this.$emit("unlock");
+    },
+
+    clamp(v, min, max) {
+      return Math.max(min, Math.min(max, v));
+    },
+
+    // iOS 风格橡皮筋阻尼函数
+    rubberBand(distance, dimension, constant = 0.55) {
+      return (distance * dimension * constant) / (dimension + constant * distance);
+    },
+
+    getViewportRect() {
+      return this.$refs.viewport?.getBoundingClientRect();
+    },
+
+    // 计算放大后允许的最大平移范围
+    getPanBounds() {
+      const rect = this.$refs.viewport?.getBoundingClientRect();
+      if (!rect) return { maxX: 0, maxY: 0, vw: 0, vh: 0 };
+      const vw = rect.width, vh = rect.height;
+      const img = this.$el.querySelector('img, video');
+      const iw = img?.clientWidth || vw;
+      const ih = img?.clientHeight || vh;
+      const sw = iw * this.scale;
+      const sh = ih * this.scale;
+      const maxX = Math.max(0, (sw - vw) / 2);
+      const maxY = Math.max(0, (sh - vh) / 2);
+      return { maxX, maxY, vw, vh };
+    },
+
+    // 应用边界阻尼
+    applyBoundWithRubber(value, max, dimension) {
+      if (value > max) {
+        return max + this.rubberBand(value - max, dimension, 0.55);
+      }
+      if (value < -max) {
+        return -max - this.rubberBand(-max - value, dimension, 0.55);
+      }
+      return value;
+    },
+
+    calcTwoPointer() {
+      const pts = Array.from(this.pointers.values());
+      const p0 = pts[0], p1 = pts[1];
+      const dx = p1.x - p0.x;
+      const dy = p1.y - p0.y;
+      const dist = Math.hypot(dx, dy);
+      const angle = Math.atan2(dy, dx) * (180 / Math.PI);
+      const center = { x: (p0.x + p1.x) / 2, y: (p0.y + p1.y) / 2 };
+      return { dist, angle, center };
+    },
+
+    // 角度归一化到 -180~180
+    normalizeAngle(deg) {
+      deg = ((deg % 360) + 360) % 360;
+      return deg > 180 ? deg - 360 : deg;
+    },
+
+    onPointerDown(e) {
+      e.currentTarget.setPointerCapture?.(e.pointerId);
+      this.viewportRect = this.getViewportRect();
+      this.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+
+      // 2指开始：初始化 pinch/rotate 基准
+      if (this.pointers.size === 2) {
+        const { dist, angle, center } = this.calcTwoPointer();
+        this.startDist = dist;
+        this.startAngle = angle;
+        this.startCenter = center;
+        this.startScale = this.scale;
+        this.startRotation = this.rotation;
+        this.startTx = this.tx;
+        this.startTy = this.ty;
+        this.dragging = false;
+        this.gestureMode = null;
+        this.rotatePreview = 0;
+        return;
+      }
+
+      // 1指：如果已放大，则进入拖拽
+      if (this.scale > 1.001) {
+        this.dragging = true;
+        this.dragStart = { x: e.clientX, y: e.clientY };
+        this.startTx = this.tx;
+        this.startTy = this.ty;
+      }
+    },
+
+    onPointerMove(e) {
+      if (!this.pointers.has(e.pointerId)) return;
+      this.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+
+      // 2指：缩放 + 旋转（带死区锁定）
+      if (this.pointers.size === 2) {
+        e.preventDefault();
+        const { dist, angle, center } = this.calcTwoPointer();
+
+        const scaleFactor = dist / (this.startDist || dist);
+        const scaleChange = Math.abs(scaleFactor - 1);
+        const deltaAngle = this.normalizeAngle(angle - this.startAngle);
+        const angleChange = Math.abs(deltaAngle);
+
+        // 阈值
+        const rotateStartDeg = 8;   // 8° 开始进入旋转模式
+        const pinchStartScale = 0.08; // 8% 缩放变化开始进入缩放模式
+
+        // 判断手势模式（只在第一次超过死区时锁定）
+        // 优先判断旋转：角度变化超过8°就进入旋转模式（不管缩放）
+        if (!this.gestureMode) {
+          if (angleChange >= rotateStartDeg) {
+            this.gestureMode = 'rotate';
+          } else if (scaleChange >= pinchStartScale) {
+            this.gestureMode = 'pinch';
+          } else {
+            return; // 还在死区内
+          }
+        }
+
+        // 旋转模式：预览角跟手，限制在 -90~+90
+        if (this.gestureMode === 'rotate') {
+          this.scale = this.startScale; // 锁定缩放
+          this.rotatePreview = this.clamp(deltaAngle, -90, 90);
+          return;
+        }
+
+        // 缩放模式
+        if (this.gestureMode === 'pinch') {
+          this.scale = this.clamp(this.startScale * scaleFactor, this.minScale, this.maxScale);
+          this.rotatePreview = 0;
+        }
+
+        // 跟随双指中心移动
+        if (this.startCenter && this.viewportRect) {
+          const cx0 = this.startCenter.x - this.viewportRect.left - this.viewportRect.width / 2;
+          const cy0 = this.startCenter.y - this.viewportRect.top - this.viewportRect.height / 2;
+          const cx1 = center.x - this.viewportRect.left - this.viewportRect.width / 2;
+          const cy1 = center.y - this.viewportRect.top - this.viewportRect.height / 2;
+          this.tx = this.startTx + (cx1 - cx0);
+          this.ty = this.startTy + (cy1 - cy0);
+        }
+        return;
+      }
+
+      // 1指：拖拽（只在 scale>1 时）+ 边界阻尼 + 边界翻页检测
+      if (this.dragging && this.scale > 1.001) {
+        e.preventDefault();
+        const dx = e.clientX - this.dragStart.x;
+        const dy = e.clientY - this.dragStart.y;
+        const rawX = this.startTx + dx;
+        const rawY = this.startTy + dy;
+        const { maxX, maxY, vw, vh } = this.getPanBounds();
+        
+        // 检测是否超出左右边界
+        let overflow = 0;
+        let dir = 0;
+        if (rawX > maxX) {
+          overflow = rawX - maxX;
+          dir = -1;  // 往右拖 = 上一页
+        } else if (rawX < -maxX) {
+          overflow = -maxX - rawX;
+          dir = +1;  // 往左拖 = 下一页
+        }
+        
+        // 记录超出状态
+        this.edgeOverflow = overflow;
+        this.edgeDir = dir;
+        
+        this.tx = this.applyBoundWithRubber(rawX, maxX, vw);
+        this.ty = this.applyBoundWithRubber(rawY, maxY, vh);
+      }
+    },
+
+    onPointerUp(e) {
+      if (this.pointers.has(e.pointerId)) this.pointers.delete(e.pointerId);
+
+      // 两指结束：处理旋转吸附
+      if (this.pointers.size < 2 && this.gestureMode === 'rotate') {
+        this.finishRotate();
+        this.gestureMode = null;
+      }
+
+      if (this.pointers.size < 2) {
+        this.startCenter = null;
+        this.startDist = 0;
+        this.startAngle = 0;
+        this.gestureMode = null;
+      }
+
+      if (this.pointers.size === 0) {
+        this.dragging = false;
+        
+        // 检查是否触发边界翻页（超出60px触发）
+        if (this.edgeOverflow > 60 && this.edgeDir !== 0) {
+          const dir = this.edgeDir;
+          // 翻页前先重置自身状态，解除 gestureLocked
+          this.reset();
+          this.$emit('edge-swipe', dir);
+          return;
+        }
+        this.edgeOverflow = 0;
+        this.edgeDir = 0;
+        
+        // 缩放回到1附近，自动归位
+        if (this.scale <= 1.001) {
+          this.scale = 1;
+          this.tx = 0;
+          this.ty = 0;
+        } else {
+          // 放大状态：回弹到合法范围
+          const { maxX, maxY } = this.getPanBounds();
+          this.tx = Math.max(-maxX, Math.min(maxX, this.tx));
+          this.ty = Math.max(-maxY, Math.min(maxY, this.ty));
+        }
+      }
+    },
+
+    // 松手后吸附到 0° 或 ±90°
+    finishRotate() {
+      const d = this.rotatePreview;
+      const commitDeg = 30;  // 超过30°就翻到90°
+      
+      let target = 0;
+      if (Math.abs(d) >= commitDeg) {
+        target = d > 0 ? 90 : -90;
+      }
+
+      // 计算新的落地角度
+      const newRot = ((this.rotation + target) % 360 + 360) % 360;
+
+      // 落地并重置预览角（transition 会自动处理动画）
+      this.rotation = newRot;
+      this.rotatePreview = 0;
+
+      // 计算旋转后的铺满缩放
+      this.updateFillScale();
+    },
+
+    // 旋转后铺满屏幕：90°/270°时放大到2倍（类似双击效果）
+    updateFillScale() {
+      const rot = this.rotation % 360;
+      const isRotated = (rot === 90 || rot === 270);
+
+      if (isRotated) {
+        // 90°/270° 时放大到2倍铺满
+        this.scale = 2;
+        this.tx = 0;
+        this.ty = 0;
+      } else {
+        // 0° 或 180° 恢复正常
+        this.scale = 1;
+        this.tx = 0;
+        this.ty = 0;
+      }
+    },
+
+    onDblClick() {
+      if (this.scale > 1.001) {
+        this.scale = 1;
+        this.tx = 0;
+        this.ty = 0;
+      } else {
+        this.scale = 2;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.tm-viewport {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  touch-action: none;
+  user-select: none;
+}
+
+.tm-media {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  -webkit-user-drag: none;
+}
+</style>
diff --git a/src/components/UploadForm.vue b/src/components/UploadForm.vue
index 5b765e9..6eb5f0a 100644
--- a/src/components/UploadForm.vue
+++ b/src/components/UploadForm.vue
@@ -406,15 +406,18 @@ methods: {
         // 并发控制：如果当前上传数已达上限，加入队列等待
         if (this.activeUploads >= this.maxConcurrentUploads) {
             this.uploadQueue.push(file)
-            this.fileList.find(item => item.uid === file.file.uid).status = 'waiting'
+            const waitingItem = this.fileList.find(item => item.uid === file.file.uid)
+            if (waitingItem) waitingItem.status = 'waiting'
             return
         }
         
         // 开始上传，增加计数
         this.activeUploads++
-        this.fileList.find(item => item.uid === file.file.uid).status = 'uploading'
+        const uploadingItem = this.fileList.find(item => item.uid === file.file.uid)
+        if (uploadingItem) uploadingItem.status = 'uploading'
 
-        const uploadChannel = this.fileList.find(item => item.uid === file.file.uid).uploadChannel || this.uploadChannel
+        const fileItem = this.fileList.find(item => item.uid === file.file.uid)
+        const uploadChannel = fileItem?.uploadChannel || this.uploadChannel
 
         // 如果上传渠道为外链，直接使用外链上传
         if (uploadChannel === 'external') {
@@ -827,35 +830,39 @@ methods: {
         }
     },
     handleSuccess(response, file) {
+        const fileItem = this.fileList.find(item => item.uid === file.uid)
+        if (!fileItem) return // 文件已被删除
+        
         try {     
             // 对上传渠道为外链的，不修改链接
-            const uploadChannel = this.fileList.find(item => item.uid === file.uid).uploadChannel || this.uploadChannel
+            const uploadChannel = fileItem.uploadChannel || this.uploadChannel
             if (uploadChannel !== 'external') {
                 // 从response.data[0].src中去除/file/前缀
                 const srcID = response.data[0].src.replace('/file/', '')
-                this.fileList.find(item => item.uid === file.uid).url = `${window.location.protocol}//${window.location.host}/file/` + srcID
-                this.fileList.find(item => item.uid === file.uid).finalURL = this.rootUrl + srcID
-                this.fileList.find(item => item.uid === file.uid).mdURL = `![${file.name}](${this.rootUrl + srcID})`
-                this.fileList.find(item => item.uid === file.uid).htmlURL = `<img src="${this.rootUrl + srcID}" alt="${file.name}" width=100% />`
-                this.fileList.find(item => item.uid === file.uid).ubbURL = `[img]${this.rootUrl + srcID}[/img]`
-                this.fileList.find(item => item.uid === file.uid).srcID = srcID
+                fileItem.url = `${window.location.protocol}//${window.location.host}/file/` + srcID
+                fileItem.finalURL = this.rootUrl + srcID
+                fileItem.mdURL = `![${file.name}](${this.rootUrl + srcID})`
+                fileItem.htmlURL = `<img src="${this.rootUrl + srcID}" alt="${file.name}" width=100% />`
+                fileItem.ubbURL = `[img]${this.rootUrl + srcID}[/img]`
+                fileItem.srcID = srcID
             }
-            this.fileList.find(item => item.uid === file.uid).progreess = 100
-            this.fileList.find(item => item.uid === file.uid).status = 'success'
+            fileItem.progreess = 100
+            fileItem.status = 'success'
             
             // Save to history
-            this.saveToHistory(this.fileList.find(item => item.uid === file.uid))
+            this.saveToHistory(fileItem)
 
             this.$message({
                 type: 'success',
                 message: this.truncateFilename(file.name) + '上传成功'
             })
             setTimeout(() => {
-                this.fileList.find(item => item.uid === file.uid).status = 'done'
+                const item = this.fileList.find(item => item.uid === file.uid)
+                if (item) item.status = 'done'
             }, 1000)
         } catch (error) {
             this.$message.error(this.truncateFilename(file.name) + '上传失败')
-            this.fileList.find(item => item.uid === file.uid).status = 'exception'
+            fileItem.status = 'exception'
         }
         // 注意：并发控制的 onUploadComplete 已在各上传方法的 finally 中调用
     },
@@ -875,8 +882,11 @@ methods: {
         }
     },
     handleError(err, file) {
+        const fileItem = this.fileList.find(item => item.uid === file.uid)
+        if (!fileItem) return // 文件已被删除
+        
         this.$message.error(this.truncateFilename(file.name) + '上传失败')
-        this.fileList.find(item => item.uid === file.uid).status = 'exception'
+        fileItem.status = 'exception'
         
         // 如果开启了自动重试，安排自动重试
         if (this.autoReUpload) {
@@ -987,7 +997,10 @@ methods: {
         })
     },
     handleProgress(event) {
-        this.fileList.find(item => item.uid === event.file.uid).progreess = event.percent
+        const fileItem = this.fileList.find(item => item.uid === event.file.uid)
+        if (fileItem) {
+            fileItem.progreess = event.percent
+        }
     },
     copyAll() {
         if (this.selectedUrlForm === 'url') {
diff --git a/src/router/index.js b/src/router/index.js
index 425e699..3cccc9d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -99,6 +99,11 @@ const routes = [
     name: 'whiteliston',
     component: () => import('../views/WhiteListOn.vue'),
   },
+  {
+    path: '/browse/:dir*',
+    name: 'publicBrowse',
+    component: () => import('../views/PublicBrowse.vue'),
+  },
   {
     path: '/:pathMatch(.*)*',
     name: 'notFound',
diff --git a/src/views/PublicBrowse.vue b/src/views/PublicBrowse.vue
new file mode 100644
index 0000000..37d8186
--- /dev/null
+++ b/src/views/PublicBrowse.vue
@@ -0,0 +1,1338 @@
+<template>
+  <div class="public-browse">
+    <!-- 顶部导航栏 -->
+    <header class="header">
+      <div class="header-left">
+        <span class="logo">{{ siteName }}</span>
+      </div>
+      <div class="header-center">
+        <div class="breadcrumb">
+          <span class="breadcrumb-item" @click="goToRoot">{{ rootDirName }}</span>
+          <template v-for="(part, index) in pathParts" :key="index">
+            <span class="breadcrumb-sep">/</span>
+            <span class="breadcrumb-item" @click="goToPath(index)">{{ part }}</span>
+          </template>
+        </div>
+      </div>
+      <div class="header-right">
+        <span class="file-count">{{ totalCount }} 个文件</span>
+      </div>
+    </header>
+
+    <!-- 加载状态 -->
+    <div v-if="loading && files.length === 0" class="loading-container">
+      <div class="loading-spinner"></div>
+      <p>加载中...</p>
+    </div>
+
+    <!-- 错误提示 -->
+    <div v-else-if="error" class="error-container">
+      <p>{{ error }}</p>
+      <button v-if="canRetry" @click="loadFiles" class="retry-btn">重试</button>
+    </div>
+
+    <!-- 瀑布流容器 -->
+    <div v-else class="gallery-container" ref="galleryContainer">
+      <!-- 文件夹区域 -->
+      <div v-if="folders.length > 0" class="folders-section">
+        <div class="folders-grid">
+          <div 
+            v-for="folder in folders" 
+            :key="folder.name"
+            class="folder-card"
+            @click="enterFolder(folder.name)"
+          >
+            <div class="folder-icon">
+              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
+            </div>
+            <span class="folder-name">{{ getFolderName(folder.name) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 瀑布流图片区域 -->
+      <div class="waterfall" ref="waterfall">
+        <div 
+          v-for="(column, colIndex) in columns" 
+          :key="colIndex" 
+          class="waterfall-column"
+        >
+          <div 
+            v-for="file in column" 
+            :key="file.name"
+            class="waterfall-item"
+            @click="openPreview(file)"
+          >
+            <div class="image-wrapper" :class="{ loaded: file.loaded }">
+              <img 
+                v-if="isImage(file)"
+                :src="getFileUrl(file.name)" 
+                :alt="file.name"
+                loading="lazy"
+                @load="onImageLoad($event, file)"
+                @error="handleImageError"
+              />
+              <video 
+                v-else-if="isVideo(file)"
+                :src="getFileUrl(file.name)"
+                muted
+                loop
+                preload="metadata"
+                @loadedmetadata="onVideoLoad($event, file)"
+                @mouseenter="$event.target.play()"
+                @mouseleave="$event.target.pause()"
+              ></video>
+              <div v-else class="file-placeholder">
+                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13z"/></svg>
+              </div>
+              <!-- 悬浮操作层 -->
+              <div class="overlay">
+                <div class="overlay-actions">
+                  <button class="action-btn" @click.stop="copyLink(file.name)" title="复制链接">
+                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>
+                  </button>
+                  <button class="action-btn" @click.stop="downloadFile(file.name)" title="下载">
+                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 加载更多指示器 -->
+      <div ref="loadTrigger" class="load-trigger">
+        <div v-if="loading && files.length > 0" class="loading-more">
+          <div class="loading-spinner-small"></div>
+          <span>加载中...</span>
+        </div>
+        <div v-else-if="!hasMore && mediaFiles.length > 0" class="no-more">
+          已加载全部
+        </div>
+        <a v-if="!hasMore && mediaFiles.length > 0" class="credit-link" href="https://github.com/axibayuit-a11y" target="_blank" rel="noopener">
+          林酱贡献
+        </a>
+      </div>
+    </div>
+
+    <!-- 图片预览弹窗 -->
+    <div v-if="previewVisible" class="preview-modal" @click.self="closePreview">
+      <button class="preview-close" @click.stop="closePreview">
+        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
+      </button>
+      
+      <!-- 桌面端：简单单图显示 -->
+      <div class="preview-content desktop-only" @click.stop>
+        <img 
+          v-if="currentPreviewFile && isImage(currentPreviewFile)"
+          :src="getFileUrl(currentPreviewFile.name)" 
+          class="preview-image"
+          :style="desktopImageStyle"
+          draggable="false"
+        />
+        <video 
+          v-else-if="currentPreviewFile && isVideo(currentPreviewFile)"
+          :src="getFileUrl(currentPreviewFile.name)"
+          controls
+          autoplay
+          class="preview-video"
+          :style="desktopImageStyle"
+        ></video>
+      </div>
+      
+      <!-- 手机端：三页轨道轮播 + TransformMedia -->
+      <div class="preview-content mobile-only" @click.stop>
+        <div
+          class="swipe-viewport"
+          ref="mobileViewport"
+          @touchstart="onSwipeStart"
+          @touchmove="onSwipeMove"
+          @touchend="onSwipeEnd"
+        >
+          <div class="swipe-track" :style="swipeTrackStyle" @transitionend="onSwipeTransitionEnd">
+            <div 
+              class="swipe-slide" 
+              v-for="(f, i) in swipeWindow" 
+              :key="getSlideKey(f, i)"
+            >
+              <TransformMedia
+                v-if="f"
+                :file="f"
+                :src="getFileUrl(f.name)"
+                :is-image="isImage(f)"
+                :is-video="isVideo(f)"
+                @lock="gestureLocked = true"
+                @unlock="gestureLocked = false"
+                @edge-swipe="onEdgeSwipe"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 桌面端按钮 -->
+      <button class="preview-prev desktop-only" @click.stop="prevImage" v-if="previewIndex > 0">
+        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
+      </button>
+      <button class="preview-next desktop-only" @click.stop="nextImage" v-if="previewIndex < mediaFiles.length - 1">
+        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
+      </button>
+      
+      <!-- 桌面端旋转按钮 -->
+      <button class="rotate-btn desktop-only" @click.stop="rotateImage" title="旋转90°">
+        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z"/></svg>
+      </button>
+      
+      <!-- 页码指示器 -->
+      <div class="page-indicator">
+        {{ previewIndex + 1 }} / {{ mediaFiles.length }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+import { mapGetters } from 'vuex';
+import TransformMedia from '@/components/TransformMedia.vue';
+
+export default {
+  name: 'PublicBrowse',
+  components: {
+    TransformMedia
+  },
+  data() {
+    return {
+      files: [],
+      allowedDirs: [],
+      rootDir: '',
+      currentPath: '',
+      totalCount: 0,
+      loading: false,
+      error: null,
+      canRetry: true,
+      hasMore: true,
+      previewVisible: false,
+      previewIndex: 0,
+      observer: null,
+      pageSize: 24,
+      columnCount: 4,
+      columnHeights: [0, 0, 0, 0],
+      // 桌面端旋转
+      imageRotation: 0,
+      // 手机端滑动
+      swipeX: 0,
+      swipeStartX: 0,
+      swipeStartY: 0,
+      swipeStartT: 0,
+      swipeActive: false,
+      swipeAnimating: false,
+      swipeDir: 0,
+      viewportW: 0,
+      // 手势锁定（子组件缩放/旋转时锁住轮播）
+      gestureLocked: false,
+    };
+  },
+  computed: {
+    ...mapGetters(['userConfig']),
+    siteName() {
+      return this.userConfig?.siteTitle || '公开相册';
+    },
+    rootDirName() {
+      return this.rootDir.split('/').filter(Boolean).pop() || '根目录';
+    },
+    pathParts() {
+      if (!this.currentPath || !this.rootDir) return [];
+      const relative = this.currentPath.replace(this.rootDir, '').replace(/^\/+/, '');
+      return relative.split('/').filter(Boolean);
+    },
+    folders() {
+      return this.files.filter(f => f.isFolder);
+    },
+    mediaFiles() {
+      return this.files.filter(f => !f.isFolder);
+    },
+    columns() {
+      const cols = Array.from({ length: this.columnCount }, () => []);
+      for (const file of this.mediaFiles) {
+        const idx = file.columnIndex ?? 0;
+        if (idx < this.columnCount) {
+          cols[idx].push(file);
+        } else {
+          cols[0].push(file);
+        }
+      }
+      return cols;
+    },
+    currentPreviewFile() {
+      return this.mediaFiles[this.previewIndex];
+    },
+    prevPreviewFile() {
+      return this.previewIndex > 0 ? this.mediaFiles[this.previewIndex - 1] : null;
+    },
+    nextPreviewFile() {
+      return this.previewIndex < this.mediaFiles.length - 1 ? this.mediaFiles[this.previewIndex + 1] : null;
+    },
+    desktopImageStyle() {
+      return {
+        transform: `rotate(${this.imageRotation}deg)`,
+        transition: 'transform 0.3s ease'
+      };
+    },
+    swipeWindow() {
+      return [this.prevPreviewFile, this.currentPreviewFile, this.nextPreviewFile];
+    },
+    swipeTrackStyle() {
+      // 默认停在中间那页（-viewportW）
+      const base = -this.viewportW;
+      const x = base + this.swipeX;
+      return {
+        transform: `translate3d(${x}px, 0, 0)`,
+        transition: this.swipeAnimating ? 'transform 0.28s ease' : 'none',
+      };
+    }
+  },
+  watch: {
+    '$route.params.dir': {
+      handler() {
+        this.initFromRoute();
+      }
+    }
+  },
+  mounted() {
+    this.initFromRoute();
+    this.setupIntersectionObserver();
+    this.updateColumnCount();
+    window.addEventListener('resize', this.updateColumnCount);
+  },
+  beforeUnmount() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+    window.removeEventListener('resize', this.updateColumnCount);
+  },
+  methods: {
+    // 生成 slide key，切换时让子组件重新挂载以重置 transform
+    getSlideKey(f, i) {
+      if (!f) return `empty-${i}`;
+      // 中间那张用 previewIndex 作为 key 的一部分，确保切换时重新挂载
+      if (i === 1) return `${f.name}-${this.previewIndex}`;
+      return f.name;
+    },
+
+    updateColumnCount() {
+      const width = window.innerWidth;
+      let newCount;
+      if (width < 600) {
+        newCount = 2;
+      } else if (width < 900) {
+        newCount = 3;
+      } else {
+        newCount = 4;
+      }
+      
+      if (newCount !== this.columnCount) {
+        this.columnCount = newCount;
+        this.columnHeights = new Array(this.columnCount).fill(0);
+        this.mediaFiles.forEach(f => {
+          f.columnIndex = undefined;
+          this.assignToColumn(f);
+        });
+      }
+    },
+
+    getShortestColumn() {
+      let minIndex = 0;
+      let minHeight = this.columnHeights[0];
+      for (let i = 1; i < this.columnCount; i++) {
+        if (this.columnHeights[i] < minHeight) {
+          minHeight = this.columnHeights[i];
+          minIndex = i;
+        }
+      }
+      return minIndex;
+    },
+
+    assignToColumn(file, height = 200) {
+      const colIndex = this.getShortestColumn();
+      file.columnIndex = colIndex;
+      this.columnHeights[colIndex] += height;
+    },
+
+    onImageLoad(event, file) {
+      const img = event.target;
+      const ratio = img.naturalHeight / img.naturalWidth;
+      const height = 280 * ratio;
+      if (file.columnIndex === undefined) {
+        this.assignToColumn(file, height);
+      }
+      file.loaded = true;
+    },
+
+    onVideoLoad(event, file) {
+      const video = event.target;
+      const ratio = video.videoHeight / video.videoWidth;
+      const height = 280 * ratio;
+      if (file.columnIndex === undefined) {
+        this.assignToColumn(file, height);
+      }
+      file.loaded = true;
+    },
+
+    setupIntersectionObserver() {
+      this.observer = new IntersectionObserver(
+        (entries) => {
+          const entry = entries[0];
+          if (entry.isIntersecting && this.hasMore && !this.loading) {
+            this.loadMore();
+          }
+        },
+        { rootMargin: '200px' }
+      );
+    },
+
+    observeLoadTrigger() {
+      this.$nextTick(() => {
+        if (this.$refs.loadTrigger && this.observer) {
+          this.observer.observe(this.$refs.loadTrigger);
+        }
+      });
+    },
+
+    async initFromRoute() {
+      const dirParam = this.$route.params.dir || '';
+      const dirPath = Array.isArray(dirParam) ? dirParam.join('/') : dirParam;
+      
+      if (!dirPath) {
+        this.error = '请指定要浏览的目录，例如: /browse/landscape';
+        this.canRetry = false;
+        return;
+      }
+      
+      const parts = dirPath.split('/').filter(Boolean);
+      this.rootDir = parts[0];
+      this.currentPath = dirPath;
+      this.files = [];
+      this.hasMore = true;
+      this.columnHeights = new Array(this.columnCount).fill(0);
+      
+      await this.loadFiles();
+      this.observeLoadTrigger();
+    },
+
+    async loadFiles() {
+      this.loading = true;
+      this.error = null;
+      this.canRetry = true;
+      
+      try {
+        const res = await axios.get(`/api/public/list?dir=${encodeURIComponent(this.currentPath)}&count=${this.pageSize}`);
+        
+        if (res.data.allowedDirs) {
+          this.allowedDirs = res.data.allowedDirs;
+        }
+        
+        const dirs = (res.data.directories || []).map(d => ({
+          name: d,
+          isFolder: true
+        }));
+        const files = (res.data.files || []).map(f => ({
+          name: f.name,
+          isFolder: false,
+          metadata: f.metadata,
+          columnIndex: undefined
+        }));
+        
+        files.forEach(f => this.assignToColumn(f));
+        
+        this.files = [...dirs, ...files];
+        this.totalCount = res.data.totalCount || this.files.length;
+        this.hasMore = this.mediaFiles.length < this.totalCount;
+      } catch (err) {
+        if (err.response?.status === 403) {
+          const msg = err.response?.data?.error || '';
+          if (msg.includes('disabled')) {
+            this.error = '公开浏览功能未启用';
+          } else if (msg.includes('not allowed') || msg.includes('No public')) {
+            this.error = '该目录不允许公开访问';
+          } else {
+            this.error = '访问被拒绝';
+          }
+          this.canRetry = false;
+        } else {
+          this.error = '加载失败，请重试';
+        }
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async loadMore() {
+      if (this.loading || !this.hasMore) return;
+      this.loading = true;
+      try {
+        const start = this.mediaFiles.length;
+        const res = await axios.get(`/api/public/list?dir=${encodeURIComponent(this.currentPath)}&start=${start}&count=${this.pageSize}`);
+        const moreFiles = (res.data.files || []).map(f => ({
+          name: f.name,
+          isFolder: false,
+          metadata: f.metadata,
+          columnIndex: undefined
+        }));
+        
+        moreFiles.forEach(f => this.assignToColumn(f));
+        this.files.push(...moreFiles);
+        this.hasMore = this.mediaFiles.length < this.totalCount;
+      } catch (err) {
+        console.error('加载更多失败', err);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    enterFolder(folderPath) {
+      const newPath = folderPath.replace(/\/+$/, '');
+      this.$router.push(`/browse/${newPath}`);
+    },
+
+    goToRoot() {
+      this.$router.push(`/browse/${this.rootDir}`);
+    },
+
+    goToPath(index) {
+      const parts = this.pathParts.slice(0, index + 1);
+      const newPath = this.rootDir + (parts.length ? '/' + parts.join('/') : '');
+      this.$router.push(`/browse/${newPath}`);
+    },
+
+    getFolderName(path) {
+      return path.split('/').filter(Boolean).pop() || path;
+    },
+
+    getFileUrl(name) {
+      return `${window.location.origin}/file/${name}`;
+    },
+
+    isImage(file) {
+      const ext = file.name.split('.').pop().toLowerCase();
+      return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg'].includes(ext);
+    },
+
+    isVideo(file) {
+      const ext = file.name.split('.').pop().toLowerCase();
+      return ['mp4', 'webm', 'ogg', 'mov'].includes(ext);
+    },
+
+    handleImageError(e) {
+      e.target.style.display = 'none';
+    },
+
+    copyLink(name) {
+      const url = this.getFileUrl(name);
+      navigator.clipboard?.writeText(url).then(() => {
+        this.showToast('已复制');
+      }).catch(() => {
+        const input = document.createElement('input');
+        input.value = url;
+        document.body.appendChild(input);
+        input.select();
+        document.execCommand('copy');
+        document.body.removeChild(input);
+        this.showToast('已复制');
+      });
+    },
+
+    showToast(msg) {
+      const existing = document.querySelector('.copy-toast');
+      if (existing) existing.remove();
+      
+      const toast = document.createElement('div');
+      toast.className = 'copy-toast';
+      toast.textContent = msg;
+      document.body.appendChild(toast);
+      
+      setTimeout(() => toast.classList.add('show'), 10);
+      setTimeout(() => {
+        toast.classList.remove('show');
+        setTimeout(() => toast.remove(), 300);
+      }, 1500);
+    },
+
+    downloadFile(name) {
+      const link = document.createElement('a');
+      link.href = this.getFileUrl(name);
+      link.download = name.split('/').pop();
+      link.click();
+    },
+
+    openPreview(file) {
+      if (file.isFolder) return;
+      const mediaIndex = this.mediaFiles.findIndex(f => f.name === file.name);
+      if (mediaIndex >= 0) {
+        this.previewIndex = mediaIndex;
+        this.previewVisible = true;
+        this.imageRotation = 0;
+        this.gestureLocked = false;
+        document.body.style.overflow = 'hidden';
+        this.$nextTick(() => {
+          this.viewportW = this.$refs.mobileViewport?.getBoundingClientRect().width || window.innerWidth;
+        });
+      }
+    },
+
+    closePreview() {
+      this.previewVisible = false;
+      this.imageRotation = 0;
+      this.gestureLocked = false;
+      document.body.style.overflow = '';
+    },
+
+    prevImage() {
+      if (this.previewIndex > 0) {
+        this.previewIndex--;
+        this.imageRotation = 0;
+      }
+    },
+
+    nextImage() {
+      if (this.previewIndex < this.mediaFiles.length - 1) {
+        this.previewIndex++;
+        this.imageRotation = 0;
+      }
+    },
+
+    rotateImage() {
+      this.imageRotation += 90;
+      // 动画结束后归一化（无动画）
+      if (this.imageRotation >= 360) {
+        setTimeout(() => {
+          // 临时禁用 transition
+          const el = this.$el.querySelector('.preview-image, .preview-video');
+          if (el) {
+            el.style.transition = 'none';
+            this.imageRotation = 0;
+            // 强制重绘后恢复 transition
+            el.offsetHeight;
+            el.style.transition = '';
+          } else {
+            this.imageRotation = 0;
+          }
+        }, 300);
+      }
+    },
+
+    // 手机端滑动：开始
+    onSwipeStart(e) {
+      if (this.gestureLocked) return;
+      if (this.swipeAnimating) return;
+      
+      const t = e.touches[0];
+      this.swipeStartX = t.clientX;
+      this.swipeStartY = t.clientY;
+      this.swipeStartT = performance.now();
+      this.swipeX = 0;
+      this.swipeActive = false;
+      
+      this.viewportW = this.$refs.mobileViewport?.getBoundingClientRect().width || window.innerWidth;
+    },
+
+    // 手机端滑动：移动
+    onSwipeMove(e) {
+      if (this.gestureLocked) return;
+      if (this.swipeAnimating) return;
+      
+      const t = e.touches[0];
+      const dx = t.clientX - this.swipeStartX;
+      const dy = t.clientY - this.swipeStartY;
+      
+      if (!this.swipeActive) {
+        if (Math.abs(dx) < 8) return;
+        if (Math.abs(dx) <= Math.abs(dy)) return;
+        this.swipeActive = true;
+      }
+      
+      e.preventDefault();
+      
+      let x = dx;
+      // 边界阻尼：用 rubberBand 代替线性 *0.3
+      if (this.previewIndex === 0 && x > 0) {
+        x = this.rubberBand(x, this.viewportW, 0.55);
+      } else if (this.previewIndex === this.mediaFiles.length - 1 && x < 0) {
+        x = -this.rubberBand(-x, this.viewportW, 0.55);
+      }
+      
+      this.swipeX = x;
+    },
+
+    // 手机端滑动：结束
+    onSwipeEnd() {
+      if (this.gestureLocked) return;
+      if (this.swipeAnimating) return;
+      
+      if (!this.swipeActive) {
+        this.swipeX = 0;
+        return;
+      }
+      
+      const dt = Math.max(1, performance.now() - this.swipeStartT);
+      const vx = this.swipeX / dt;
+      const threshold = this.viewportW * 0.2;
+      
+      let dir = 0;
+      if (this.swipeX <= -threshold || vx <= -0.8) dir = +1;
+      if (this.swipeX >= threshold || vx >= 0.8) dir = -1;
+      
+      if ((dir === -1 && this.previewIndex === 0) ||
+          (dir === +1 && this.previewIndex === this.mediaFiles.length - 1)) {
+        dir = 0;
+      }
+      
+      this.swipeDir = dir;
+      this.swipeAnimating = true;
+      
+      if (dir === +1) this.swipeX = -this.viewportW;
+      else if (dir === -1) this.swipeX = +this.viewportW;
+      else this.swipeX = 0;
+    },
+
+    onSwipeTransitionEnd() {
+      if (!this.swipeAnimating) return;
+      
+      if (this.swipeDir === +1) this.previewIndex++;
+      if (this.swipeDir === -1) this.previewIndex--;
+      
+      this.swipeAnimating = false;
+      this.swipeDir = 0;
+      this.swipeX = 0;
+    },
+
+    // iOS 风格橡皮筋阻尼函数
+    rubberBand(distance, dimension, constant = 0.55) {
+      return (distance * dimension * constant) / (dimension + constant * distance);
+    },
+
+    // 放大状态下边界滑动翻页
+    onEdgeSwipe(dir) {
+      // dir: +1 下一页, -1 上一页
+      if (dir === +1 && this.previewIndex < this.mediaFiles.length - 1) {
+        this.previewIndex++;
+      } else if (dir === -1 && this.previewIndex > 0) {
+        this.previewIndex--;
+      }
+    }
+  }
+};
+</script>
+
+
+<style scoped>
+.public-browse {
+  min-height: 100vh;
+  background: #0a0a0a;
+  color: #fff;
+}
+
+.header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 32px;
+  background: rgba(15, 15, 15, 0.95);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid #1a1a1a;
+}
+
+.logo {
+  font-size: 20px;
+  font-weight: 600;
+  color: #fff;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+}
+
+.breadcrumb-item {
+  padding: 6px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.2s;
+  color: #ccc;
+}
+
+.breadcrumb-item:hover {
+  background: #252525;
+  color: #fff;
+}
+
+.breadcrumb-sep {
+  color: #444;
+}
+
+.file-count {
+  color: #666;
+  font-size: 14px;
+}
+
+.loading-container, .error-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  color: #666;
+}
+
+.loading-spinner {
+  width: 48px;
+  height: 48px;
+  border: 3px solid #222;
+  border-top-color: #3b82f6;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loading-spinner-small {
+  width: 24px;
+  height: 24px;
+  border: 2px solid #222;
+  border-top-color: #3b82f6;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.retry-btn {
+  margin-top: 20px;
+  padding: 10px 32px;
+  background: #3b82f6;
+  border: none;
+  border-radius: 8px;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.retry-btn:hover {
+  background: #2563eb;
+}
+
+.gallery-container {
+  padding: 8px;
+}
+
+@media (min-width: 1200px) {
+  .gallery-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 24px;
+  }
+}
+
+.folders-section {
+  margin-bottom: 24px;
+}
+
+.folders-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 16px;
+}
+
+.folder-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 16px;
+  background: #141414;
+  border-radius: 12px;
+  border: 1px solid #1a1a1a;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.folder-card:hover {
+  background: #1a1a1a;
+  border-color: #333;
+  transform: translateY(-2px);
+}
+
+.folder-icon {
+  width: 48px;
+  height: 48px;
+  margin-bottom: 12px;
+  color: #555;
+}
+
+.folder-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.folder-name {
+  font-size: 14px;
+  color: #999;
+  text-align: center;
+  word-break: break-all;
+}
+
+.waterfall {
+  display: flex;
+  gap: 16px;
+}
+
+.waterfall-column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.waterfall-item {
+  cursor: pointer;
+}
+
+.image-wrapper {
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #141414;
+  border: 1px solid #1a1a1a;
+  min-height: 180px;
+}
+
+.image-wrapper::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, #141414 25%, #1a1a1a 50%, #141414 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.image-wrapper.loaded::before {
+  display: none;
+}
+
+.image-wrapper.loaded {
+  min-height: auto;
+}
+
+.image-wrapper img, .image-wrapper video {
+  width: 100%;
+  display: block;
+  position: relative;
+  z-index: 2;
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.image-wrapper:hover {
+  border-color: #333;
+}
+
+.overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(transparent 50%, rgba(0,0,0,0.85));
+  opacity: 0;
+  transition: opacity 0.2s;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding: 12px;
+  z-index: 10;
+}
+
+.image-wrapper:hover .overlay {
+  opacity: 1;
+}
+
+.file-placeholder {
+  width: 100%;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #141414;
+  color: #333;
+}
+
+.file-placeholder svg {
+  width: 56px;
+  height: 56px;
+}
+
+.overlay-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.action-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(255,255,255,0.08);
+  backdrop-filter: blur(8px);
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255,255,255,0.6);
+}
+
+.action-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+.action-btn:hover {
+  background: rgba(255,255,255,0.2);
+  color: #fff;
+  transform: scale(1.1);
+}
+
+.load-trigger {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 48px;
+  min-height: 100px;
+}
+
+.loading-more {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #666;
+  font-size: 14px;
+}
+
+.no-more {
+  color: #444;
+  font-size: 14px;
+}
+
+.credit-link {
+  display: block;
+  margin-top: 8px;
+  color: #555;
+  font-size: 12px;
+  text-decoration: none;
+  transition: color 0.2s;
+  text-align: center;
+}
+
+.credit-link:hover {
+  color: #888;
+}
+
+/* 预览弹窗 */
+.preview-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(0,0,0,0.97);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.preview-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 80px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.swipe-viewport {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.swipe-track {
+  width: 300%;
+  height: 100%;
+  display: flex;
+  will-change: transform;
+}
+
+.swipe-slide {
+  width: 33.333%;
+  flex-shrink: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.preview-image, .preview-video {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+.preview-close {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: rgba(255,255,255,0.1);
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s;
+  z-index: 1010;
+}
+
+.preview-close:hover {
+  background: rgba(255,255,255,0.2);
+}
+
+.preview-close svg {
+  width: 28px;
+  height: 28px;
+}
+
+.page-indicator {
+  position: fixed;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0,0,0,0.6);
+  color: rgba(255,255,255,0.8);
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 14px;
+  z-index: 1010;
+}
+
+.preview-prev, .preview-next {
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(255,255,255,0.1);
+  border: none;
+  color: #fff;
+  padding: 16px;
+  cursor: pointer;
+  border-radius: 50%;
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s;
+  z-index: 1010;
+}
+
+.preview-prev:hover, .preview-next:hover {
+  background: rgba(255,255,255,0.2);
+}
+
+.preview-prev svg, .preview-next svg {
+  width: 32px;
+  height: 32px;
+}
+
+.preview-prev { left: 20px; }
+.preview-next { right: 20px; }
+
+.rotate-btn {
+  position: fixed;
+  bottom: 30px;
+  right: 20px;
+  background: rgba(255,255,255,0.1);
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s;
+  z-index: 1010;
+}
+
+.rotate-btn:hover {
+  background: rgba(255,255,255,0.2);
+}
+
+.rotate-btn svg {
+  width: 24px;
+  height: 24px;
+}
+
+/* 桌面端显示，手机端隐藏 */
+@media (max-width: 768px) {
+  .desktop-only {
+    display: none !important;
+  }
+  
+  .preview-content.mobile-only {
+    display: block;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  
+  .page-indicator {
+    bottom: 40px;
+  }
+}
+
+/* 手机端显示，桌面端隐藏 */
+@media (min-width: 769px) {
+  .mobile-only {
+    display: none !important;
+  }
+}
+
+/* 平板端 */
+@media (max-width: 1199px) and (min-width: 601px) {
+  .gallery-container {
+    padding: 12px;
+  }
+  
+  .waterfall {
+    gap: 10px;
+  }
+  
+  .waterfall-column {
+    gap: 10px;
+  }
+  
+  .image-wrapper {
+    border-radius: 8px;
+  }
+}
+
+/* 手机端 */
+@media (max-width: 600px) {
+  .header {
+    padding: 10px 12px;
+  }
+  
+  .header-left .logo {
+    font-size: 16px;
+  }
+  
+  .breadcrumb {
+    font-size: 12px;
+  }
+  
+  .breadcrumb-item {
+    padding: 4px 8px;
+  }
+  
+  .file-count {
+    font-size: 12px;
+  }
+  
+  .gallery-container {
+    padding: 6px;
+  }
+  
+  .waterfall {
+    gap: 6px;
+  }
+  
+  .waterfall-column {
+    gap: 6px;
+  }
+  
+  .image-wrapper {
+    border-radius: 6px;
+    min-height: 120px;
+  }
+  
+  .folders-section {
+    margin-bottom: 12px;
+  }
+  
+  .folders-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+  }
+  
+  .folder-card {
+    padding: 16px 12px;
+    border-radius: 8px;
+  }
+  
+  .folder-icon {
+    width: 36px;
+    height: 36px;
+    margin-bottom: 8px;
+  }
+  
+  .folder-name {
+    font-size: 12px;
+  }
+  
+  .load-trigger {
+    padding: 24px;
+    min-height: 60px;
+  }
+}
+
+/* Toast 提示 */
+:global(.copy-toast) {
+  position: fixed;
+  bottom: 80px;
+  left: 50%;
+  transform: translateX(-50%) translateY(20px);
+  background: rgba(0,0,0,0.8);
+  color: #fff;
+  padding: 10px 24px;
+  border-radius: 20px;
+  font-size: 14px;
+  opacity: 0;
+  transition: all 0.3s ease;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+:global(.copy-toast.show) {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+</style>