From dbc489523f0011d3787c2bc206f974bcc6454aa4 Mon Sep 17 00:00:00 2001
From: wood <wood@czl.net>
Date: Sun, 3 Sep 2023 21:33:44 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=B8=8B=E5=8F=B3=E4=BE=A7?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E7=9A=84=E9=A2=9C=E8=89=B2=EF=BC=8C=E9=A1=BA?=
 =?UTF-8?q?=E4=BE=BF=E5=8A=A0=E4=B8=80=E4=B8=8B=E6=AF=8F=E4=B8=80=E5=88=97?=
 =?UTF-8?q?=E7=9A=84=E7=BA=BF=20Fixes=20#26?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html         |  43 +++---
 static/js.js       | 325 ++++++++++++++++++++++++---------------------
 tailwind.config.js |  39 +++---
 3 files changed, 214 insertions(+), 193 deletions(-)

diff --git a/index.html b/index.html
index c1790e2..15deb2f 100644
--- a/index.html
+++ b/index.html
@@ -49,7 +49,16 @@
       </div>
 
 
+      
+        
+
       <div class="flex mt-4">
+        <div id="progressbar-toggle" class="form-control w-1/3">
+          <label class="label">
+            <span class="label-text text-warning">已用比例</span>
+          </label>
+          <input type="checkbox" class="toggle toggle-primary" onchange="toggleProgressBar()">
+        </div>
         <div id="subinfo-toggle" class="form-control w-1/3">
           <label class="label">
             <span class="label-text text-warning">绑卡信息</span>
@@ -88,25 +97,25 @@
       <h2 class="text-2xl  mb-6 font-semibold text-gradient">查询结果</h2>
       <div class="overflow-x-auto">
         <div class="overflow-y-hidden ">
-          <table id="result-table" class="table table-xs bg-neutral-content/20 w-full">
-            <thead class="text-white">
-              <tr>
-                <th class="w-1/12">序号</th>
-                <th class="w-2/12">API KEY</th>
-                <th class="w-1/12">总额度</th>
-                <th class="w-1/12">已使用</th>
-                <th class="w-1/12">剩余量</th>
-                <th class="w-1/12">已用比例</th>
-                <th class="w-1/12">到期时间</th>
-                <th class="w-1/12">模型[最高]</th>
-                <th class="w-1/12">绑卡</th>
-                <th class="w-1/12" id="subinfo-header">绑卡信息</th>
-                <th class="w-1/12" id="setid-header">组织信息</th>
-                <th class="w-2/12">速率[RPM,TPM]</th>
-                <th class="w-1/12">有效</th>
+          <table id="result-table" class="table table-md border border-slate-500 w-full">
+            <thead class="text-white border-b border-slate-500">
+              <tr class="bg-gray-800 bg-opacity-80">
+                <th class="w-0.5 border border-slate-500">序号</th>
+                <th class="w-2/12 border border-slate-500">API KEY</th>
+                <th class="w-auto border border-slate-500">总额度</th>
+                <th class="w-auto border border-slate-500">已使用</th>
+                <th class="w-auto border border-slate-500">剩余量</th>
+                <th class="w-auto border border-slate-500" id="progressbar-header">已用比例</th>
+                <th class="w-36 border border-slate-500">到期时间</th>
+                <th class="w-auto border border-slate-500">模型[最高]</th>
+                <th class="w-auto border border-slate-500" >绑卡</th>
+                <th class="w-auto border border-slate-500" id="subinfo-header">绑卡信息</th>
+                <th class="w-auto border border-slate-500" id="setid-header">组织信息</th>
+                <th class="w-2/12 border border-slate-500">速率[RPM,TPM]</th>
+                <th class="w-2 border border-slate-500">有效</th>
               </tr>
             </thead>
-            <tbody>
+            <tbody class="border-t border-slate-500">
               <!-- 表格内容 -->
             </tbody>
           </table>
