Merge pull request #13 from woodchen-ink:woodchen-ink/issue12

Woodchen-ink/issue12
woodchen-ink · Aug 28, 2023 · 82a39a0 · 82a39a0
2 parents 598ca99 + ff1d65d
commit 82a39a0
Show file tree

Hide file tree

Showing 4 changed files with 171 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -9,9 +9,8 @@ Telegram交流群：https://t.me/ai_cn2023
 
 ## 最新示意图(2023.08.28)
 
-![img_v2_29c139e9-9114-42bc-a23d-cba36e635d1g.jpg](https://cdn-img.czl.net/2023/08/28/64eca918b5668.jpg)
-![img_v2_388e4f50-a9ee-452d-b0f1-16773bdfc9fg.jpg](https://cdn-img.czl.net/2023/08/28/64eca91cc90fe.jpg)
-![img_v2_0c1ed439-59b4-4a4a-bf82-b43bd97458ag.jpg](https://cdn-img.czl.net/2023/08/28/64eca9202c6d7.jpg)
+![1693240108324.png](https://cdn-img.czl.net/2023/08/29/64eccb2da01a1.png)
+![1693240132856.png](https://cdn-img.czl.net/2023/08/29/64eccb46017e7.png)
 
 
 ## SESS ID获取方法

diff --git a/index.html b/index.html
@@ -1,10 +1,9 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>OpenAIAPI 信息查询</title>
+  <title>OpenAI API 信息查询</title>
   <meta name="description" content="批量快速查询OPENAI的余额，支持可视化展现已用比例、额度、已用量、未用量、是否GPT-4、是否GPT4-32K、是否绑卡、绑卡信息、组织信息、是否有效">
   <link rel="stylesheet" href="static/css.css" type="text/css" />
 </head>
@@ -56,15 +55,29 @@ <h2 id="result-head" style="visibility:hidden">查询结果</h2>
         <th style="width: 50px">GPT-3.5</th>
         <th style="width: 50px">GPT-4</th>
         <th style="width: 50px">32K</th>
-        <th style="width: 50px">绑卡</th>
-        <th style="width: 230px">绑卡信息</th>
-        <th style="width: 230px">组织信息</th>
-        <th style="width: 150px">速率</th>
+        <th style="width: 60px">绑卡</th>
+        <th style="width: 120px">绑卡信息</th>
+        <th style="width: 120px">组织信息</th>
+        <th style="width: 120px">速率</th>
         <th style="width: 50px;">是否有效</th>
       </tr>
     </thead>
     <tbody></tbody>
   </table>
+<div id="myModal" class="modal">
+  <div class="modal-content">
+    <div class="modal-header">
+      <h2>详细信息</h2>
+      <span class="close">&times;</span>
+
+    </div>
+    <div class="modal-body">
+      <p id="modalText"></p>
+    </div>
+  </div>
+</div>
+
+
   <footer>
     <p>广告链接：
       <a href="https://chat.czl.net" target="_blank">CZLChat</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

diff --git a/static/css.css b/static/css.css
@@ -183,16 +183,8 @@ button.loading::before {
 }
 
 footer {
-    /* padding: 2px; */
-    /* border-top: 1px solid var(--border-color); */
     text-align: center;
-    /* opacity: .5; */
-    /* position: fixed; */
-    /* bottom: 0; */
-    /* left: 0; */
     margin-top: 20px;
-    /* width: 100%; */
-    /* background-color:#212121; */
     line-height: unset !important;
     line-height: normal;
 }
@@ -354,4 +346,103 @@ button.loading::before {
     width: .75rem;
     height: .75rem;
     animation: rotate .5s linear infinite;
-}
+}
+
+@media screen and (max-width: 768px) {
+    /* 在小于768px的屏幕上生效的样式 */
+
+    /* 可以减小字体和表格单元格的大小，使其适应小屏设备 */
+    #result-table th, #result-table td {
+        font-size: 8px;
+        padding: 5px 3px;
+    }
+
+    /* 可以隐藏一些不是非常重要的列，以便更有效地利用屏幕空间 */
+    #result-table th:nth-child(n+12), #result-table td:nth-child(n+12) {
+        display: none;
+    }
+}
+
+#result-table {
+    border-collapse: separate;
+    border-spacing: 0 5px;
+    /* padding: 5px; */
+}
+
+
+#result-table td {
+    vertical-align: top;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 100;
+    padding-top: 100px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.5);
+}
+
+.modal-content {
+    position: relative;
+    display: flex;  
+    flex-direction: column;  
+    background-color: #fefefe;
+    color: #000000;
+    margin: auto;
+    width: 410px;
+    height: auto;
+    max-height: 80%;
+    border-radius: 12px;
+    white-space: pre-wrap;
+}
+.modal h2{
+    margin:8px;
+}
+.modal p{
+    margin-block-start:0;
+    margin-block-end: 0;
+}
+
+.close {
+    color: #FFF;
+    font-size: 28px;
+    font-weight: bold;
+    align-self: flex-end;  
+    margin:8px;  
+}
+
+.close:hover,
+.close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.modal-header {
+    padding: 0px;  
+    background-color: var(--color-primary);
+    color: white;
+    display: flex;  
+    justify-content: space-between;  
+    align-items: center;  
+    border-radius: 12px 12px 0px 0px;
+}
+
+.modal-body {
+    padding: 10px 16px;
+    overflow-y: auto;  
+    display: flex;
+    align-items: flex-start;
+}
+
+#modalText{
+    margin: 0;
+}
+
+
+
diff --git a/static/js.js b/static/js.js
@@ -1,3 +1,15 @@
+var modal = document.getElementById("myModal");
+var span = document.getElementsByClassName("close")[0];
+span.onclick = function () {
+    modal.style.display = "none";
+}
+window.onclick = function (event) {
+    if (event.target == modal) {
+        modal.style.display = "none";
+    }
+}
+
+
 let queriedApiKeys = [];
 let serialNumber = 1;
 
