From b367a01353b80b28c937ceea4f7c1a4adb912d6a Mon Sep 17 00:00:00 2001
From: zjr <zatoncooper@gmail.com>
Date: Sun, 30 Aug 2026 22:17:00 +0800
Subject: [PATCH 1/4] =?UTF-8?q?[frontend]=20fix:=20=E4=BA=91=E7=9B=98=20PD?=
 =?UTF-8?q?F=20=E6=94=B9=E4=B8=BA=E5=90=8C=E6=BA=90=E4=BB=A3=E7=90=86+?=
 =?UTF-8?q?=E6=96=B0=E6=A0=87=E7=AD=BE=E9=A1=B5=E5=8E=9F=E7=94=9F=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- next.config: /minio-proxy/* beforeFiles rewrite（Next 服务端转发 nginx→MinIO），
  生产模式（NEXT_PUBLIC_API_URL 设值）也保留；MINIO_PROXY_DEST 走 build arg
  （rewrites 在构建时固化进 routes-manifest，运行时 env 无效）
- file-viewer: presigned URL 归一化为同源相对路径，PDF 用 window.open 新标签页
  交给浏览器原生查看器（原 iframe 会被 nginx X-Frame-Options SAMEORIGIN 跨源拒绝）
- Dockerfile: npm registry 切 npmmirror（musl 平台 swc 二进制不在 Windows 锁文件
  里，next build 现场下载直连 npmjs 必断）；healthcheck wget 改 127.0.0.1（busybox
  localhost 解析 IPv6，Next 只绑 IPv4，容器永远 unhealthy）
---
 frontendv2/Dockerfile                         | 15 +++-
 .../components/cloud-drive/file-viewer.tsx    | 72 ++++++++++++++++---
 frontendv2/next.config.ts                     | 19 ++++-
 3 files changed, 91 insertions(+), 15 deletions(-)

diff --git a/frontendv2/Dockerfile b/frontendv2/Dockerfile
index 98949af..9945e49 100644
--- a/frontendv2/Dockerfile
+++ b/frontendv2/Dockerfile
@@ -17,10 +17,20 @@ WORKDIR /app
 # Override via: docker build --build-arg NEXT_PUBLIC_API_URL=...
 ARG NEXT_PUBLIC_API_URL=""
 ARG NEXT_PUBLIC_APISIX_HOST=""
+# next build 会把 rewrites() 的 destination 固化进 routes-manifest.json（运行时
+# env 不再参与求值），所以 MinIO 同源代理目标必须作为 build arg 注入。
+# compose 传 http://nginx:80；宿主机本地构建缺省走 http://localhost。
+ARG MINIO_PROXY_DEST=""
 ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL \
-    NEXT_PUBLIC_APISIX_HOST=$NEXT_PUBLIC_APISIX_HOST
+    NEXT_PUBLIC_APISIX_HOST=$NEXT_PUBLIC_APISIX_HOST \
+    MINIO_PROXY_DEST=$MINIO_PROXY_DEST
 
 # Install dependencies first to leverage Docker's layer cache.
+# registry 切国内镜像：package-lock 在 Windows 生成，Linux/musl 平台的
+# @next/swc 二进制不在锁文件里，`next build` 会现场从 registry 下载约 60MB，
+# 直连 npmjs 极易被掐断导致构建崩溃（download-swc 会读取 npm registry 配置，
+# 所以这里一处设置同时管住 npm ci 和 swc 下载）。
+RUN npm config set registry https://registry.npmmirror.com
 COPY package.json package-lock.json ./
 RUN npm ci
 
@@ -51,7 +61,8 @@ USER appuser
 
 EXPOSE 3000
 
+# busybox wget 会把 localhost 解析成 IPv6 ::1，而 Next 只绑 IPv4 —— 用 127.0.0.1
 HEALTHCHECK --interval=30s --timeout=5s --retries=3 \
-    CMD wget -qO- http://localhost:3000/ || exit 1
+    CMD wget -qO- http://127.0.0.1:3000/ || exit 1
 
 CMD ["node", "server.js"]
diff --git a/frontendv2/components/cloud-drive/file-viewer.tsx b/frontendv2/components/cloud-drive/file-viewer.tsx
index d9c377c..c64e24d 100644
--- a/frontendv2/components/cloud-drive/file-viewer.tsx
+++ b/frontendv2/components/cloud-drive/file-viewer.tsx
@@ -7,21 +7,42 @@
  * Next 16 async-params dance, same convention as the shared-note page).
  *
  * Fetches a presigned MinIO GET URL (plus inline text for text-like types)
- * from /cloud/video/:uuid/raw and renders the file natively:
- *  - video / audio / image / pdf -> browser element with the presigned URL
- *  - html / markdown / text       -> inline content (no CORS fetch)
+ * from /cloud/video/:uuid/raw and renders the file:
+ *  - pdf                         -> auto-open in a NEW browser tab; the
+ *                                   browser's native PDF viewer takes over
+ *  - video / audio / image       -> browser element with the presigned URL
+ *  - html / markdown / text      -> inline content (no CORS fetch)
  *  - anything else                -> download link
  *
  * Layout: sticky frosted header (back + icon + name + size + download) + a
  * centered reading column.
  */
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
 import { Markdown } from "@/components/markdown";
 import { ArrowLeft, Loader2, AlertCircle, Download, FileText } from "lucide-react";
 import { cloudApi, formatBytes, type CloudRawFileResponse } from "@/lib/api/cloud";
 import { FileIconTile } from "./file-icon";
 
