@dsh-sparrow/dsh-file-manage 0.1.0-alpha.1 → 0.1.0-alpha.2

package/CHANGELOG.md

@@ -8,3 +8,7 @@ English | [简体中文](CHANGELOG.zh-CN.md)
 - Sidebar "Cloud Files" entry + panel (styled like the official Settings / Archive): list pages of 20, Load more cursor pagination, per-file delete (stronger notice for `dsh-` auto-uploaded files), one-click copy file_id
 - Total count + drive-style quota bar: used / 25 GiB, adaptive-precision percentage, striped empty area, "Loaded X / N" synced with pagination
 - Reuses the official DeepSeekFilesClient (connection facts from the llm-deepseek settings section + ctx.credentials); no local persistence
+
+## 0.1.0-alpha.2 (2026-09-01 · pre-release)
+
+- Panel opens with a full-panel loading state: content is revealed only after both the file list and the total-count request settle, eliminating the loading flicker

package/CHANGELOG.zh-CN.md

@@ -8,3 +8,7 @@
 - 侧边栏「云端文件」入口 + 面板（样式对齐官方设置 / 归档面板）：每页 20 条列表、Load more 游标翻页、单条删除（`dsh-` 自动上传文件给更强提示）、一键复制 file_id
 - 总数 + 网盘式配额条：已用 / 25 GiB、自适应精度百分比、条纹空白区、「已加载 X / N」随翻页同步
 - 复用官方 DeepSeekFilesClient（连接事实取自 llm-deepseek 设置节 + ctx.credentials）；无本地持久化
+
+## 0.1.0-alpha.2 (2026-09-01 · pre-release)
+
+- 面板打开改为整页 loading：文件列表与总数统计都就绪后才展示内容，消除加载闪动

package/lib/client/FileManageDock.js

