feat: 更新 API 调用示例，优化复制链接功能；添加 API 路径说明和样式

Author: CharyeahOwO

public/assets/home.js

@@ -18,7 +18,10 @@ function copyText(text, btn) {
 document.addEventListener('click', function(e) {
   var btn = e.target.closest('.copy-btn');
   if (!btn) return;
-  copyText(btn.getAttribute('data-copy'), btn);
+  var text = btn.getAttribute('data-copy');
+  var path = btn.getAttribute('data-copy-path');
+  if (!text && path) text = window.location.origin + path;
+  copyText(text, btn);
 });
 
 var modal = document.getElementById('apiModal');

public/assets/style.css

@@ -534,6 +534,15 @@ code {
   display: grid;
 }
 
+.api-card .api-row {
+  grid-template-columns: 86px minmax(0, 1fr) auto;
+}
+
+.api-card .muted {
+  margin-bottom: 12px;
+  line-height: 1.6;
+}
+
 .admin-page {
   background: var(--bg);
 }

src/imageStore.js

@@ -136,7 +136,6 @@ export class ImageStore {
           const dimensions = await getImageDimensions(absolutePath);
 
           const image = {
-            url: `${config.publicBaseUrl}${publicImagePath(gallery, device, file.name)}`,
             path: publicImagePath(gallery, device, file.name),
             gallery,
             device,
@@ -288,10 +287,10 @@ export class ImageStore {
   }
 }
 
-export function publicImageJson(image, total) {
+export function publicImageJson(image, total, baseUrl) {
   if (!image) return null;
   return {
-    url: image.url,
+    url: `${baseUrl || config.publicBaseUrl}${image.path}`,
     gallery: image.gallery,
     device: image.device,
     filename: image.filename,

src/imageStore.test.js

@@ -64,7 +64,7 @@ describe('publicImageJson', () => {
 
   it('should format image correctly', () => {
     const image = {
-      url: 'http://localhost:3000/image/images/anime/pc/001.jpg',
+      path: '/image/images/anime/pc/001.jpg',
       gallery: 'anime',
       device: 'pc',
       filename: '001.jpg',
@@ -73,9 +73,9 @@ describe('publicImageJson', () => {
       height: 1080,
       type: 'jpg'
     };
-    const result = publicImageJson(image, 10);
-    expect(result.url).toBe(image.url);
+    const result = publicImageJson(image, 10, 'https://img.example.com');
+    expect(result.url).toBe('https://img.example.com/image/images/anime/pc/001.jpg');
     expect(result.gallery).toBe('anime');
     expect(result.total).toBe(10);
   });
-});
+});

src/routes/publicRoutes.js

@@ -16,6 +16,14 @@ function parseLimit(value) {
   return Math.min(parsed, 100);
 }
 
+function requestBaseUrl(req) {
+  const forwardedHost = req.get('x-forwarded-host');
+  const host = forwardedHost ? forwardedHost.split(',')[0].trim() : req.get('host');
+  const forwardedProto = req.get('x-forwarded-proto');
+  const protocol = forwardedProto ? forwardedProto.split(',')[0].trim() : req.protocol;
+  return host ? `${protocol}://${host}` : config.publicBaseUrl;
+}
+
 function galleryRows(galleries) {
   if (galleries.length === 0) {
     return '<tr><td colspan="5">暂无图库，请在后台创建图库或手动放入图片目录。</td></tr>';
@@ -101,7 +109,7 @@ export function createPublicRouter(store) {
     }
 
     if (type === 'json') {
-      return res.json(publicImageJson(image, total));
+      return res.json(publicImageJson(image, total, requestBaseUrl(req)));
     }
     if (type === 'redirect') {
       res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
@@ -142,7 +150,7 @@ export function createPublicRouter(store) {
       res.json({
         total: images.length,
         limit,
-        images: images.map((image) => publicImageJson(image, undefined)).map(({ total, ...rest }) => rest)
+        images: images.map((image) => publicImageJson(image, undefined, requestBaseUrl(req))).map(({ total, ...rest }) => rest)
       });
     } catch (error) {
       next(error);

views/index.html

@@ -68,13 +68,38 @@ <h2>图库统计</h2>
 
         <article class="panel api-card">
           <h2>API 调用示例</h2>
+          <p class="muted">以下为不指定图库的全局随机接口；指定图库的调用方式可在左侧图库统计中点击“查看 API”。</p>
           <div class="code-list">
-            <code>/image/api/random</code>
-            <code>/image/api/random?gallery=luotianyi</code>
-            <code>/image/api/random?gallery=luotianyi&amp;device=pc</code>
-            <code>/image/api/random?gallery=luotianyi&amp;device=mobile</code>
-            <code>/image/api/random?gallery=luotianyi&amp;device=pc&amp;type=json</code>
-            <code>/image/api/random?gallery=luotianyi&amp;device=mobile&amp;type=redirect</code>
+            <div class="api-row">
+              <span class="api-label">全局随机</span>
+              <code class="api-url">/image/api/random</code>
+              <button type="button" class="copy-btn" data-copy-path="/image/api/random">复制</button>
+            </div>
+            <div class="api-row">
+              <span class="api-label">电脑随机</span>
+              <code class="api-url">/image/api/random?device=pc</code>
+              <button type="button" class="copy-btn" data-copy-path="/image/api/random?device=pc">复制</button>
+            </div>
+            <div class="api-row">
+              <span class="api-label">手机随机</span>
+              <code class="api-url">/image/api/random?device=mobile</code>
+              <button type="button" class="copy-btn" data-copy-path="/image/api/random?device=mobile">复制</button>
+            </div>
+            <div class="api-row">
+              <span class="api-label">JSON 数据</span>
+              <code class="api-url">/image/api/random?type=json</code>
+              <button type="button" class="copy-btn" data-copy-path="/image/api/random?type=json">复制</button>
+            </div>
+            <div class="api-row">
+              <span class="api-label">图片本体</span>
+              <code class="api-url">/image/api/random?type=image</code>
+              <button type="button" class="copy-btn" data-copy-path="/image/api/random?type=image">复制</button>
+            </div>
+            <div class="api-row">
+              <span class="api-label">显式跳转</span>
+              <code class="api-url">/image/api/random?type=redirect</code>
+              <button type="button" class="copy-btn" data-copy-path="/image/api/random?type=redirect">复制</button>
+            </div>
           </div>
         </article>
       </section>