Spaces:

ServiceX
/

Sublink

Paused

App Files Files Community

BirkhoffLee commited on Mar 11

Commit

50428e9

unverified ·

1 Parent(s): cf2569a

feat: 增加了预览功能

Browse files

Files changed (1) hide show

app/static/index.html +83 -9

app/static/index.html CHANGED Viewed

@@ -242,6 +242,24 @@
   }
   #toast.show { opacity: 1; }
 </style>
 </head>
 <body>
@@ -323,7 +341,7 @@
           <label class="bool-item"><input type="checkbox" id="append_type"> append_type</label>
           <label class="bool-item"><input type="checkbox" id="scv"> scv</label>
           <label class="bool-item"><input type="checkbox" id="append_info" checked> append_info</label>
-          <label class="bool-item"><input type="checkbox" id="new_name" checked> new_name</label>
         </div>
       </div>
     </div>
@@ -340,6 +358,10 @@
       <div class="result-actions">
         <button class="btn btn-sm" id="copy-btn" type="button">复制</button>
         <button class="btn btn-sm" id="open-btn" type="button">在新标签打开</button>
       </div>
     </div>
   </div>
@@ -359,6 +381,20 @@ advancedToggle.addEventListener('click', () => {
   toggleIcon.textContent = open ? '▼' : '▶';
 });
 // 生成链接
 document.getElementById('gen-btn').addEventListener('click', async () => {
   const url = document.getElementById('url').value.trim();
@@ -382,13 +418,12 @@ document.getElementById('gen-btn').addEventListener('click', async () => {
   const extra = targetMap[targetVal] || { target: targetVal };
-  // 读取 bool 开关（仅将被勾选的 checkbox 传给后端）
-  const boolFields = ['emoji','udp','tfo','sort','fdn','expand','append_type','scv','append_info','new_name'];
   const boolValues = {};
   boolFields.forEach(id => {
-    const el = document.getElementById(id);
-    // 只把勾选状态传递（后端处理 None = 不传）
-    boolValues[id] = el.checked;
   });
   // list 来自 extra（clash-list 模式）
@@ -408,10 +443,9 @@ document.getElementById('gen-btn').addEventListener('click', async () => {
     ...boolValues,
   };
-  // 去掉 undefined/null 的 bool（后端会过滤 None，但前端先清理）
-  // bool 字段全部传，后端自己判断
   hideError();
   try {
     const res = await fetch('/api/convert', {
@@ -434,6 +468,7 @@ document.getElementById('gen-btn').addEventListener('click', async () => {
     // 绑定按钮（每次生成都重新绑，避免重复监听器）
     const copyBtn = document.getElementById('copy-btn');
     const openBtn = document.getElementById('open-btn');
     copyBtn.onclick = () => {
       navigator.clipboard.writeText(fullUrl).then(() => showToast());
@@ -441,11 +476,50 @@ document.getElementById('gen-btn').addEventListener('click', async () => {
     openBtn.onclick = () => window.open(fullUrl, '_blank');
   } catch (e) {
     showError('网络错误：' + e.message);
   }
 });
 function showError(msg) {
   const el = document.getElementById('error-msg');
   el.textContent = msg;

   }
   #toast.show { opacity: 1; }
+  /* 预览区域 */
+  #preview-section { margin-top: 0.75rem; display: none; }
+  #preview-section.show { display: block; }
+  #preview-content {
+    background: #0a0c10;
+    border: 1px solid #2d3348;
+    border-radius: 8px;
+    padding: 0.75rem 1rem;
+    font-family: monospace;
+    font-size: 0.75rem;
+    color: #94a3b8;
+    max-height: 400px;
+    overflow-y: auto;
+    white-space: pre;
+    line-height: 1.4;
+  }
+  #preview-content.error { color: #fca5a5; }
 </style>
 </head>
 <body>
           <label class="bool-item"><input type="checkbox" id="append_type"> append_type</label>
           <label class="bool-item"><input type="checkbox" id="scv"> scv</label>
           <label class="bool-item"><input type="checkbox" id="append_info" checked> append_info</label>
+          <label class="bool-item"><input type="checkbox" id="new_name"> new_name</label>
         </div>
       </div>
     </div>
       <div class="result-actions">
         <button class="btn btn-sm" id="copy-btn" type="button">复制</button>
         <button class="btn btn-sm" id="open-btn" type="button">在新标签打开</button>
+        <button class="btn btn-sm" id="preview-btn" type="button">预览内容</button>
+      </div>
+      <div id="preview-section">
+        <pre id="preview-content"></pre>
       </div>
     </div>
   </div>
   toggleIcon.textContent = open ? '▼' : '▶';
 });
+// subconverter 实际默认值，与之相同的 bool 不传（null = 后端跳过）
+const BOOL_DEFAULTS = {
+  emoji:       true,
+  udp:         false,
+  tfo:         false,
+  sort:        false,
+  fdn:         false,
+  expand:      true,
+  append_type: false,
+  scv:         false,
+  append_info: true,
+  new_name:    false,
+};
 // 生成链接
 document.getElementById('gen-btn').addEventListener('click', async () => {
   const url = document.getElementById('url').value.trim();
   const extra = targetMap[targetVal] || { target: targetVal };
+  // 只传与默认值不同的 bool，相同的传 null（后端跳过）
+  const boolFields = Object.keys(BOOL_DEFAULTS);
   const boolValues = {};
   boolFields.forEach(id => {
+    const val = document.getElementById(id).checked;
+    boolValues[id] = (val === BOOL_DEFAULTS[id]) ? null : val;
   });
   // list 来自 extra（clash-list 模式）
     ...boolValues,
   };
   hideError();
+  // 重置预览区
+  hidePreview();
   try {
     const res = await fetch('/api/convert', {
     // 绑定按钮（每次生成都重新绑，避免重复监听器）
     const copyBtn = document.getElementById('copy-btn');
     const openBtn = document.getElementById('open-btn');
+    const previewBtn = document.getElementById('preview-btn');
     copyBtn.onclick = () => {
       navigator.clipboard.writeText(fullUrl).then(() => showToast());
     openBtn.onclick = () => window.open(fullUrl, '_blank');
+    previewBtn.onclick = () => togglePreview(fullUrl, previewBtn);
   } catch (e) {
     showError('网络错误：' + e.message);
   }
 });
+// 预览内容 toggle
+async function togglePreview(fullUrl, btn) {
+  const section = document.getElementById('preview-section');
+  const content = document.getElementById('preview-content');
+  // 已展开则收起
+  if (section.classList.contains('show')) {
+    hidePreview();
+    return;
+  }
+  btn.textContent = '加载中…';
+  btn.disabled = true;
+  try {
+    const res = await fetch(fullUrl);
+    const text = await res.text();
+    const lines = text.split('\n');
+    content.textContent = lines.slice(0, 500).join('\n') + (lines.length > 500 ? '\n... (已截断)' : '');
+    content.classList.remove('error');
+  } catch (e) {
+    content.textContent = 'Error: ' + e.message;
+    content.classList.add('error');
+  }
+  section.classList.add('show');
+  btn.textContent = '预览内容';
+  btn.disabled = false;
+}
+function hidePreview() {
+  document.getElementById('preview-section').classList.remove('show');
+  document.getElementById('preview-content').textContent = '';
+  const btn = document.getElementById('preview-btn');
+  if (btn) { btn.textContent = '预览内容'; btn.disabled = false; }
+}
 function showError(msg) {
   const el = document.getElementById('error-msg');
   el.textContent = msg;