@@ -17,14 +17,19 @@ export function FileManageDock({ wide, listFiles, deleteFile, countFiles, t }) {
     const [busyDelete, setBusyDelete] = useState(false);
     const [copied, setCopied] = useState(null);
     const [summary, setSummary] = useState(null);
+    /** 总数统计请求尚未落定：与 loading 一起构成首屏 ready 门（2026-09-01 整页 loading）。 */
+    const [summaryPending, setSummaryPending] = useState(false);
     const closeButtonRef = useRef(null);
     /** 刷新代际：快速关/开面板产生并发请求时，只让最新一次的结果落地（陈旧响应竞态，archive 同款）。 */
     const refreshSeqRef = useRef(0);
     /** 「已复制」反馈 2s 复位（archive 同款）。 */
     const copiedTimerRef = useRef(null);
-    const loadFirst = useCallback(() => {
+    /** 首屏 / 重试共用：列表与总数统计并发拉取，两者都落定才揭开内容（整页 loading 防闪动，2026-09-01）。 */
+    const reload = useCallback(() => {
         const seq = ++refreshSeqRef.current;
         setLoading(true);
+        setSummaryPending(true);
+        setSummary(null);
         setError(null);
         listFiles()
             .then(page => {
@@ -43,7 +48,18 @@ export function FileManageDock({ wide, listFiles, deleteFile, countFiles, t }) {
             if (seq === refreshSeqRef.current)
                 setLoading(false);
         });
-    }, [listFiles]);
+        // 总数统计为 best-effort：接口失败只隐藏统计行，不影响列表；同样受刷新代际约束。
+        void countFiles()
+            .then(next => {
+            if (seq === refreshSeqRef.current)
+                setSummary(next);
+        })
+            .catch(() => { })
+            .finally(() => {
+            if (seq === refreshSeqRef.current)
+                setSummaryPending(false);
+        });
+    }, [listFiles, countFiles]);
     // 官方弹窗行为：打开时聚焦关闭按钮，Esc 关闭。
     useEffect(() => {
         if (!open)
@@ -61,16 +77,11 @@ export function FileManageDock({ wide, listFiles, deleteFile, countFiles, t }) {
             return;
         setConfirming(null);
         setSummary(null);
-        loadFirst();
-        // 总数统计为 best-effort：接口失败只隐藏统计行，不影响列表；同样受刷新代际约束。
-        const seq = refreshSeqRef.current;
-        void countFiles()
-            .then(next => {
-            if (seq === refreshSeqRef.current)
-                setSummary(next);
-        })
-            .catch(() => { });
-    }, [open, loadFirst, countFiles]);
+        setRows([]);
+        setHasMore(false);
+        setLastId(undefined);
+        reload();
+    }, [open, reload]);
     useEffect(() => () => {
         if (copiedTimerRef.current !== null)
             window.clearTimeout(copiedTimerRef.current);
@@ -101,6 +112,8 @@ export function FileManageDock({ wide, listFiles, deleteFile, countFiles, t }) {
             setError(t('copyFailed'));
         }
     }, [t]);
+    /** 首屏 ready 门：列表 + 总数都落定前展示整页 loading（2026-09-01）。 */
+    const initialLoading = loading || summaryPending;
     const quotaRatio = summary === null ? 0 : storageUsageRatio(summary.totalBytes, summary.quotaBytes);
     const submitDelete = useCallback(() => {
         if (confirming === null || busyDelete)
@@ -126,7 +139,7 @@ export function FileManageDock({ wide, listFiles, deleteFile, countFiles, t }) {
                                             ? _jsx("div", { className: "dsh-file-manage-quota-fill", style: { width: `${Math.round(quotaRatio * 100)}%` } })
                                             : null] }), _jsx("p", { className: "dsh-file-manage-count", children: rows.length < summary.count
                                         ? t('summary.loaded', { loaded: rows.length, count: summary.count })
-                                        : t('summary.count', { count: summary.count }) })] })) : null, _jsxs("div", { style: { ...styles.body, padding: summary !== null ? '0 24px 24px' : '12px 24px 24px' }, className: "dsh-file-manage-body", children: [error !== null ? (_jsxs("p", { role: "alert", style: { ...styles.secondarySmall, margin: '0 0 12px', color: 'var(--dsw-alias-state-error-primary, #c62828)' }, children: [error, ' ', _jsx("button", { type: "button", className: "dsh-file-manage-btn", onClick: loadFirst, children: t('retry') })] })) : null, loading ? _jsx("p", { style: styles.secondarySmall, children: t('loading') }) : null, !loading && error === null && rows.length === 0 ? _jsx("p", { style: styles.secondarySmall, children: t('empty') }) : null, rows.length > 0 ? (_jsx("div", { className: "dsh-file-manage-card", children: rows.map(row => (_jsxs("div", { style: styles.row, children: [_jsxs("div", { style: { minWidth: 0 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }, children: [_jsx("span", { style: styles.title, title: row.filename, children: row.filename }), row.dshOwned ? _jsx("span", { className: "dsh-file-manage-badge", children: t('dshBadge') }) : null] }), _jsxs("div", { style: styles.secondarySmall, children: [row.sizeLabel, " \u00B7 ", row.createdAtLabel, row.expiresAtLabel !== undefined ? ` · ${t('expires', { time: row.expiresAtLabel })}` : ''] })] }), _jsxs("div", { style: styles.actions, children: [_jsx("button", { type: "button", className: "dsh-file-manage-btn", onClick: () => { void copyId(row); }, children: copied === row.id ? t('copied') : t('copy') }), _jsx("button", { type: "button", className: "dsh-file-manage-btn dsh-file-manage-btn-danger", onClick: () => { setConfirming(row); }, children: t('delete') })] })] }, row.id))) })) : null] }), hasMore && !loading ? (_jsx("div", { style: styles.footerBar, children: _jsx("button", { type: "button", className: "dsh-file-manage-btn", disabled: loadingMore, onClick: () => { void loadMore(); }, children: loadingMore ? t('loading') : t('loadMore') }) })) : null] }) })) : null, confirming !== null ? (_jsx("div", { className: "dsh-file-manage-confirm-overlay", role: "presentation", onMouseDown: (event) => {
+                                        : t('summary.count', { count: summary.count }) })] })) : null, _jsx("div", { style: { ...styles.body, padding: summary !== null ? '0 24px 24px' : '12px 24px 24px' }, className: "dsh-file-manage-body", children: initialLoading ? (_jsxs("div", { className: "dsh-file-manage-loading", role: "status", children: [_jsx("span", { className: "dsh-file-manage-spinner", "aria-hidden": true }), _jsx("span", { children: t('loading') })] })) : (_jsxs(_Fragment, { children: [error !== null ? (_jsxs("p", { role: "alert", style: { ...styles.secondarySmall, margin: '0 0 12px', color: 'var(--dsw-alias-state-error-primary, #c62828)' }, children: [error, ' ', _jsx("button", { type: "button", className: "dsh-file-manage-btn", onClick: () => { reload(); }, children: t('retry') })] })) : null, error === null && rows.length === 0 ? _jsx("p", { style: styles.secondarySmall, children: t('empty') }) : null, rows.length > 0 ? (_jsx("div", { className: "dsh-file-manage-card", children: rows.map(row => (_jsxs("div", { style: styles.row, children: [_jsxs("div", { style: { minWidth: 0 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }, children: [_jsx("span", { style: styles.title, title: row.filename, children: row.filename }), row.dshOwned ? _jsx("span", { className: "dsh-file-manage-badge", children: t('dshBadge') }) : null] }), _jsxs("div", { style: styles.secondarySmall, children: [row.sizeLabel, " \u00B7 ", row.createdAtLabel, row.expiresAtLabel !== undefined ? ` · ${t('expires', { time: row.expiresAtLabel })}` : ''] })] }), _jsxs("div", { style: styles.actions, children: [_jsx("button", { type: "button", className: "dsh-file-manage-btn", onClick: () => { void copyId(row); }, children: copied === row.id ? t('copied') : t('copy') }), _jsx("button", { type: "button", className: "dsh-file-manage-btn dsh-file-manage-btn-danger", onClick: () => { setConfirming(row); }, children: t('delete') })] })] }, row.id))) })) : null] })) }), hasMore && !initialLoading ? (_jsx("div", { style: styles.footerBar, children: _jsx("button", { type: "button", className: "dsh-file-manage-btn", disabled: loadingMore, onClick: () => { void loadMore(); }, children: loadingMore ? t('loading') : t('loadMore') }) })) : null] }) })) : null, confirming !== null ? (_jsx("div", { className: "dsh-file-manage-confirm-overlay", role: "presentation", onMouseDown: (event) => {
                     if (event.target === event.currentTarget && !busyDelete)
                         setConfirming(null);
                 }, children: _jsxs("div", { className: "dsh-file-manage-confirm-card", role: "alertdialog", "aria-modal": "true", "aria-label": t('delete'), onKeyDown: (event) => {

package/lib/client/styles.js

@@ -54,6 +54,31 @@ export function ensureFileManageStyles() {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* 整页 loading：首屏数据（列表 + 总数）落定前占满内容区，避免「打开后加载闪动」（2026-09-01）。 */
+.dsh-file-manage-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-height: 240px;
+  color: var(--dsw-alias-label-secondary, #6b7280);
+  font-size: 14px;
+  line-height: 22px;
+}
+.dsh-file-manage-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--dsw-alias-border-l1, #d4d8e0);
+  border-top-color: var(--dsw-alias-button-info-fill, #4d6bfe);
+  border-radius: 50%;
+  animation: dsh-file-manage-spin 0.8s linear infinite;
+}
+@keyframes dsh-file-manage-spin {
+  to { transform: rotate(360deg); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .dsh-file-manage-spinner { animation: none; }
+}
 /* 面板滚动区：官方 settings 同款——elevated surface 重绑 l2 滚动条 token（base 默认 l1，浮层上对比度不对）。 */
 .dsh-file-manage-body {
   --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);

package/lib/client.js

@@ -151,6 +151,31 @@ function ensureFileManageStyles() {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* \u6574\u9875 loading\uFF1A\u9996\u5C4F\u6570\u636E\uFF08\u5217\u8868 + \u603B\u6570\uFF09\u843D\u5B9A\u524D\u5360\u6EE1\u5185\u5BB9\u533A\uFF0C\u907F\u514D\u300C\u6253\u5F00\u540E\u52A0\u8F7D\u95EA\u52A8\u300D\uFF082026-09-01\uFF09\u3002 */
+.dsh-file-manage-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-height: 240px;
+  color: var(--dsw-alias-label-secondary, #6b7280);
+  font-size: 14px;
+  line-height: 22px;
+}
+.dsh-file-manage-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--dsw-alias-border-l1, #d4d8e0);
+  border-top-color: var(--dsw-alias-button-info-fill, #4d6bfe);
+  border-radius: 50%;
+  animation: dsh-file-manage-spin 0.8s linear infinite;
+}
+@keyframes dsh-file-manage-spin {
+  to { transform: rotate(360deg); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .dsh-file-manage-spinner { animation: none; }
+}
 /* \u9762\u677F\u6EDA\u52A8\u533A\uFF1A\u5B98\u65B9 settings \u540C\u6B3E\u2014\u2014elevated surface \u91CD\u7ED1 l2 \u6EDA\u52A8\u6761 token\uFF08base \u9ED8\u8BA4 l1\uFF0C\u6D6E\u5C42\u4E0A\u5BF9\u6BD4\u5EA6\u4E0D\u5BF9\uFF09\u3002 */
 .dsh-file-manage-body {
   --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
@@ -405,12 +430,15 @@ function FileManageDock({ wide, listFiles, deleteFile, countFiles, t }) {
   const [busyDelete, setBusyDelete] = (0, import_react.useState)(false);
   const [copied, setCopied] = (0, import_react.useState)(null);
   const [summary, setSummary] = (0, import_react.useState)(null);
+  const [summaryPending, setSummaryPending] = (0, import_react.useState)(false);
   const closeButtonRef = (0, import_react.useRef)(null);
   const refreshSeqRef = (0, import_react.useRef)(0);
   const copiedTimerRef = (0, import_react.useRef)(null);
-  const loadFirst = (0, import_react.useCallback)(() => {
+  const reload = (0, import_react.useCallback)(() => {
     const seq = ++refreshSeqRef.current;
     setLoading(true);
+    setSummaryPending(true);
+    setSummary(null);
     setError(null);
     listFiles().then((page) => {
       if (seq !== refreshSeqRef.current) return;
@@ -423,7 +451,13 @@ function FileManageDock({ wide, listFiles, deleteFile, countFiles, t }) {
     }).finally(() => {
       if (seq === refreshSeqRef.current) setLoading(false);
     });
-  }, [listFiles]);
+    void countFiles().then((next) => {
+      if (seq === refreshSeqRef.current) setSummary(next);
+    }).catch(() => {
+    }).finally(() => {
+      if (seq === refreshSeqRef.current) setSummaryPending(false);
+    });
+  }, [listFiles, countFiles]);
   (0, import_react.useEffect)(() => {
     if (!open) return;
     closeButtonRef.current?.focus();
@@ -439,13 +473,11 @@ function FileManageDock({ wide, listFiles, deleteFile, countFiles, t }) {
     if (!open) return;
     setConfirming(null);
     setSummary(null);
-    loadFirst();
-    const seq = refreshSeqRef.current;
-    void countFiles().then((next) => {
-      if (seq === refreshSeqRef.current) setSummary(next);
-    }).catch(() => {
-    });
-  }, [open, loadFirst, countFiles]);
+    setRows([]);
+    setHasMore(false);
+    setLastId(void 0);
+    reload();
+  }, [open, reload]);
   (0, import_react.useEffect)(() => () => {
     if (copiedTimerRef.current !== null) window.clearTimeout(copiedTimerRef.current);
   }, []);
@@ -475,6 +507,7 @@ function FileManageDock({ wide, listFiles, deleteFile, countFiles, t }) {
       setError(t("copyFailed"));
     }
   }, [t]);
+  const initialLoading = loading || summaryPending;
   const quotaRatio = summary === null ? 0 : storageUsageRatio(summary.totalBytes, summary.quotaBytes);
   const submitDelete = (0, import_react.useCallback)(() => {
     if (confirming === null || busyDelete) return;
@@ -525,14 +558,18 @@ function FileManageDock({ wide, listFiles, deleteFile, countFiles, t }) {
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dsh-file-manage-count", children: rows.length < summary.count ? t("summary.loaded", { loaded: rows.length, count: summary.count }) : t("summary.count", { count: summary.count }) })
       ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { ...styles.body, padding: summary !== null ? "0 24px 24px" : "12px 24px 24px" }, className: "dsh-file-manage-body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...styles.body, padding: summary !== null ? "0 24px 24px" : "12px 24px 24px" }, className: "dsh-file-manage-body", children: initialLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsh-file-manage-loading", role: "status", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsh-file-manage-spinner", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: t("loading") })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
         error !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { role: "alert", style: { ...styles.secondarySmall, margin: "0 0 12px", color: "var(--dsw-alias-state-error-primary, #c62828)" }, children: [
           error,
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "dsh-file-manage-btn", onClick: loadFirst, children: t("retry") })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "dsh-file-manage-btn", onClick: () => {
+            reload();
+          }, children: t("retry") })
         ] }) : null,
-        loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: styles.secondarySmall, children: t("loading") }) : null,
-        !loading && error === null && rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: styles.secondarySmall, children: t("empty") }) : null,
+        error === null && rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: styles.secondarySmall, children: t("empty") }) : null,
         rows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsh-file-manage-card", children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.row, children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { minWidth: 0 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6, minWidth: 0 }, children: [
@@ -571,8 +608,8 @@ function FileManageDock({ wide, listFiles, deleteFile, countFiles, t }) {
             )
           ] })
         ] }, row.id)) }) : null
-      ] }),
-      hasMore && !loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.footerBar, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ] }) }),
+      hasMore && !initialLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.footerBar, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "button",
         {
           type: "button",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dsh-sparrow/dsh-file-manage",
   "description": "DSH web plugin: manage DeepSeek Files API cloud files from the sidebar — list with cursor pagination, delete, and copy file_id (reuses the official DeepSeekFilesClient, no extra credentials)",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.2",
   "license": "MIT",
   "repository": {
     "type": "git",