From d548d3ab04b84f64949463e8d95e5dc26ab6e64a Mon Sep 17 00:00:00 2001
From: abearxiong <xiongxiao1012@outlook.com>
Date: Sun, 2 Mar 2025 01:54:03 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=88=B7=E6=96=B0=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/module/html/create-refresh-html.ts | 191 ++++++++++++++++++++++---
 1 file changed, 174 insertions(+), 17 deletions(-)
diff --git a/src/module/html/create-refresh-html.ts b/src/module/html/create-refresh-html.ts
index f6c4737..bd927c4 100644
--- a/src/module/html/create-refresh-html.ts
+++ b/src/module/html/create-refresh-html.ts
@@ -1,24 +1,173 @@
 /**
  * 创建一个刷新页面，定时
  * fetch('/api/proxy/refresh?user=user&app=app'), 如果返回200，则刷新页面
- * @param user
- * @param app
- * @returns
+ * @param {string} user - 用户名
+ * @param {string} app - 应用名
+ * @returns {string} - HTML字符串
  */
-export const createRefreshHtml = (user: string, app: string) => {
+export const createRefreshHtml = (user, app) => {
   return `
     <!doctype html>
-    <html lang="zh-CN" >
+    <html lang="zh-CN">
       <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>App: ${user}/${app}</title>
+        <style>
+          :root {
+            --primary-color: #4f46e5;
+            --primary-hover: #4338ca;
+            --text-color: #1f2937;
+            --bg-color: #f9fafb;
+            --card-bg: #ffffff;
+            --border-color: #e5e7eb;
+          }
+          
+          body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            line-height: 1.6;
+          }
+          
+          .container {
+            max-width: 500px;
+            width: 90%;
+            background-color: var(--card-bg);
+            border-radius: 12px;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            padding: 2rem;
+            text-align: center;
+          }
+          
+          .app-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: var(--primary-color);
+            margin-bottom: 1.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+          }
+          
+          .app-icon {
+            font-size: 1.8rem;
+          }
+          
+          .status-card {
+            background-color: #f3f4f6;
+            border-radius: 8px;
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+          }
+          
+          .loading-text {
+            font-size: 1.1rem;
+            margin-bottom: 0.5rem;
+          }
+          
+          .loading-spinner {
+            display: inline-block;
+            width: 50px;
+            height: 50px;
+            border: 3px solid rgba(79, 70, 229, 0.3);
+            border-radius: 50%;
+            border-top-color: var(--primary-color);
+            animation: spin 1s ease-in-out infinite;
+            margin: 1rem 0;
+          }
+          
+          @keyframes spin {
+            to { transform: rotate(360deg); }
+          }
+          
+          .refresh-link {
+            display: inline-block;
+            background-color: var(--primary-color);
+            color: white;
+            padding: 0.6rem 1.2rem;
+            border-radius: 6px;
+            text-decoration: none;
+            font-weight: 500;
+            transition: background-color 0.2s;
+            margin-top: 1rem;
+            cursor: pointer;
+          }
+          
+          .refresh-link:hover {
+            background-color: var(--primary-hover);
+          }
+          
+          .counter {
+            font-size: 0.9rem;
+            color: #6b7280;
+            margin-top: 1.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+          }
+          
+          .count-number {
+            font-weight: 600;
+            color: var(--primary-color);
+          }
+          
+          .footer {
+            margin-top: 2rem;
+            font-size: 0.85rem;
+            color: #6b7280;
+          }
+          
+          /* Dark mode support */
+          @media (prefers-color-scheme: dark) {
+            :root {
+              --primary-color: #6366f1;
+              --primary-hover: #818cf8;
+              --text-color: #f9fafb;
+              --bg-color: #111827;
+              --card-bg: #1f2937;
+              --border-color: #374151;
+            }
+            
+            .status-card {
+              background-color: #374151;
+            }
+          }
+        </style>
       </head>
       <body>
-        <h1>App: ${user}/${app}</h1>
-        <p>Loading...</p>
-        <p>如果长时间没有加载出来，请手动 <a href="javascript:void(0)" onclick="window.location.reload()">刷新页面</a></p>
-        <p>loadCount: <span id="loadCount">0</span></p>
+        <div class="container">
+          <h1 class="app-title">
+            <span class="app-icon">📱</span>
+            ${user}/${app}
+          </h1>
+          
+          <div class="status-card">
+            <p class="loading-text">正在加载应用...</p>
+            <div class="loading-spinner"></div>
+            <p>应用正在启动中，请稍候</p>
+          </div>
+          
+          <p>如果长时间没有加载出来，请手动 <a class="refresh-link" href="javascript:void(0)" onclick="window.location.reload()">刷新页面</a></p>
+          
+          <div class="counter">
+            <span>检查次数:</span>
+            <span id="loadCount" class="count-number">0</span>
+          </div>
+          
+          <div class="footer">
+            © ${new Date().getFullYear()} ${user}/${app} - 自动刷新页面
+          </div>
+        </div>
+        
         <script type="module">
           let count = 0;
           const refresh = () => {
@@ -26,17 +175,25 @@ export const createRefreshHtml = (user: string, app: string) => {
             const loadCount = document.getElementById('loadCount');
             count++;
             loadCount.innerHTML = count.toString();
-            fetch(origin + '/api/proxy?user=${user}&app=${app}&path=app&key=status').then((res) => {
-              if (res.status === 200) {
-                window.location.reload();
-              } else {
-                setTimeout(refresh, 3000);
-              }
-            });
+            
+            fetch(origin + '/api/proxy?user=${user}&app=${app}&path=app&key=status')
+              .then((res) => {
+                if (res.status === 200) {
+                  window.location.reload();
+                } else {
+                  setTimeout(refresh, 3000);
+                }
+              })
+              .catch((error) => {
+                console.error('Error checking app status:', error);
+                setTimeout(refresh, 5000); // Longer timeout on error
+              });
           };
+          
+          // Start checking after a short delay
           setTimeout(refresh, 2000);
         </script>
       </body>
     </html>
   `;
-};
+};
\ No newline at end of file