+/**
+ * Normalize the presigned MinIO URL to a same-origin path when it goes
+ * through the nginx /minio-proxy prefix. Embedding the absolute proxy URL
+ * (e.g. http://localhost/minio-proxy/...) in an <iframe> trips nginx's
+ * X-Frame-Options: SAMEORIGIN whenever the page origin differs (page on
+ * :3000, proxy on :80). next.config.ts proxies the identical path through
+ * the Next server, so the relative form stays same-origin for every media
+ * element below. Non-proxy URLs (custom MINIO__PUBLIC_ENDPOINT) are kept.
+ */
+function toSameOriginUrl(url: string): string {
+    try {
+        const u = new URL(url, window.location.origin);
+        if (u.pathname.startsWith("/minio-proxy/")) return u.pathname + u.search;
+        return url;
+    } catch {
+        return url;
+    }
+}
+
 export function FileViewer() {
     const pathname = usePathname();
     const router = useRouter();
@@ -31,6 +52,18 @@ export function FileViewer() {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
+    // PDF: open the file in a NEW tab and let the browser's native viewer
+    // take over; this page stays as a status card with manual links in case
+    // the popup is blocked. The ref guard keeps React StrictMode's dev
+    // double-invoke from opening two tabs.
+    const pdfAutoOpened = useRef(false);
+    useEffect(() => {
+        if (raw?.viewMode === "pdf" && raw.url && !pdfAutoOpened.current) {
+            pdfAutoOpened.current = true;
+            window.open(raw.url, "_blank");
+        }
+    }, [raw?.viewMode, raw?.url]);
+
     useEffect(() => {
         if (!uuid) return;
         let cancelled = false;
@@ -38,7 +71,7 @@ export function FileViewer() {
             try {
                 const r = await cloudApi.getRawFile(uuid);
                 if (!cancelled) {
-                    setRaw(r);
+                    setRaw({ ...r, url: toSameOriginUrl(r.url) });
                     setLoading(false);
                 }
             } catch (e) {
@@ -159,12 +192,31 @@ function RawContent({ raw }: { raw: CloudRawFileResponse }) {
                 />
             );
         case "pdf":
+            // The auto-open effect opened a new tab (native PDF viewer); this
+            // card covers the popup-blocked case with a real anchor link.
             return (
-                <iframe
-                    src={raw.url}
-                    title={raw.fileName}
-                    className="h-[80vh] w-full rounded-2xl border border-border-subtle"
-                />
+                <div className="flex flex-col items-center justify-center py-24 text-center">
+                    <span className="grid h-14 w-14 place-items-center rounded-2xl bg-border-subtle text-secondary">
+                        <FileText className="h-6 w-6" />
+                    </span>
+                    <p className="mt-4 text-[15px] font-medium text-foreground">PDF 已在新标签页打开</p>
+                    <p className="mt-1.5 max-w-xs text-[13px] text-secondary">
+                        由浏览器内置查看器展示；若新标签页未出现，点击下方链接手动打开。
+                    </p>
+                    <a
+                        href={raw.url}
+                        target="_blank"
+                        rel="noopener"
+                        className="btn-pill btn-primary mt-5 h-9 px-5 text-[13px]"
+                    >
+                        <FileText className="h-4 w-4" />
+                        在新标签页打开 PDF
+                    </a>
+                    <a href={raw.url} download={raw.fileName} className="btn-pill btn-ghost mt-2 h-9 px-5 text-[13px]">
+                        <Download className="h-4 w-4" />
+                        下载原文件
+                    </a>
+                </div>
             );
         case "html":
             if (raw.content == null) return <TooLargeDownload raw={raw} />;
diff --git a/frontendv2/next.config.ts b/frontendv2/next.config.ts
index 319f9de..f855a33 100644
--- a/frontendv2/next.config.ts
+++ b/frontendv2/next.config.ts
@@ -1,14 +1,26 @@
 import type { NextConfig } from "next";
 
 const APISIX_HOST = process.env.NEXT_PUBLIC_APISIX_HOST || "localhost:9080";
+// MinIO 同源代理目标（Next 服务器可达的 nginx 地址）
+const MINIO_PROXY_DEST = process.env.MINIO_PROXY_DEST || "http://localhost";
 
 const nextConfig: NextConfig = {
   output: "standalone",
-  // 开发模式代理：将 API 请求转发到 APISIX
-  // 生产环境由 nginx 处理，此 rewrite 不生效（NEXT_PUBLIC_API_URL 设值时跳过）
+  // 开发模式代理：将 API 请求转发到 APISIX。
+  // 生产环境（NEXT_PUBLIC_API_URL 设值）跳过 API rewrite（由 nginx 处理），
+  // 但 MinIO 同源代理 rewrite 两种模式都保留（媒体元素需要同源嵌入）。
   async rewrites() {
     const backend = process.env.NEXT_PUBLIC_API_URL;
-    if (backend) return []; // 生产模式：nginx 代理，不需要 rewrite
+    // MinIO 同源代理：后端把 presigned URL 改写到 nginx 的 /minio-proxy 前缀
+    // （浏览器可达），但页面源与该前缀不同源时（页面 :3000 vs 代理 :80），
+    // nginx 的 X-Frame-Options: SAMEORIGIN 会拒绝 <iframe>/<video> 嵌入。
+    // 前端把 raw.url 归一化成同源相对路径，由 Next 服务端转发，媒体元素即可
+    // 保持同源。前后端约定：只要路径带 /minio-proxy/ 前缀就走此代理。
+    const minioProxy = {
+      source: "/minio-proxy/:path*",
+      destination: `${MINIO_PROXY_DEST}/minio-proxy/:path*`,
+    };
+    if (backend) return { beforeFiles: [minioProxy] }; // 生产模式：仅保留 minio 代理
     // dev: /tasks/* 和 /task-quiz/* 既是 Next.js 页面路由又是后端 API 路径。
     // fallback rewrites 在页面路由之后，会让 API fetch 命中页面返回 HTML（JSON parse 失败）。
     // 用 beforeFiles + X-Requested-With header 区分：
@@ -16,6 +28,7 @@ const nextConfig: NextConfig = {
     //   页面导航（无 header）-> Next.js 页面路由
     return {
       beforeFiles: [
+        minioProxy,
         {
           source: "/tasks",
           destination: `http://${APISIX_HOST}/tasks`,

From 2d6071fef867dd4e5ed67368a8d98e8eb20d59a4 Mon Sep 17 00:00:00 2001
From: zjr <zatoncooper@gmail.com>
Date: Sun, 30 Aug 2026 22:18:19 +0800
Subject: [PATCH 2/4] =?UTF-8?q?[backend]=20fix:=20/raw=20presign=20?=
 =?UTF-8?q?=E6=B3=A8=E5=85=A5=E7=9C=9F=E5=AE=9E=20MIME=20+=20Dockerfile=20?=
 =?UTF-8?q?=E6=9E=84=E5=BB=BA=E5=8A=A0=E5=9B=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- minio.presigned_get 支持 response_headers（签名进 query）；raw 端点对
  pdf/video/audio/image 注入 response-content-type=file.mime_type——对象存储为
  octet-stream 且链路带 nosniff 时浏览器拒绝嗅探，iframe/媒体元素无法渲染；
  对存量对象同样生效
- Dockerfile: FROM 按 digest 固定（buildkit 每次联网解析 tag 在国内网络下反复
  失败，digest 可离线命中本地镜像）；pip 加 --timeout 120 --retries 5
  （默认 15s，清华源下大包传输停顿即整层失败）
---
 Dockerfile           | 12 ++++++++----
 app/infra/minio.py   | 13 ++++++++++++-
 app/routers/cloud.py | 10 +++++++++-
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index af06dda..18bcac5 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,5 +1,8 @@
 # ====== Backend: FastAPI ======
-FROM python:3.12-slim
+# digest 固定：buildkit 每次都会联网解析 tag 元数据，国内网络下常被掐断导致
+# 构建卡死；digest 引用可直接命中本地镜像，无需联网。升级基础镜像时更新 digest
+# （docker images --digests python）。
+FROM python:3.12-slim@sha256:09f7da3bc104798d0afb40bc08d23ab2da20a76130cec1f2ef170848f5d85217
 
 LABEL app="mind-base-backend"
 
@@ -33,10 +36,11 @@ RUN curl -fsSL --retry 5 --retry-all-errors --retry-delay 3 --connect-timeout 30
 WORKDIR /app
 
 # Install Python dependencies
-# Tip: for faster downloads in China, uncomment the mirror line below
-#   --index-url https://pypi.tuna.tsinghua.edu.cn/simple
+# --default-timeout/--retries：清华源偶尔读超时（大包下载中断导致整层失败），
+# 放宽单请求超时到 120s 并自动重试，与 ffmpeg 下载的 --retry 策略保持一致。
 COPY requirements.txt .
-RUN pip install --no-cache-dir -i https://pypi.tuna.tsinghua.edu.cn/simple -r requirements.txt
+RUN pip install --no-cache-dir --timeout 120 --retries 5 \
+    -i https://pypi.tuna.tsinghua.edu.cn/simple -r requirements.txt
 
 # Copy application code
 COPY app/ ./app/
diff --git a/app/infra/minio.py b/app/infra/minio.py
index 6f1287b..ba6977a 100644
--- a/app/infra/minio.py
+++ b/app/infra/minio.py
@@ -300,13 +300,24 @@ async def abort_multipart_upload(self, object_key: str, upload_id: str) -> None:
 
     # ── object access ─────────────────────────────────────────
 
-    async def presigned_get(self, object_key: str) -> str:
+    async def presigned_get(
+        self, object_key: str, response_headers: Optional[dict] = None
+    ) -> str:
+        """Presigned GET URL.
+
+        ``response_headers`` (e.g. ``{"response-content-type": "application/pdf"}``)
+        is signed into the query string, so the object is served with the given
+        Content-Type regardless of how it was stored — needed when uploads
+        persisted a generic ``application/octet-stream`` and the browser must
+        render the file inline (PDF / video / image).
+        """
         self._ensure_client()
         url = await _run_async(
             self._client.presigned_get_object,
             self.bucket,
             object_key,
             expires=timedelta(seconds=config.minio.presign_expire),
+            response_headers=response_headers,
         )
         return self._public_url(url)
 
diff --git a/app/routers/cloud.py b/app/routers/cloud.py
index cd09f7a..c1b1ba0 100644
--- a/app/routers/cloud.py
+++ b/app/routers/cloud.py
@@ -804,7 +804,15 @@ async def get_video_raw(
         view_mode = _classify_view_mode(file.mime_type)
 
         # Presigned GET URL - works for download and as <video>/<img>/<iframe> src.
-        url = await client.presigned_get(file.object_key)
+        # Binary view modes need the real MIME signed into the response: uploads
+        # may have persisted application/octet-stream, and with nosniff in the
+        # chain the browser refuses to sniff PDF/media, leaving the viewer blank.
+        response_headers = (
+            {"response-content-type": file.mime_type}
+            if view_mode in ("pdf", "video", "audio", "image")
+            else None
+        )
+        url = await client.presigned_get(file.object_key, response_headers)
 
         # Inline text content for text-like files (<=5 MB) to avoid CORS fetch.
         content: Optional[str] = None

From 783bcfdc4c8c47b3bc304884c661741f49924baf Mon Sep 17 00:00:00 2001
From: zjr <zatoncooper@gmail.com>
Date: Sun, 30 Aug 2026 22:18:19 +0800
Subject: [PATCH 3/4] =?UTF-8?q?[docker]=20chore:=20frontend=20=E6=9E=84?=
 =?UTF-8?q?=E5=BB=BA=20=E6=B3=A8=E5=85=A5=20MINIO=5FPROXY=5FDEST=20build?=
 =?UTF-8?q?=20arg?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

rewrites destination 构建时固化，MinIO 同源代理目标必须作为 build arg 传入
（http://nginx:80，走 compose 内网），运行时 environment 不生效
---
 docker-compose.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docker-compose.yml b/docker-compose.yml
index 5ae1b39..3daf1f1 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -129,6 +129,8 @@ services:
       args:
         NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL:-}
         NEXT_PUBLIC_APISIX_HOST: nginx:80
+        # rewrites 构建时固化，MinIO 同源代理目标必须是 build arg（非运行时 env）
+        MINIO_PROXY_DEST: http://nginx:80
     container_name: mind-base-frontend
     # Port exposed for local access; in production nginx handles all traffic
     ports:
@@ -137,6 +139,8 @@ services:
       - NODE_ENV=production
       - NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL:-}
       - NEXT_PUBLIC_APISIX_HOST=nginx:80
+      # MinIO 同源代理目标（rewrites 在服务端运行时读取，非 NEXT_PUBLIC）
+      - MINIO_PROXY_DEST=http://nginx:80
     depends_on:
       backend:
         condition: service_healthy

From 404d5ed5a1fea61aa4a1487a84d5dcfcd0eaad53 Mon Sep 17 00:00:00 2001
From: zjr <zatoncooper@gmail.com>
Date: Sun, 30 Aug 2026 22:18:39 +0800
Subject: [PATCH 4/4] =?UTF-8?q?[frontend]=20feat:=20=E4=BA=91=E7=9B=98?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E7=9B=AE=E5=BD=95=E6=94=AF=E6=8C=81=E5=AD=90?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E5=A4=B9/=E9=87=8D=E5=91=BD=E5=90=8D/?=
 =?UTF-8?q?=E5=B1=95=E5=BC=80=E8=AE=B0=E5=BF=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- hover 操作组：新建子文件夹（任意层级，内嵌输入框）/ 重命名（PATCH
  /folders/{id} 前端首次接线）/ 删除（沿用确认弹窗）
- 展开/折叠状态提升到侧栏并持久化 localStorage（原来刷新后强制全展开）
- 选中深层文件夹时自动展开祖先链并 scrollIntoView（含 localStorage 恢复的
  上次位置）
- 无文件夹空状态提示
---
 .../cloud-drive/cloud-drive-view.tsx          |  15 +-
 .../components/cloud-drive/folder-sidebar.tsx | 454 ++++++++++++++----
 2 files changed, 369 insertions(+), 100 deletions(-)

diff --git a/frontendv2/components/cloud-drive/cloud-drive-view.tsx b/frontendv2/components/cloud-drive/cloud-drive-view.tsx
index 4c7801b..ff3c32c 100644
--- a/frontendv2/components/cloud-drive/cloud-drive-view.tsx
+++ b/frontendv2/components/cloud-drive/cloud-drive-view.tsx
@@ -261,11 +261,19 @@ export function CloudDriveView() {
     );
 
     const handleCreateFolder = useCallback(
-        async (name: string) => {
-            await cloudApi.createFolder({ parentId: selectedFolderId, name });
+        async (name: string, parentId: number | null) => {
+            await cloudApi.createFolder({ parentId, name });
             await refreshFolders();
         },
-        [selectedFolderId, refreshFolders]
+        [refreshFolders]
+    );
+
+    const handleRenameFolder = useCallback(
+        async (id: number, name: string) => {
+            await cloudApi.updateFolder(id, { name });
+            await refreshFolders();
+        },
+        [refreshFolders]
     );
 
     const handleDeleteFolder = useCallback(async () => {
@@ -348,6 +356,7 @@ export function CloudDriveView() {
                     totalCount={videosLoading ? 0 : totalFiles}
                     onSelect={handleSelectFolder}
                     onCreateFolder={handleCreateFolder}
+                    onRenameFolder={handleRenameFolder}
                     onDeleteFolder={setDeleteFolderTarget}
                 />
             </aside>
diff --git a/frontendv2/components/cloud-drive/folder-sidebar.tsx b/frontendv2/components/cloud-drive/folder-sidebar.tsx
index b31924b..866a3cb 100644
--- a/frontendv2/components/cloud-drive/folder-sidebar.tsx
+++ b/frontendv2/components/cloud-drive/folder-sidebar.tsx
@@ -1,14 +1,20 @@
 "use client";
 
 /**
- * Folder sidebar - recursive folder tree + inline create + delete.
+ * Folder sidebar - recursive folder tree with full CRUD.
  *
  * Apple Finder sidebar feel: a "全部文件" root entry, then a collapsible
- * nested tree. Active folder = accent-soft + accent text; hover reveals a
- * delete affordance. Creating a folder shows an inline input at the top of
- * the tree. A footer shows the total file count across all folders.
+ * nested tree. Active folder = accent-soft + accent text; hover reveals the
+ * action group (new subfolder / rename / delete). Creating shows an inline
+ * input under the target node (or at the tree top for the root); renaming
+ * swaps the row's name for an inline input.
+ *
+ * State ownership:
+ *  - expanded/collapsed: lifted here (persisted to localStorage); selection
+ *    changes auto-expand the ancestor chain and scroll the row into view.
+ *  - drafts (create/rename input text): local to the node rendering them.
  */
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
 import {
     Cloud,
     Folder,
@@ -16,22 +22,55 @@ import {
     ChevronRight,
     ChevronDown,
     Trash2,
+    Pencil,
     Loader2,
     X,
+    FolderOpen,
 } from "lucide-react";
 import type { CloudFolderTreeItem } from "@/lib/api/cloud";
 import { cn } from "@/lib/utils";
 
+const COLLAPSED_KEY = "cloud-drive:collapsed-folders";
+
 interface FolderSidebarProps {
     folders: CloudFolderTreeItem[];
     loading: boolean;
     selectedFolderId: number | null;
     totalCount: number;
     onSelect: (id: number | null) => void;
-    onCreateFolder: (name: string) => Promise<void>;
+    onCreateFolder: (name: string, parentId: number | null) => Promise<void>;
+    onRenameFolder: (id: number, name: string) => Promise<void>;
     onDeleteFolder: (folder: CloudFolderTreeItem) => void;
 }
 
+function readCollapsed(): Set<number> {
+    if (typeof window === "undefined") return new Set();
+    try {
+        const raw = window.localStorage.getItem(COLLAPSED_KEY);
+        const arr = raw ? (JSON.parse(raw) as number[]) : [];
+        return new Set(Array.isArray(arr) ? arr : []);
+    } catch {
+        return new Set();
+    }
+}
+
+/** Ancestor ids on the path to targetId (empty when target not found). */
+function findAncestors(
+    folders: CloudFolderTreeItem[],
+    targetId: number,
+    trail: number[] = []
+): number[] {
+    for (const folder of folders) {
+        if (folder.id === targetId) return trail;
+        const hit = findAncestors(folder.children, targetId, [...trail, folder.id]);
+        if (hit.length > 0 || folder.children.some((c) => c.id === targetId)) {
+            if (hit.length > 0) return hit;
+            return [...trail, folder.id];
+        }
+    }
+    return [];
+}
+
 export function FolderSidebar({
     folders,
     loading,
@@ -39,31 +78,55 @@ export function FolderSidebar({
     totalCount,
     onSelect,
     onCreateFolder,
+    onRenameFolder,
     onDeleteFolder,
 }: FolderSidebarProps) {
-    const [creating, setCreating] = useState(false);
-    const [draftName, setDraftName] = useState("");
-    const [busy, setBusy] = useState(false);
-    const inputRef = useRef<HTMLInputElement>(null);
+    const [collapsed, setCollapsed] = useState<Set<number>>(() => readCollapsed());
+    // null = none; { parentId: null } = root-level create.
+    const [createTarget, setCreateTarget] = useState<{ parentId: number | null } | null>(null);
+    const [renamingId, setRenamingId] = useState<number | null>(null);
+    const navRef = useRef<HTMLElement>(null);
 
+    // Persist collapsed ids.
     useEffect(() => {
-        if (creating) inputRef.current?.focus();
-    }, [creating]);
-
-    const submitCreate = async () => {
-        const name = draftName.trim();
-        if (!name || busy) return;
-        setBusy(true);
         try {
-            await onCreateFolder(name);
-            setCreating(false);
-            setDraftName("");
+            window.localStorage.setItem(COLLAPSED_KEY, JSON.stringify([...collapsed]));
         } catch {
-            // Keep the input open so the error is visible.
-        } finally {
-            setBusy(false);
+            // Storage unavailable - expansion just won't persist.
         }
-    };
+    }, [collapsed]);
+
+    // Selection (including a restored one from localStorage) must reveal its
+    // folder: expand ancestors and scroll the row into view.
+    useEffect(() => {
+        if (selectedFolderId == null) return;
+        const ancestors = findAncestors(folders, selectedFolderId);
+        if (ancestors.length === 0) return;
+        setCollapsed((prev) => {
+            const next = new Set(prev);
+            let changed = false;
+            for (const id of ancestors) {
+                if (next.delete(id)) changed = true;
+            }
+            return changed ? next : prev;
+        });
+    }, [selectedFolderId, folders]);
+
+    useEffect(() => {
+        if (selectedFolderId == null || loading) return;
+        navRef.current
+            ?.querySelector(`[data-folder-id="${selectedFolderId}"]`)
+            ?.scrollIntoView({ block: "nearest" });
+    }, [selectedFolderId, folders, loading, collapsed]);
+
+    const toggle = useCallback((id: number) => {
+        setCollapsed((prev) => {
+            const next = new Set(prev);
+            if (next.has(id)) next.delete(id);
+            else next.add(id);
+            return next;
+        });
+    }, []);
 
     return (
         <div className="flex h-full flex-col">
@@ -72,7 +135,10 @@ export function FolderSidebar({
                 <h2 className="text-[13px] font-semibold text-foreground">位置</h2>
                 <button
                     type="button"
-                    onClick={() => setCreating((v) => !v)}
+                    onClick={() => {
+                        setRenamingId(null);
+                        setCreateTarget({ parentId: null });
+                    }}
                     title="新建文件夹"
                     aria-label="新建文件夹"
                     className="grid h-7 w-7 place-items-center rounded-full text-secondary transition-colors hover:bg-border-subtle hover:text-foreground"
@@ -82,7 +148,7 @@ export function FolderSidebar({
             </div>
 
             {/* Tree */}
-            <nav className="flex-1 overflow-y-auto px-2 pb-2">
+            <nav ref={navRef} className="flex-1 overflow-y-auto px-2 pb-2">
                 {/* All files root */}
                 <button
                     type="button"
@@ -98,39 +164,16 @@ export function FolderSidebar({
                     <span className="truncate">全部文件</span>
                 </button>
 
-                {/* Inline create input */}
-                {creating && (
-                    <div className="mt-0.5 flex items-center gap-2 rounded-[10px] bg-accent-soft px-2.5 py-1.5">
-                        <Folder className="h-4 w-4 shrink-0 text-accent" />
-                        <input
-                            ref={inputRef}
-                            value={draftName}
-                            onChange={(e) => setDraftName(e.target.value)}
-                            onKeyDown={(e) => {
-                                if (e.key === "Enter") void submitCreate();
-                                if (e.key === "Escape") {
-                                    setCreating(false);
-                                    setDraftName("");
-                                }
-                            }}
-                            placeholder="文件夹名称"
-                            className="min-w-0 flex-1 bg-transparent text-[13px] text-foreground outline-none placeholder:text-tertiary"
-                        />
-                        {busy ? (
-                            <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin text-accent" />
-                        ) : (
-                            <button
-                                type="button"
-                                onClick={() => {
-                                    setCreating(false);
-                                    setDraftName("");
-                                }}
-                                className="shrink-0 text-tertiary hover:text-foreground"
-                            >
-                                <X className="h-3.5 w-3.5" />
-                            </button>
-                        )}
-                    </div>
+                {/* Root-level inline create input */}
+                {createTarget?.parentId === null && (
+                    <InlineCreateInput
+                        depth={0}
+                        onCancel={() => setCreateTarget(null)}
+                        onSubmit={async (name) => {
+                            await onCreateFolder(name, null);
+                            setCreateTarget(null);
+                        }}
+                    />
                 )}
 
                 {/* Loading */}
@@ -145,6 +188,18 @@ export function FolderSidebar({
                     </div>
                 )}
 
+                {/* Empty state */}
+                {!loading && folders.length === 0 && (
+                    <div className="flex flex-col items-center gap-1.5 px-3 pt-6 text-center">
+                        <FolderOpen className="h-6 w-6 text-tertiary" />
+                        <p className="text-[12px] text-tertiary">
+                            还没有文件夹
+                            <br />
+                            点击右上角新建
+                        </p>
+                    </div>
+                )}
+
                 {/* Recursive tree */}
                 {!loading &&
                     folders.map((folder) => (
@@ -152,8 +207,16 @@ export function FolderSidebar({
                             key={folder.id}
                             folder={folder}
                             depth={0}
+                            collapsed={collapsed}
+                            onToggle={toggle}
                             selectedFolderId={selectedFolderId}
                             onSelect={onSelect}
+                            createTarget={createTarget}
+                            setCreateTarget={setCreateTarget}
+                            renamingId={renamingId}
+                            setRenamingId={setRenamingId}
+                            onCreateFolder={onCreateFolder}
+                            onRenameFolder={onRenameFolder}
                             onDeleteFolder={onDeleteFolder}
                         />
                     ))}
@@ -167,26 +230,138 @@ export function FolderSidebar({
     );
 }
 
+/** Indented inline input used for both root-level and in-folder creation. */
+function InlineCreateInput({
+    depth,
+    onCancel,
+    onSubmit,
+}: {
+    depth: number;
+    onCancel: () => void;
+    onSubmit: (name: string) => Promise<void>;
+}) {
+    const [draftName, setDraftName] = useState("");
+    const [busy, setBusy] = useState(false);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+
+    const submit = async () => {
+        const name = draftName.trim();
+        if (!name || busy) return;
+        setBusy(true);
+        try {
+            await onSubmit(name);
+        } catch {
+            // Keep the input open so the error is visible.
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    return (
+        <div
+            className="mt-0.5 flex items-center gap-2 rounded-[10px] bg-accent-soft px-2.5 py-1.5"
+            style={{ marginLeft: depth * 12 + 4 }}
+        >
+            <Folder className="h-4 w-4 shrink-0 text-accent" />
+            <input
+                ref={inputRef}
+                value={draftName}
+                onChange={(e) => setDraftName(e.target.value)}
+                onKeyDown={(e) => {
+                    if (e.key === "Enter") void submit();
+                    if (e.key === "Escape") onCancel();
+                }}
+                maxLength={80}
+                placeholder="文件夹名称"
+                className="min-w-0 flex-1 bg-transparent text-[13px] text-foreground outline-none placeholder:text-tertiary"
+            />
+            {busy ? (
+                <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin text-accent" />
+            ) : (
+                <button
+                    type="button"
+                    onClick={onCancel}
+                    className="shrink-0 text-tertiary hover:text-foreground"
+                    aria-label="取消"
+                >
+                    <X className="h-3.5 w-3.5" />
+                </button>
+            )}
+        </div>
+    );
+}
+
 function FolderNode({
     folder,
     depth,
+    collapsed,
+    onToggle,
     selectedFolderId,
     onSelect,
+    createTarget,
+    setCreateTarget,
+    renamingId,
+    setRenamingId,
+    onCreateFolder,
+    onRenameFolder,
     onDeleteFolder,
 }: {
     folder: CloudFolderTreeItem;
     depth: number;
+    collapsed: Set<number>;
+    onToggle: (id: number) => void;
     selectedFolderId: number | null;
     onSelect: (id: number | null) => void;
+    createTarget: { parentId: number | null } | null;
+    setCreateTarget: (t: { parentId: number | null } | null) => void;
+    renamingId: number | null;
+    setRenamingId: (id: number | null) => void;
+    onCreateFolder: (name: string, parentId: number | null) => Promise<void>;
+    onRenameFolder: (id: number, name: string) => Promise<void>;
     onDeleteFolder: (folder: CloudFolderTreeItem) => void;
 }) {
-    const [open, setOpen] = useState(true);
     const hasChildren = folder.children.length > 0;
     const active = selectedFolderId === folder.id;
+    const open = !collapsed.has(folder.id);
+    const renaming = renamingId === folder.id;
+    const creatingHere = createTarget?.parentId === folder.id;
+    const [renameDraft, setRenameDraft] = useState("");
+    const [renameBusy, setRenameBusy] = useState(false);
+    const renameInputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        if (renaming) {
+            setRenameDraft(folder.name);
+            renameInputRef.current?.focus();
+            renameInputRef.current?.select();
+        }
+    }, [renaming, folder.name]);
+
+    const submitRename = async () => {
+        const name = renameDraft.trim();
+        if (!name || renameBusy || name === folder.name) {
+            setRenamingId(null);
+            return;
+        }
+        setRenameBusy(true);
+        try {
+            await onRenameFolder(folder.id, name);
+            setRenamingId(null);
+        } catch {
+            // Keep the input open so the error is visible.
+        } finally {
+            setRenameBusy(false);
+        }
+    };
 
     return (
         <div>
             <div
+                data-folder-id={folder.id}
                 className={cn(
                     "group flex items-center gap-1 rounded-[10px] pr-1 transition-colors",
                     active ? "bg-accent-soft" : "hover:bg-border-subtle/70"
@@ -195,9 +370,10 @@ function FolderNode({
             >
                 <button
                     type="button"
-                    onClick={() => hasChildren && setOpen((v) => !v)}
+                    onClick={() => hasChildren && onToggle(folder.id)}
+                    aria-expanded={hasChildren ? open : undefined}
                     className={cn(
-                        "grid h-6 w-5 shrink-0 place-items-center text-tertiary",
+                        "grid h-6 w-5 shrink-0 place-items-center text-tertiary transition-transform",
                         !hasChildren && "invisible"
                     )}
                 >
@@ -207,43 +383,119 @@ function FolderNode({
                         <ChevronRight className="h-3.5 w-3.5" />
                     )}
                 </button>
-                <button
-                    type="button"
-                    onClick={() => onSelect(folder.id)}
-                    className={cn(
-                        "flex min-w-0 flex-1 items-center gap-2 py-1.5 text-[13px]",
-                        active ? "font-medium text-accent" : "text-foreground"
-                    )}
-                >
-                    <Folder
-                        className={cn(
-                            "h-4 w-4 shrink-0",
-                            active ? "text-accent" : "text-secondary"
+
+                {renaming ? (
+                    <div className="flex min-w-0 flex-1 items-center gap-2 py-1.5">
+                        <Folder className="h-4 w-4 shrink-0 text-accent" />
+                        <input
+                            ref={renameInputRef}
+                            value={renameDraft}
+                            disabled={renameBusy}
+                            onChange={(e) => setRenameDraft(e.target.value)}
+                            onKeyDown={(e) => {
+                                if (e.key === "Enter") void submitRename();
+                                if (e.key === "Escape") setRenamingId(null);
+                            }}
+                            maxLength={80}
+                            className="min-w-0 flex-1 bg-transparent text-[13px] text-foreground outline-none"
+                        />
+                        {renameBusy ? (
+                            <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin text-accent" />
+                        ) : (
+                            <button
+                                type="button"
+                                onClick={() => setRenamingId(null)}
+                                className="shrink-0 text-tertiary hover:text-foreground"
+                                aria-label="取消重命名"
+                            >
+                                <X className="h-3.5 w-3.5" />
+                            </button>
                         )}
-                    />
-                    <span className="truncate">{folder.name}</span>
-                    {folder.videoCount > 0 && (
-                        <span className="ml-auto shrink-0 text-[11px] tabular-nums text-tertiary">
-                            {folder.videoCount}
-                        </span>
-                    )}
-                </button>
-                <button
-                    type="button"
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        onDeleteFolder(folder);
-                    }}
-                    title="删除文件夹"
-                    aria-label="删除文件夹"
-                    className={cn(
-                        "grid h-6 w-6 shrink-0 place-items-center rounded-full text-tertiary transition-colors hover:bg-danger/10 hover:text-danger",
-                        active ? "opacity-100" : "opacity-0 group-hover:opacity-100"
-                    )}
-                >
-                    <Trash2 className="h-3.5 w-3.5" />
-                </button>
+                    </div>
+                ) : (
+                    <>
+                        <button
+                            type="button"
+                            onClick={() => onSelect(folder.id)}
+                            className={cn(
+                                "flex min-w-0 flex-1 items-center gap-2 py-1.5 text-[13px]",
+                                active ? "font-medium text-accent" : "text-foreground"
+                            )}
+                        >
+                            <Folder
+                                className={cn(
+                                    "h-4 w-4 shrink-0",
+                                    active ? "text-accent" : "text-secondary"
+                                )}
+                            />
+                            <span className="truncate">{folder.name}</span>
+                            {folder.videoCount > 0 && (
+                                <span className="ml-auto shrink-0 text-[11px] tabular-nums text-tertiary">
+                                    {folder.videoCount}
+                                </span>
+                            )}
+                        </button>
+                        {/* Hover action group: create subfolder / rename / delete */}
+                        <div
+                            className={cn(
+                                "flex shrink-0 items-center",
+                                active ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+                            )}
+                        >
+                            <button
+                                type="button"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    setRenamingId(null);
+                                    setCreateTarget({ parentId: folder.id });
+                                }}
+                                title="新建子文件夹"
+                                aria-label={`在 ${folder.name} 中新建文件夹`}
+                                className="grid h-6 w-6 place-items-center rounded-full text-tertiary transition-colors hover:bg-accent-soft hover:text-accent"
+                            >
+                                <FolderPlus className="h-3.5 w-3.5" />
+                            </button>
+                            <button
+                                type="button"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    setCreateTarget(null);
+                                    setRenamingId(folder.id);
+                                }}
+                                title="重命名"
+                                aria-label={`重命名 ${folder.name}`}
+                                className="grid h-6 w-6 place-items-center rounded-full text-tertiary transition-colors hover:bg-border-subtle hover:text-foreground"
+                            >
+                                <Pencil className="h-3.5 w-3.5" />
+                            </button>
+                            <button
+                                type="button"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    onDeleteFolder(folder);
+                                }}
+                                title="删除文件夹"
+                                aria-label={`删除 ${folder.name}`}
+                                className="grid h-6 w-6 place-items-center rounded-full text-tertiary transition-colors hover:bg-danger/10 hover:text-danger"
+                            >
+                                <Trash2 className="h-3.5 w-3.5" />
+                            </button>
+                        </div>
+                    </>
+                )}
             </div>
+
+            {/* Inline create input for a subfolder of THIS node */}
+            {creatingHere && (
+                <InlineCreateInput
+                    depth={depth + 1}
+                    onCancel={() => setCreateTarget(null)}
+                    onSubmit={async (name) => {
+                        await onCreateFolder(name, folder.id);
+                    }}
+                />
+            )}
+
             {hasChildren && open && (
                 <div>
                     {folder.children.map((child) => (
@@ -251,8 +503,16 @@ function FolderNode({
                             key={child.id}
                             folder={child}
                             depth={depth + 1}
+                            collapsed={collapsed}
+                            onToggle={onToggle}
                             selectedFolderId={selectedFolderId}
                             onSelect={onSelect}
+                            createTarget={createTarget}
+                            setCreateTarget={setCreateTarget}
+                            renamingId={renamingId}
+                            setRenamingId={setRenamingId}
+                            onCreateFolder={onCreateFolder}
+                            onRenameFolder={onRenameFolder}
                             onDeleteFolder={onDeleteFolder}
                         />
                     ))}