Polish UI and docs for production readiness.

Make detail panel on-demand (toggle row, close button, Esc), add site favicons, and refresh README for public GHCR image plus optional panel password.

Author: FX

README.md

@@ -4,15 +4,38 @@
 
 ## 功能
 
-- GitHub 公开仓库：正式版 + 预发布；按扩展名 / 系统 / 架构别名 / 包含排除筛选附件
-- 单篇文章：标题变化则整页重抓，提取百度 / 阿里 / 夸克 / 123 / 天翼 / 蓝奏
-- 只保留当前最新状态
+- **GitHub 公开仓库**：正式版 + 预发布；按扩展名 / 系统 / 架构别名 / 包含·排除筛选附件
+- **单篇文章**：标题变化则整页重抓，提取百度 / 阿里 / 夸克 / 123 / 天翼 / 蓝奏（链接、提取码、标题备注）
+- 只保留当前最新状态（有变化才推送；首次检查不刷屏）
 - 固定间隔检查（默认 6 小时，可在设置里改）+ 立即检查
 - 可停用不删除
-- Docker 一键部署，无登录
+- 可选面板访问密码
+- 详情按需展开（点击列表行查看，再点同一行或 × / Esc 收起）
+- Docker 一键部署
 
 ## 上线部署（推荐）
 
+### 方式 A：拉取公开镜像（最快）
+
+镜像已公开，无需登录即可拉取：
+
+```bash
+mkdir -p data
+docker run -d --name appupdate \
+  -p 8000:8000 \
+  -v "$PWD/data:/data" \
+  --restart unless-stopped \
+  ghcr.io/fatelightx/appupdate:latest
+```
+
+或使用 compose，编辑 `docker-compose.yml`：注释 `build`，取消注释 `image`，然后：
+
+```bash
+docker compose up -d
+```
+
+### 方式 B：本地构建
+
 ```bash
 # 若使用 Colima（无 Docker Desktop 时）
 # brew install colima docker docker-compose && colima start
@@ -24,63 +47,46 @@ docker compose up -d --build
 
 首次打开为空列表。在网页中：
 
-1. **设置**：填写检查间隔、Telegram Bot Token / Chat ID（可选）、**面板访问密码（可选）**
+1. **设置**：检查间隔、Telegram Bot Token / Chat ID（可选）、**面板访问密码（可选）**
 2. **添加**：GitHub 仓库或文章链接，并配置筛选规则
-3. 添加后会自动检查；也可随时点 **立即检查**
+3. 添加后会自动检查；也可随时点 **立即检查** 或单项 **检查**
 
-数据持久化目录：`./data`（SQLite 文件 `appupdate.db`，首次运行自动创建）
+数据目录：`./data`（SQLite：`appupdate.db`，首次运行自动创建）
 
 停止：
 
 ```bash
 docker compose down