diff --git a/static/js.js b/static/js.js
index ce8fbdb..c9cf751 100644
--- a/static/js.js
+++ b/static/js.js
@@ -1,3 +1,11 @@
+function toggleProgressBar() {
+    let progressBarHeader = document.getElementById("progressbar-header");
+    let progressBarCells = document.querySelectorAll("td.progressbar");
+    let toggle = document.querySelector("#progressbar-toggle input");
+    let display = toggle.checked ? "" : "none";
+    progressBarHeader.style.display = display;
+    progressBarCells.forEach(function (cell) { cell.style.display = display; });
+}
 function toggleSubInfo() {
     let toggle = document.querySelector("#subinfo-toggle input");
     let display = toggle.checked ? "" : "none";
@@ -19,6 +27,7 @@ function toggleSetidInfo() {
     let setIdCells = document.querySelectorAll("td.setid");
     setIdCells.forEach(function (cell) { cell.style.display = display; });
 }
+toggleProgressBar();
 toggleSubInfo();
 toggleSetidInfo();
 
@@ -64,7 +73,7 @@ async function checkBilling(apiKey, apiUrl) {
             if ((subscriptionData.billing_mechanism === 'advance') || (totalAmount <= 6 && !subscriptionData.has_credit_card)) {
                 totalAmount = advanceData.total_granted;
             }
-            
+
 
             if (totalAmount > 6) {
                 startDate = subDate;
@@ -76,7 +85,7 @@ async function checkBilling(apiKey, apiUrl) {
             const usageData = await response.json();
             totalUsage = usageData.total_usage / 100;
             remaining = (totalAmount - totalUsage).toFixed(3);
-            
+
         } catch (error) {
             console.error(error);
             errors['subscription'] = error.message;
@@ -289,22 +298,22 @@ function sendRequest() {
         apiUrl = apiUrlSelect.value;
     }
 
-    
+
     let apiKeys = parseKeys(apiKeyInput.value);
-    
+
     if (apiKeys.length === 0) {
         alert("未匹配到 API-KEY，请检查输入内容");
         return;
     }
     alert("成功匹配到 API Key，确认后开始查询：" + apiKeys);
-    
+
     function parseKeys(input) {
         let lines = input.split(/\n/);
         let result = [];
         for (let line of lines) {
             let sessKeyMatch = line.match(/sess-[^-]+/);
             let skKeyMatch = line.match(/sk-[^-]+/);
-    
+
             if (sessKeyMatch !== null && skKeyMatch !== null) {
                 result.push(sessKeyMatch[0]);
             }
@@ -317,7 +326,7 @@ function sendRequest() {
         }
         return result;
     }
-    
+
 
     let lastQueryPromise = null;
 
@@ -342,162 +351,174 @@ function sendRequest() {
             )
 
             let row = document.createElement("tr");
-            row.classList.add("hover:bg-gray-700");
+            row.classList.add("bg-gray-600");
+            row.classList.add("bg-opacity-60");
+            row.classList.add("border");
+            row.classList.add("border-slate-500");
 
             let serialNumberCell = document.createElement("td"); // 创建序列号单元格
-            serialNumberCell.textContent = serialNumber; // 设置序列号文本
-            row.appendChild(serialNumberCell); // 将序列号单元格添加到行中
+            serialNumberCell.classList.add("border");
+            serialNumberCell.classList.add("border-slate-500");
+            serialNumberCell.textContent = serialNumber;
+            row.appendChild(serialNumberCell);
 
             let apiKeyCell = document.createElement("td");
+            apiKeyCell.classList.add("border");
+            apiKeyCell.classList.add("border-slate-500");
             apiKeyCell.textContent = apiKey.replace(/^(.{5}).*(.{4})$/, "$1***$2");
             row.appendChild(apiKeyCell);
 
             console.log('查看查询结果', data); // 添加 console.log 以查看 data 的值
 
-            if (data[0] === undefined) {
-                let errorMessageCell = document.createElement("td");
-                errorMessageCell.colSpan = "8";
-                errorMessageCell.classList.add("status-error");
-                errorMessageCell.textContent = "不正确或已失效的API-KEY";
-                row.appendChild(errorMessageCell);
+            let totalAmount = document.createElement("td");
+            totalAmount.classList.add("border");
+            totalAmount.classList.add("border-slate-500");
+            totalAmount.textContent = data[0];
+            row.appendChild(totalAmount);
+
+            let totalUsedCell = document.createElement("td");
+            totalUsedCell.classList.add("border");
+            totalUsedCell.classList.add("border-slate-500");
+            if (!isNaN(data[1])) {
+                totalUsedCell.textContent = data[1].toFixed(3);
             } else {
-                let totalAmount = document.createElement("td");
-                totalAmount.textContent = data[0];
-                row.appendChild(totalAmount);
-
-                let totalUsedCell = document.createElement("td");
-                if (!isNaN(data[1])) {
-                    totalUsedCell.textContent = data[1].toFixed(3);
-                } else {
-                    totalUsedCell.textContent = '❌'
-                }
-                row.appendChild(totalUsedCell);
-
-                let totalAvailableCell = document.createElement("td");
-                totalAvailableCell.textContent = typeof data[2] === 'number' ? data[2] : data[2];
-                row.appendChild(totalAvailableCell);
-                let progressCell = document.createElement("td");
-                let progressContainer = document.createElement("div"); // 添加一个新的容器元素
-                progressContainer.style.width = "100%";
-                progressContainer.style.height = "20px";
-                progressContainer.style.backgroundColor = "#f3f3f3"; // 设置容器的背景色为灰白色
-                let progressBar = document.createElement("div");
-                progressBar.style.width = (data[1] / data[0] * 100).toFixed(2) + "%";
-                progressBar.style.height = "20px";
-                progressBar.style.backgroundColor = "#4CAF50";
-                progressBar.style.position = "relative"; // 设置进度条的 position 为 relative
-                progressBar.textContent = (data[1] / data[0] * 100).toFixed(2) + "%"; // 显示百分比
-                progressBar.style.textAlign = "right"; // 设置文本对齐方式为右对齐
-                progressBar.style.paddingRight = "5px"; // 设置右边距以确保文本不超出边界
-                progressBar.style.color = "black"; // 设置文本颜色为白色
-                progressContainer.appendChild(progressBar); // 将进度条添加到容器中
-                progressCell.appendChild(progressContainer); // 将容器添加到单元格中
-                row.appendChild(progressCell);
-
-                function createSeeMoreLink(text) {
-                    let seeMoreLink = document.createElement("a");
-                    seeMoreLink.href = "#";
-                    seeMoreLink.textContent = '全部';
-                    seeMoreLink.style.cursor = "pointer";
-                    seeMoreLink.style.textDecoration = "underline";
-                    seeMoreLink.onclick = (event) => {
-                        event.preventDefault();
-                        document.getElementById('modalText').textContent = text;
-                        document.getElementById('myModal').style.display = "block";
-                    };
-                    return seeMoreLink;
-                }
-
-
-
-                let expireTime = document.createElement("td");
-                expireTime.textContent = data[3];
-                row.appendChild(expireTime);
-
-
-                let GPT35CheckResult = document.createElement("td");
-                GPT35CheckResult.textContent = data[4];
-                let GPT4CheckResult = document.createElement("td");
-                GPT4CheckResult.textContent = data[5];
-                let GPT432kCheckResult = document.createElement("td");
-                GPT432kCheckResult.textContent = data[6];
-                let highestModel = document.createElement("td");
-                if (GPT35CheckResult.textContent === "✅" && GPT4CheckResult.textContent === "❌" && GPT432kCheckResult.textContent === "❌") {
-                    highestModel.textContent = "gpt3.5";
-                } else if (GPT35CheckResult.textContent === "✅" && GPT4CheckResult.textContent === "✅" && GPT432kCheckResult.textContent === "❌") {
-                    highestModel.textContent = "gpt4";
-                } else if (GPT35CheckResult.textContent === "✅" && GPT4CheckResult.textContent === "✅" && GPT432kCheckResult.textContent === "✅") {
-                    highestModel.textContent = "gpt4-32K";
-                } else {
-                    highestModel.textContent = "❌";
-                }
-
-                row.appendChild(highestModel);
-
-                let isSubscribe = document.createElement("td");
-                isSubscribe.style.whiteSpace = "pre"; // 添加这一行来保留换行
-                isSubscribe.textContent = data[7];
-                row.appendChild(isSubscribe);
-
-                let SubInformation = document.createElement("td");
-                SubInformation.classList.add("subinfo");
-                let SubInformationContainer = document.createElement("div");
-                SubInformationContainer.style.whiteSpace = "pre-wrap";
-                SubInformationContainer.textContent = data[8];
-
-                SubInformation.appendChild(SubInformationContainer);
-                row.appendChild(SubInformation);
-                SubInformation.style.display = document.querySelector("#subinfo-toggle input").checked ? "" : "none";
-
-
-                let setidCell = document.createElement("td");
-                setidCell.classList.add("setid");
-                let setidCellContainer = document.createElement("div");
-                setidCellContainer.style.whiteSpace = "pre-wrap";
-                setidCellContainer.textContent = data[9];
-                setidCell.appendChild(setidCellContainer);
-                row.appendChild(setidCell);
-                setidCell.style.display = document.querySelector("#setid-toggle input").checked ? "" : "none";
-
-
-                let rateLimitsDataCell = document.createElement("td");
-                let rateLimitsDataContainer = document.createElement("div");
-                rateLimitsDataContainer.style.whiteSpace = "pre-wrap";
-                if (data[13]) {
-                    let rateLimitsData = data[13];
-                    let models = ['gpt-3.5-turbo', 'gpt-3.5-turbo-16k', 'gpt-4', 'gpt-4-32k'];
-                    let rateLimitsText = '';
-                    for (let model of models) {
-                        if (rateLimitsData[model]) {
-                            let modelName = '';
-                            if (model === 'gpt-3.5-turbo') {
-                                modelName = 'gpt3.5';
-                            } else if (model === 'gpt-3.5-turbo-16k') {
-                                modelName = 'gpt3.5-16K';
-                            } else if (model === 'gpt-4') {
-                                modelName = 'gpt4';
-                            } else if (model === 'gpt-4-32k') {
-                                modelName = 'gpt4-32K';
-                            }
-                            rateLimitsText += `${modelName}: ${rateLimitsData[model].max_requests_per_1_minute}, ${rateLimitsData[model].max_tokens_per_1_minute}\n`;
-                        } else {
-                            rateLimitsText += model + ": ❌\n";
-                        }
-                    }
-                    rateLimitsDataContainer.textContent = rateLimitsText;
-                }
-
-                rateLimitsDataCell.appendChild(rateLimitsDataContainer);
-                row.appendChild(rateLimitsDataCell);
-
-
-                // 是否有效列
-                let completionCheckResultCell = document.createElement("td");
-                completionCheckResultCell.innerHTML = `<span style="font-size:24px">${data[12][0]}</span><br>消耗${data[12][1]} tokens`; // 使用 innerHTML 添加两行内容
-                row.appendChild(completionCheckResultCell);
-
-
+                totalUsedCell.textContent = '❌'
             }
+            row.appendChild(totalUsedCell);
+
+            let totalAvailableCell = document.createElement("td");
+            totalAvailableCell.classList.add("border");
+            totalAvailableCell.classList.add("border-slate-500");
+            totalAvailableCell.textContent = typeof data[2] === 'number' ? data[2] : data[2];
+            row.appendChild(totalAvailableCell);
+
+
+            let progressCell = document.createElement("td");
+            progressCell.classList.add("progressbar");
+            progressCell.classList.add("border");
+            progressCell.classList.add("border-slate-500");
+            let progressContainer = document.createElement("div"); // 添加一个新的容器元素
+            progressContainer.style.width = "100%";
+            progressContainer.style.height = "20px";
+            progressContainer.style.backgroundColor = "#f3f3f3"; // 设置容器的背景色为灰白色
+            let progressBar = document.createElement("div");
+            progressBar.style.width = (data[1] / data[0] * 100).toFixed(2) + "%";
+            progressBar.style.height = "20px";
+            progressBar.style.backgroundColor = "#4CAF50";
+            progressBar.style.position = "relative"; // 设置进度条的 position 为 relative
+            progressBar.textContent = (data[1] / data[0] * 100).toFixed(2) + "%"; // 显示百分比
+            progressBar.style.textAlign = "right"; // 设置文本对齐方式为右对齐
+            progressBar.style.paddingRight = "5px"; // 设置右边距以确保文本不超出边界
+            progressBar.style.color = "black"; // 设置文本颜色为白色
+            progressContainer.appendChild(progressBar); // 将进度条添加到容器中
+            progressCell.appendChild(progressContainer); // 将容器添加到单元格中
+            row.appendChild(progressCell);
+            progressCell.style.display = document.querySelector("#progressbar-toggle input").checked ? "" : "none";
+
+
+            // 到期时间
+            let expireTime = document.createElement("td");
+            expireTime.classList.add("border");
+            expireTime.classList.add("border-slate-500");
+            expireTime.textContent = data[3];
+            row.appendChild(expireTime);
+
+
+            let GPT35CheckResult = document.createElement("td");
+            GPT35CheckResult.textContent = data[4];
+            let GPT4CheckResult = document.createElement("td");
+            GPT4CheckResult.textContent = data[5];
+            let GPT432kCheckResult = document.createElement("td");
+            GPT432kCheckResult.textContent = data[6];
+            let highestModel = document.createElement("td");
+            highestModel.classList.add("border");
+            highestModel.classList.add("border-slate-500");
+            if (GPT35CheckResult.textContent === "✅" && GPT4CheckResult.textContent === "❌" && GPT432kCheckResult.textContent === "❌") {
+                highestModel.textContent = "gpt3.5";
+            } else if (GPT35CheckResult.textContent === "✅" && GPT4CheckResult.textContent === "✅" && GPT432kCheckResult.textContent === "❌") {
+                highestModel.textContent = "gpt4";
+            } else if (GPT35CheckResult.textContent === "✅" && GPT4CheckResult.textContent === "✅" && GPT432kCheckResult.textContent === "✅") {
+                highestModel.textContent = "gpt4-32K";
+            } else {
+                highestModel.textContent = "❌";
+            }
+
+            row.appendChild(highestModel);
+
+            let isSubscribe = document.createElement("td");
+            isSubscribe.classList.add("border");
+            isSubscribe.classList.add("border-slate-500");
+            isSubscribe.style.whiteSpace = "pre"; // 添加这一行来保留换行
+            isSubscribe.textContent = data[7];
+            row.appendChild(isSubscribe);
+
+            let SubInformation = document.createElement("td");
+            SubInformation.classList.add("border-slate-500");
+            SubInformation.classList.add("border");
+            SubInformation.classList.add("subinfo");
+            let SubInformationContainer = document.createElement("div");
+            SubInformationContainer.style.whiteSpace = "pre-wrap";
+            SubInformationContainer.textContent = data[8];
+
+            SubInformation.appendChild(SubInformationContainer);
+            row.appendChild(SubInformation);
+            SubInformation.style.display = document.querySelector("#subinfo-toggle input").checked ? "" : "none";
+
+
+            let setidCell = document.createElement("td");
+            setidCell.classList.add("border");
+            setidCell.classList.add("border-slate-500");
+            setidCell.classList.add("setid");
+            let setidCellContainer = document.createElement("div");
+            setidCellContainer.style.whiteSpace = "pre-wrap";
+            setidCellContainer.textContent = data[9];
+            setidCell.appendChild(setidCellContainer);
+            row.appendChild(setidCell);
+            setidCell.style.display = document.querySelector("#setid-toggle input").checked ? "" : "none";
+
+
+            let rateLimitsDataCell = document.createElement("td");
+            rateLimitsDataCell.classList.add("border");
+            rateLimitsDataCell.classList.add("border-slate-500");
+            let rateLimitsDataContainer = document.createElement("div");
+            rateLimitsDataContainer.style.whiteSpace = "pre-wrap";
+            if (data[13]) {
+                let rateLimitsData = data[13];
+                let models = ['gpt-3.5-turbo', 'gpt-3.5-turbo-16k', 'gpt-4', 'gpt-4-32k'];
+                let rateLimitsText = '';
+                for (let model of models) {
+                    if (rateLimitsData[model]) {
+                        let modelName = '';
+                        if (model === 'gpt-3.5-turbo') {
+                            modelName = 'gpt3.5';
+                        } else if (model === 'gpt-3.5-turbo-16k') {
+                            modelName = 'gpt3.5-16K';
+                        } else if (model === 'gpt-4') {
+                            modelName = 'gpt4';
+                        } else if (model === 'gpt-4-32k') {
+                            modelName = 'gpt4-32K';
+                        }
+                        rateLimitsText += `${modelName}: ${rateLimitsData[model].max_requests_per_1_minute}, ${rateLimitsData[model].max_tokens_per_1_minute}\n`;
+                    } else {
+                        rateLimitsText += model + ": ❌\n";
+                    }
+                }
+                rateLimitsDataContainer.textContent = rateLimitsText;
+            }
+
+            rateLimitsDataCell.appendChild(rateLimitsDataContainer);
+            row.appendChild(rateLimitsDataCell);
+
+
+            // 是否有效列
+            let completionCheckResultCell = document.createElement("td");
+            completionCheckResultCell.classList.add("border");
+            completionCheckResultCell.classList.add("border-slate-500");
+            completionCheckResultCell.innerHTML = `<span style="font-size:24px">${data[12][0]}</span><br>消耗${data[12][1]} tokens`; // 使用 innerHTML 添加两行内容
+            row.appendChild(completionCheckResultCell);
+
+
+
             tableBody.appendChild(row);
 
             if (i === apiKeys.length - 1) {
diff --git a/tailwind.config.js b/tailwind.config.js
index 82e8009..345cb47 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,14 +1,14 @@
 module.exports = {
 
   theme: {
-  screens: {
-    "sm": "640px",
-    "md": "768px",
-    "lg": "1024px",
-    "xl": "1280px",
-    "2xl": "1600px",
-    'sm': '576px',
-    "2xl":{'max': '1600px'},
+    screens: {
+      "sm": "640px",
+      "md": "768px",
+      "lg": "1024px",
+      "xl": "1280px",
+      "2xl": "1600px",
+      'sm': '576px',
+      "2xl": { 'max': '1600px' },
       // => @media (min-width: 576px) { ... }
 
       'md': '960px',
@@ -16,22 +16,13 @@ module.exports = {
 
       'lg': '1560px',
       // => @media (min-width: 1440px) { ... }
-  }
+    }
   },
 
   plugins: [require("daisyui")],
-
- 
-  // daisyui: {
-  //   themes: false, 
-  //   darkTheme: "dark", 
-  //   base: true, 
-  //   styled: true, 
-  //   utils: true, 
-  //   rtl: false, 
-  //   prefix: "", 
-  //   logs: true, 
-  // },
-
-  //...
-}
\ No newline at end of file
+  variants: {
+    extend: {
+      borderColor: ['responsive', 'hover', 'focus']
+    }
+  }
+}