fix:图渲染异常

Layau-code · Layau-code · commit e5b4f3eeff58 · 2025-12-28T02:19:45.000+08:00
diff --git a/deploy.sh b/deploy.sh
@@ -376,13 +376,17 @@ server {
     access_log /var/log/nginx/tinyflow_access.log;
     error_log /var/log/nginx/tinyflow_error.log;
 
-    # 前端路由
-    location / {
-        try_files \$uri \$uri/ /index.html;
+    # 重要：短链接跳转（必须放在前端路由之前，使用正则匹配）
+    location ~ ^/[a-zA-Z0-9]{4,8}\$ {
+        proxy_pass http://localhost:8080;
+        proxy_set_header Host \$host;
+        proxy_set_header X-Real-IP \$remote_addr;
+        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto \$scheme;
     }
 
-    # 后端 API 代理
-    location /api {
+    # 后端 API 代理（使用 ^~ 提高优先级）
+    location ^~ /api {
         proxy_pass http://localhost:8080;
         proxy_set_header Host \$host;
         proxy_set_header X-Real-IP \$remote_addr;
@@ -394,20 +398,24 @@ server {
         proxy_read_timeout 60s;
     }
 
-    # 短链接跳转
-    location ~ ^/[a-zA-Z0-9]{4,8}\$ {
-        proxy_pass http://localhost:8080;
-        proxy_set_header Host \$host;
-        proxy_set_header X-Real-IP \$remote_addr;
-    }
-
-    # 健康检查
-    location /actuator {
+    # 健康检查（使用 ^~ 提高优先级）
+    location ^~ /actuator {
         proxy_pass http://localhost:8080;
         allow 127.0.0.1;
         deny all;
     }
 
+    # 静态资源缓存
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)\$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # 前端路由（放在最后）
+    location / {
+        try_files \$uri \$uri/ /index.html;
+    }
+
     # Gzip 压缩
     gzip on;
     gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -55,6 +55,7 @@ services:
       - SPRING_RABBITMQ_USERNAME=guest
       - SPRING_RABBITMQ_PASSWORD=guest
       - SERVER_PORT=8080
+      - APP_DOMAIN=http://localhost:8080
     ports:
       - "8080:8080"
     restart: unless-stopped
diff --git a/web/index.html b/web/index.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/logo.png" />
+    <link rel="icon" type="image/svg+xml" href="/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>TinyFlow</title>
+    <title>TinyFlow - 短链接服务</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/web/src/pages/DashboardPage.vue b/web/src/pages/DashboardPage.vue
@@ -129,7 +129,9 @@
                   <td>
                     <div class="flex gap-2">
                       <router-link :to="'/stats/' + url.shortCode" class="action-link">详情</router-link>
-                      <button @click="copyUrl(url.shortCode)" class="action-link">复制</button>
+                      <button @click="copyUrl(url.shortCode)" class="action-link">
+                        {{ copyingCode === url.shortCode ? '已复制' : '复制' }}
+                      </button>
                     </div>
                   </td>
                 </tr>
@@ -182,7 +184,9 @@
                   <td>
                     <div class="flex gap-2">
                       <router-link :to="'/stats/' + url.shortCode" class="action-link">详情</router-link>
-                      <button @click="copyUrl(url.shortCode)" class="action-link">复制</button>
+                      <button @click="copyUrl(url.shortCode)" class="action-link">
+                        {{ copyingCode === url.shortCode ? '已复制' : '复制' }}
+                      </button>
                       <button @click="deleteUrl(url.shortCode)" class="action-link text-red-500">删除</button>
                     </div>
                   </td>
@@ -282,13 +286,22 @@ function getSharePercent(url) {
   return totalClicks.value > 0 ? (Number(url.totalVisits || 0) / totalClicks.value * 100) : 0
 }
 
+// 复制状态
+const copyingCode = ref(null)
+
 async function copyUrl(shortCode) {
   const url = `${SHORT_BASE}/${shortCode}`
   try {
+    copyingCode.value = shortCode
     await copyToClipboard(url)
-    // 可以添加提示，但需要状态管理
+    // 显示复制成功提示
+    setTimeout(() => {
+      copyingCode.value = null
+    }, 2000)
   } catch (e) {
     console.error('复制失败:', e)
+    alert('复制失败，请手动复制')
+    copyingCode.value = null
   }
 }
 