+# 或
+docker rm -f appupdate
 ```
 
 ## GitHub Actions 镜像
 
 推送到 `main` 或打 `v*` 标签后，会自动构建并推送多架构镜像到 GHCR：
 
-- `ghcr.io/fatelightx/appupdate:latest`（main）
-- `ghcr.io/fatelightx/appupdate:sha-<短提交>`
-- `ghcr.io/fatelightx/appupdate:1.0.0`（标签 `v1.0.0`）
-
-### 使用预构建镜像
-
-```bash
-# 私有仓库镜像需先登录（用有 read:packages 的 Token）
-echo YOUR_GITHUB_TOKEN | docker login ghcr.io -u FateLightX --password-stdin
-
-docker pull ghcr.io/fatelightx/appupdate:latest
-
-docker run -d --name appupdate \
-  -p 8000:8000 \
-  -v "$PWD/data:/data" \
-  --restart unless-stopped \
-  ghcr.io/fatelightx/appupdate:latest
-```
-
-或在 `docker-compose.yml` 中注释 `build`，启用：
-
-```yaml
-image: ghcr.io/fatelightx/appupdate:latest
-```
+| 标签 | 说明 |
+|------|------|
+| `ghcr.io/fatelightx/appupdate:latest` | `main` 最新 |
+| `ghcr.io/fatelightx/appupdate:main` | 同 main |
+| `ghcr.io/fatelightx/appupdate:sha-<短提交>` | 按提交 |
+| `ghcr.io/fatelightx/appupdate:1.0.0` | 标签 `v1.0.0` |
 
-工作流文件：`.github/workflows/docker.yml`  
+工作流：`.github/workflows/docker.yml`  
 也可在 GitHub → Actions → **Docker Image** → **Run workflow** 手动触发。
 
-若镜像拉不下来：到仓库 **Packages** 将 `appupdate` 包设为 Public，或保持 Private 并用 Token 登录。
-
+包页面：https://github.com/users/FateLightX/packages/container/package/appupdate
 
 ## 可选环境变量
 
 | 变量 | 说明 |
 |------|------|
-| `GITHUB_TOKEN` | 提高 GitHub API 限额（建议内网服务器配置） |
+| `GITHUB_TOKEN` | 提高 GitHub API 限额（建议服务器配置） |
 | `APPUPDATE_PANEL_PASSWORD` | 首次初始化时写入面板密码（库中已有密码时不覆盖；日常请在网页设置） |
 | `APPUPDATE_DATA_DIR` | 数据目录，默认 `/data`（容器内） |
 | `APPUPDATE_INTERVAL_HOURS` | 仅影响**首次初始化**时的默认间隔，之后以网页设置为准 |
 
-在 `docker-compose.yml` 中取消 `GITHUB_TOKEN` 注释即可注入。
+在 `docker-compose.yml` 中取消对应注释即可注入。
 
 ## 本地开发
 
@@ -97,5 +103,11 @@ uvicorn app.main:app --reload --host 0.0.0.0 --port 8000
 
 - 仅支持公开 GitHub 仓库
 - 不做自动下载、不自动转存网盘
-- 无登录（仅限内网）
-- 设计稿与交互原型在 `design-options/`、`prototype/`，上线部署不需要，已排除在 Docker 构建之外
+- 默认无密码；可在设置中开启面板密码
+- 设计稿与交互原型在 `design-options/`、`prototype/`，部署不需要，已排除在 Docker 构建之外
+
+## 界面要点
+
+- 列表展示名称、类型、结果摘要、状态与操作
+- 点击某一行展开详情（下载链接 / 网盘与提取码）；关闭后界面更干净
+- 设置可随时改检查间隔、Telegram、面板密码

app/main.py

@@ -62,9 +62,14 @@ def health():
     return {"ok": True}
 
 
+
 if WEB_DIR.exists():
     app.mount("/static", StaticFiles(directory=WEB_DIR), name="static")
 
     @app.get("/")
     def index():
         return FileResponse(WEB_DIR / "index.html")
+
+    @app.get("/favicon.ico")
+    def favicon():
+        return FileResponse(WEB_DIR / "favicon.ico")

web/app.js

@@ -218,23 +218,40 @@ function renderFilters() {
     .join("");
 }
 
-function metricBars(item) {
+function metricFacts(item) {
   if (item.type === "github") {
-    const n = (item.assets || []).length;
-    const w = Math.min(100, 20 + n * 20);
-    const warn = item.hasUpdate || item.status === "update";
+    const matched = (item.assets || []).length;
+    const unmatched = (item.unmatchedAssets || []).length;
+    const total = matched + unmatched;
+    const version = item.version || "尚未检查";
+    const matchText =
+      total > 0
+        ? `匹配 ${matched}${total !== matched ? ` / ${total}` : ""} 个文件`
+        : matched > 0
+          ? `匹配 ${matched} 个文件`
+          : item.lastCheck
+            ? "无匹配文件"
+            : "等待检查";
     return `
