feat: 更新 README，添加容器权限修复说明；优化前端样式，添加 API 复制功能

Author: CharyeahOwO

README.md

@@ -66,6 +66,9 @@ services:
 docker compose up -d
 ```
 
+> 容器启动时会自动修复 `./images` 目录权限，无需手动 chown。
+> 如果是从旧版本升级，首次启动可能需要几秒完成权限修复。
+
 访问 `http://localhost:3400/image`，后台 `http://localhost:3400/image/admin`。
 
 </details>

public/assets/style.css

@@ -378,6 +378,50 @@ tr:last-child td {
   border-bottom: 0;
 }
 
+td .api-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 320px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  margin: 0;
+  padding: 4px 8px;
+  font-size: 0.82rem;
+  border-radius: 5px;
+}
+
+td .api-link span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+td .copy-btn {
+  flex-shrink: 0;
+  min-height: 26px;
+  padding: 0 8px;
+  font-size: 0.76rem;
+  font-weight: 700;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--primary);
+  background: var(--primary-soft);
+  border: 1px solid transparent;
+}
+
+td .copy-btn:hover {
+  background: var(--primary);
+  color: #fff;
+}
+
+td .copy-btn.copied {
+  color: var(--success);
+  background: var(--teal-soft);
+  pointer-events: none;
+}
+
 code {
   display: block;
   width: 100%;

src/routes/publicRoutes.js

@@ -18,17 +18,22 @@ function parseLimit(value) {
 
 function galleryRows(galleries) {
   if (galleries.length === 0) {
-    return '<tr><td colspan="4">暂无图库，请在后台创建图库或手动放入图片目录。</td></tr>';
+    return '<tr><td colspan="5">暂无图库，请在后台创建图库或手动放入图片目录。</td></tr>';
   }
   return galleries
     .map(
       (gallery) => {
         const displayName = gallery.label || gallery.name;
+        const nameCell = gallery.label
+          ? `${escapeHtml(displayName)}<br><span class="muted">${escapeHtml(gallery.name)}</span>`
+          : escapeHtml(displayName);
+        const apiUrl = `/image/api/random?gallery=${encodeURIComponent(gallery.name)}`;
         return `<tr>
-          <td>${escapeHtml(displayName)}</td>
+          <td>${nameCell}</td>
           <td>${gallery.total}</td>
           <td>${gallery.pc}</td>
           <td>${gallery.mobile}</td>
+          <td><code class="api-link"><span>${escapeHtml(apiUrl)}</span> <button type="button" class="copy-btn" data-copy="${escapeHtml(apiUrl)}" title="复制">复制</button></code></td>
         </tr>`;
       }
     )

views/index.html

@@ -58,6 +58,7 @@ <h2>图库统计</h2>
                   <th>总数</th>
                   <th>PC</th>
                   <th>Mobile</th>
+                  <th>API</th>
                 </tr>
               </thead>
               <tbody>{{galleryRows}}</tbody>
@@ -78,5 +79,17 @@ <h2>API 调用示例</h2>
         </article>
       </section>
     </main>
+    <script>
+      document.addEventListener('click', async (e) => {
+        const btn = e.target.closest('.copy-btn');
+        if (!btn) return;
+        try {
+          await navigator.clipboard.writeText(btn.dataset.copy);
+          btn.textContent = '已复制';
+          btn.classList.add('copied');
+          setTimeout(() => { btn.textContent = '复制'; btn.classList.remove('copied'); }, 1500);
+        } catch { btn.textContent = '失败'; }
+      });
+    </script>
   </body>
 </html>