@@ -362,6 +374,20 @@ function sendRequest() {
                 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");
@@ -388,31 +414,50 @@ function sendRequest() {
                 let SubInformation = document.createElement("td");
                 let SubInformationContainer = document.createElement("div");
                 SubInformationContainer.style.whiteSpace = "pre-wrap";
-                SubInformationContainer.textContent = data[8];
+                if (data[8].length > 50) {
+                    SubInformationContainer.textContent = data[8].slice(0, 25) + '... ';
+                    SubInformationContainer.appendChild(createSeeMoreLink(data[8]));
+                } else {
+                    SubInformationContainer.textContent = data[8];
+                }
                 SubInformation.appendChild(SubInformationContainer);
                 row.appendChild(SubInformation);
 
 
                 let setidCell = document.createElement("td");
                 let setidCellContainer = document.createElement("div");
                 setidCellContainer.style.whiteSpace = "pre-wrap";
-                setidCellContainer.textContent = data[9];
+                if (data[9].length > 50) {
+                    setidCellContainer.textContent = data[9].slice(0, 25) + '... ';
+                    setidCellContainer.appendChild(createSeeMoreLink(data[9]));
+
+                } else {
+                    setidCellContainer.textContent = data[9];
+                }
                 setidCell.appendChild(setidCellContainer);
                 row.appendChild(setidCell);
 
+
                 let rateLimitsDataCell = document.createElement("td");
                 let rateLimitsDataContainer = document.createElement("div");
                 rateLimitsDataContainer.style.whiteSpace = "pre-wrap";
-                if (data[13]) { // checking if rateLimits data exists
+                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]) {
-                            rateLimitsDataContainer.textContent += `${model}:\n\tRPM: ${rateLimitsData[model].max_requests_per_1_minute}\n\tTPM: ${rateLimitsData[model].max_tokens_per_1_minute}\n\n`;
+                            rateLimitsText += `${model}:\n\tRPM: ${rateLimitsData[model].max_requests_per_1_minute}\n\tTPM: ${rateLimitsData[model].max_tokens_per_1_minute}\n\n`;
                         } else {
-                            rateLimitsDataContainer.textContent += model + ": ❌\n";
+                            rateLimitsText += model + ": ❌\n";
                         }
                     }
+                    if (rateLimitsText.length > 50) {
+                        rateLimitsDataContainer.textContent = rateLimitsText.slice(0, 25) + '... ';
+                        rateLimitsDataContainer.appendChild(createSeeMoreLink(rateLimitsText));
+                    } else {
+                        rateLimitsDataContainer.textContent = rateLimitsText;
+                    }
                 }
 
                 rateLimitsDataCell.appendChild(rateLimitsDataContainer);