feat: advanced front-end display

README.md

@@ -1,8 +1,8 @@
 # Sublink Worker
 
-Sublink Worker 是一个可部署在 Cloudflare Worker 上轻量级的订阅转换工具。它可以将各种代理协议的分享 URL 转换为不同客户端可用的订阅链接。同时还提供灵活的自定义规则与API支持。
+Sublink Worker 是一个可部署在 Cloudflare Worker 上，小而美的订阅转换工具。可以将各种代理协议的分享 URL 转换为不同客户端可用的订阅链接。同时还提供灵活的自定义规则与API支持。
 
-![image](/doc/img/main.png)
+![image](/doc/img/main-1.png)
 
 ## 功能特点
 
@@ -13,14 +13,13 @@ Sublink Worker 是一个可部署在 Cloudflare Worker 上轻量级的订阅转
   - Sing-Box
   - Clash
   - Xray/V2Ray
-- 支持短链接生成（基于 KV）
+- 支持固定/随机短链接生成（基于 KV）
 - 浅色/深色主题切换
 - 灵活的 API，支持脚本化操作
 - 用户友好的 Web 界面，灵活的自定义规则
   - 提供多种预定义规则集
   - 可自建关于geo-site, geo-ip, ip-cidr和domain-suffix的自定义策略组
 
-
 ## 快速部署
 
 [![Deploy to Cloudflare Workers](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/7Sageer/sublink-worker)
@@ -42,19 +41,23 @@ Sublink Worker 是一个可部署在 Cloudflare Worker 上轻量级的订阅转
 
 - 2024-09-15
   - [#31](https://github.com/7Sageer/sublink-worker/issues/31),[#25](https://github.com/7Sageer/sublink-worker/issues/25) 现在可以自定义短链接路径
+  - 优化了前端显示，简化操作流程
 
 [查看更新日志](/doc/update-log.md)
 
 ## 项目结构
 
-- `index.js`: 主要的服务器逻辑，处理请求路由
-- `BaseConfigBuilder.js`: 构建基础配置
-- `SingboxConfigBuilder.js`: 构建 Sing-Box 配置
-- `ClashConfigBuilder.js`: 构建 Clash 配置
-- `ProxyParsers.js`: 解析各种代理协议的 URL
-- `utils.js`: 提供各种实用函数
-- `htmlBuilder.js`: 生成 Web 界面的 HTML
-- `config.js`: 保存配置信息
+```
+.
+├── index.js                 # 主要的服务器逻辑，处理请求路由
+├── BaseConfigBuilder.js     # 构建基础配置
+├── SingboxConfigBuilder.js  # 构建 Sing-Box 配置
+├── ClashConfigBuilder.js    # 构建 Clash 配置
+├── ProxyParsers.js          # 解析各种代理协议的 URL
+├── utils.js                 # 提供各种实用函数
+├── htmlBuilder.js           # 生成 Web 界面的 HTML
+└── config.js                # 保存配置信息
+```
 
 ## 贡献
 

doc/update-log.md

@@ -3,6 +3,7 @@
 ## 2024-09-15
 
 - ([#31](https://github.com/7Sageer/sublink-worker/issues/31),[#25](https://github.com/7Sageer/sublink-worker/issues/25)) 现在可以自定义短链接路径
+- 优化了前端显示，简化操作流程
 
 ## 2024-09-13
 

src/htmlBuilder.js

@@ -321,7 +321,7 @@ const generateStyles = () => `
       margin-right: 10px;
   }
 
-    .qr-modal {
+  .qr-modal {
     position: fixed;
     top: 0;
     left: 0;
@@ -367,6 +367,33 @@ const generateStyles = () => `
     font-size: 16px;
   }
 
+  .base-url-label {
+    background-color: var(--input-bg);
+    color: var(--input-text);
+    border: 1px solid var(--input-border);
+    border-radius: 0.25rem;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+  }
+
+  #subscribeLinksContainer {
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
+  }
+
+  #subscribeLinksContainer.show {
+    max-height: 1000px;
+    opacity: 1;
+  }
+
+  #subscribeLinksContainer.hide {
+    max-height: 0;
+    opacity: 0;
+  }
+
 `;
 
 const generateBody = (xrayUrl, singboxUrl, clashUrl, baseUrl) => `
@@ -378,7 +405,9 @@ const generateBody = (xrayUrl, singboxUrl, clashUrl, baseUrl) => `
         ${generateCardHeader()}
         <div class="card-body">
           ${generateForm()}
-          ${generateSubscribeLinks(xrayUrl, singboxUrl, clashUrl, baseUrl)}
+          <div id="subscribeLinksContainer">
+            ${generateSubscribeLinks(xrayUrl, singboxUrl, clashUrl, baseUrl)}
+          </div>
         </div>
       </div>
     </div>
@@ -436,8 +465,8 @@ const generateSubscribeLinks = (xrayUrl, singboxUrl, clashUrl, baseUrl) => `
     ${generateLinkInput('Clash Link:', 'clashLink', clashUrl)}
     <div class="mb-3">
       <label for="customShortCode" class="form-label">Custom Path (optional):</label>
-      <div class="input-group">
-        <span class="input-group-text" id="basic-addon3">${baseUrl}/s/</span>
+      <div class="d-flex align-items-center">
+        <span class="base-url-label me-2">${baseUrl}/s/</span>
         <input type="text" class="form-control" id="customShortCode" placeholder="Enter custom short code">
       </div>
     </div>
@@ -701,6 +730,14 @@ const submitFormFunction = () => `
     document.getElementById('xrayLink').value = xrayUrl;
     document.getElementById('singboxLink').value = singboxUrl;
     document.getElementById('clashLink').value = clashUrl;
+
+    // Show the subscribe part
+    const subscribeLinksContainer = document.getElementById('subscribeLinksContainer');
+    subscribeLinksContainer.classList.remove('hide');
+    subscribeLinksContainer.classList.add('show');
+
+    // Scroll to the subscribe part
+    subscribeLinksContainer.scrollIntoView({ behavior: 'smooth' });
   }
 
   function loadSavedFormData() {
@@ -755,6 +792,19 @@ const submitFormFunction = () => `
     document.getElementById('advancedOptions').classList.remove('show');
     document.querySelectorAll('input[name="selectedRules"]').forEach(checkbox => checkbox.checked = false);
     document.getElementById('predefinedRules').value = 'custom';
+
+    const subscribeLinksContainer = document.getElementById('subscribeLinksContainer');
+    subscribeLinksContainer.classList.remove('show');
+    subscribeLinksContainer.classList.add('hide');
+
+    document.getElementById('xrayLink').value = '';
+    document.getElementById('singboxLink').value = '';
+    document.getElementById('clashLink').value = '';
+
+    // wait to reset the container
+    setTimeout(() => {
+      subscribeLinksContainer.classList.remove('hide');
+    }, 500);
   }
 
   document.addEventListener('DOMContentLoaded', function() {