-      <div class="bars">
-        <div class="mini"><span>版本</span><div class="bar ${warn ? "warn" : ""}"><i style="width:${warn ? 100 : 70}%"></i></div></div>
-        <div class="mini"><span>匹配</span><div class="bar"><i style="width:${w}%"></i></div></div>
+      <div class="facts">
+        <div class="fact-main ${item.hasUpdate || item.status === "update" ? "warn" : ""}">${escapeHtml(version)}</div>
+        <div class="fact-sub">${escapeHtml(matchText)}</div>
       </div>`;
   }
-  const n = (item.netdisks || []).length;
-  const warn = item.hasUpdate || item.status === "update";
+  const disks = item.netdisks || [];
+  const providers = [...new Set(disks.map((d) => d.provider).filter(Boolean))];
+  const title = item.title || item.version || "尚未检查";
+  const short =
+    title.length > 28 ? `${title.slice(0, 28)}…` : title;
+  const diskText = disks.length
+    ? `${disks.length} 个网盘${providers.length ? " · " + providers.slice(0, 3).join("/") : ""}`
+    : item.lastCheck
+      ? "未发现网盘"
+      : "等待检查";
   return `
-    <div class="bars">
-      <div class="mini"><span>标题</span><div class="bar ${warn ? "warn" : ""}"><i style="width:${warn ? 100 : 80}%"></i></div></div>
-      <div class="mini"><span>网盘</span><div class="bar"><i style="width:${Math.min(100, n * 30 || 15)}%"></i></div></div>
+    <div class="facts">
+      <div class="fact-main ${item.hasUpdate || item.status === "update" ? "warn" : ""}" title="${escapeHtml(title)}">${escapeHtml(short)}</div>
+      <div class="fact-sub">${escapeHtml(diskText)}</div>
     </div>`;
 }
 
@@ -258,10 +275,10 @@ function renderList() {
         <div><span class="${dotClass(item)}"></span></div>
         <div>
           <div class="name">${escapeHtml(item.name)}</div>
-          <div class="sub">${escapeHtml(item.summary || item.url)}</div>
+          <div class="sub">${escapeHtml(formatTime(item.lastCheck))} · ${escapeHtml(item.url)}</div>
         </div>
         <div><span class="tag">${item.type === "github" ? "GitHub" : "文章"}</span></div>
-        <div>${metricBars(item)}</div>
+        <div>${metricFacts(item)}</div>
         <div class="${statusClass(item)}">${statusLabel(item)}</div>
         <div class="row-actions" data-stop>
           <button type="button" class="link-btn" data-act="check" data-id="${item.id}">检查</button>
@@ -377,7 +394,10 @@ function renderDetail() {
         <h3>${escapeHtml(item.name)}</h3>
         <div class="url">${escapeHtml(item.url)}</div>
       </div>
-      <button type="button" class="switch ${item.enabled ? "on" : ""}" data-act="toggle" data-id="${item.id}" aria-label="启用停用"></button>
+      <div class="detail-actions">
+        <button type="button" class="switch ${item.enabled ? "on" : ""}" data-act="toggle" data-id="${item.id}" aria-label="启用停用"></button>
+        <button type="button" class="icon-btn" data-act="close-detail" aria-label="关闭详情">×</button>
+      </div>
     </div>
     <div class="kv">
       <span>类型</span><div>${item.type === "github" ? "GitHub" : "文章"}</div>
@@ -404,9 +424,9 @@ async function loadAll() {
   state.sources = sources;
   state.settings = settings;
   state.meta = meta;
-  if (state.selectedId == null && sources[0]) state.selectedId = sources[0].id;
+  // 不自动展开详情：只有用户点选时才显示
   if (state.selectedId != null && !sources.find((s) => s.id === state.selectedId)) {
-    state.selectedId = sources[0]?.id ?? null;
+    state.selectedId = null;
   }
   renderAll();
   renderAddChips();
@@ -754,7 +774,9 @@ function bindEvents() {
     if (stop) return;
     const row = e.target.closest(".row[data-id]");
     if (!row) return;
-    state.selectedId = Number(row.dataset.id);
+    const id = Number(row.dataset.id);
+    // 再点同一行则收起详情
+    state.selectedId = state.selectedId === id ? null : id;
     renderAll();
   });
 
@@ -765,10 +787,16 @@ function bindEvents() {
       return;
     }
     const act = e.target.closest("[data-act]");
-    if (act && act.dataset.act === "toggle") {
+    if (!act) return;
+    if (act.dataset.act === "close-detail") {
+      state.selectedId = null;
+      renderAll();
+      return;
+    }
+    if (act.dataset.act === "toggle") {
       toggleEnabled(Number(act.dataset.id));
     }
-    if (act && act.dataset.act === "edit-detail") {
+    if (act.dataset.act === "edit-detail") {
       openEdit(Number(act.dataset.id));
     }
   });
@@ -778,6 +806,14 @@ function bindEvents() {
       if (e.target === mask) mask.classList.remove("show");
     });
   });
+
+  document.addEventListener("keydown", (e) => {
+    if (e.key !== "Escape") return;
+    if (document.querySelector(".modal-mask.show, .login-gate:not([hidden])")) return;
+    if (state.selectedId == null) return;
+    state.selectedId = null;
+    renderAll();
+  });
 }
 
 bindEvents();

web/apple-touch-icon.png

@@ -4,6 +4,10 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>更新追踪</title>
+  <link rel="icon" href="/favicon.ico" sizes="any" />
+  <link rel="icon" type="image/svg+xml" href="/static/favicon.svg" />
+  <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32.png" />
+  <link rel="apple-touch-icon" href="/static/apple-touch-icon.png" />
   <link rel="stylesheet" href="/static/styles.css" />
 </head>
 <body>
@@ -29,7 +33,7 @@
         <div></div>
         <div>名称</div>
         <div>类型</div>
-        <div>摘要</div>
+        <div>结果</div>
         <div>状态</div>
         <div>操作</div>
       </div>

web/favicon-32.png

@@ -123,14 +123,28 @@ button, input, select, textarea { font: inherit; }
 .link-btn:hover { text-decoration: underline; }
 .link-btn.danger { color: #b91c1c; }
 
-.bars { display: flex; flex-direction: column; gap: 4px; }
-.mini {
-  display: grid; grid-template-columns: 36px 1fr; gap: 6px; align-items: center;
-  font-size: 11px; color: var(--muted);
-}
-.bar { height: 5px; background: #f5f5f4; border-radius: 999px; overflow: hidden; }
-.bar > i { display: block; height: 100%; background: #22c55e; border-radius: 999px; }
-.bar.warn > i { background: #f59e0b; }
+.facts {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.fact-main {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fact-main.warn { color: var(--danger); }
+.fact-sub {
+  font-size: 12px;
+  color: var(--muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
 .detail {
   margin-top: 14px;
@@ -143,6 +157,23 @@ button, input, select, textarea { font: inherit; }
   display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
   margin-bottom: 12px;
 }
+.detail-actions {
+  display: flex; align-items: center; gap: 10px; flex: none;
+}
+.icon-btn {
+  width: 32px; height: 32px;
+  border: 1px solid var(--line);
+  background: #fff;
+  border-radius: 8px;
+  color: var(--muted);
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  padding: 0;
+}
+.icon-btn:hover { color: var(--text); background: #fafaf9; }
 .detail h3 { margin: 0 0 4px; font-size: 16px; }
 .detail .url { color: var(--muted); font-size: 12px; word-break: break-all; }
 .kv {
@@ -274,14 +305,14 @@ button, input, select, textarea { font: inherit; }
     grid-template-areas:
       "dot name status"
       "dot type type"
-      "dot bars bars"
+      "dot facts facts"
       "dot actions actions";
   }
   .row.head { display: none; }
   .row > :nth-child(1) { grid-area: dot; }
   .row > :nth-child(2) { grid-area: name; }
   .row > :nth-child(3) { grid-area: type; }
-  .row > :nth-child(4) { grid-area: bars; }
+  .row > :nth-child(4) { grid-area: facts; }
   .row > :nth-child(5) { grid-area: status; justify-self: end; }
   .row > :nth-child(6) { grid-area: actions; }
   .field-row { grid-template-columns: 1fr; }