缩短单行高度，信息过多时改为弹窗展示

Fixes #12

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)
+![1693240108324.png](https://cdn-img.czl.net/2023/08/29/64eccb2da01a1.png)
-![img_v2_388e4f50-a9ee-452d-b0f1-16773bdfc9fg.jpg](https://cdn-img.czl.net/2023/08/28/64eca91cc90fe.jpg)
+![1693240132856.png](https://cdn-img.czl.net/2023/08/29/64eccb46017e7.png)
-![img_v2_0c1ed439-59b4-4a4a-bf82-b43bd97458ag.jpg](https://cdn-img.czl.net/2023/08/28/64eca9202c6d7.jpg)
 
 
 ## SESS ID获取方法

index.html

@@ -56,15 +56,32 @@
         <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: 60px">绑卡</th>
-        <th style="width: 230px">绑卡信息</th>
+        <th style="width: 120px">绑卡信息</th>
-        <th style="width: 230px">组织信息</th>
+        <th style="width: 120px">组织信息</th>
-        <th style="width: 150px">速率</th>
+        <th style="width: 120px">速率</th>
         <th style="width: 50px;">是否有效</th>
       </tr>
     </thead>
     <tbody></tbody>
   </table>
+  <!-- This is the modal -->
+<!-- This is the modal -->
+<div id="myModal" class="modal">
+  <!-- Modal content -->
+  <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;

static/css.css

@@ -355,3 +355,104 @@ button.loading::before {
     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;
+    /* height: 74px; */
+}
+
+.modal-body {
+    padding: 10px 16px;
+    overflow-y: auto;  
+    /* height:336px; */
+    display: flex;
+    align-items: flex-start;
+}
+
+#modalText{
+    margin: 0;
+}
+
+
+

static/js.js

@@ -1,3 +1,22 @@
+// Get the modal
+var modal = document.getElementById("myModal");
+
+// Get the <span> element that closes the modal
+var span = document.getElementsByClassName("close")[0];
+
+// When the user clicks on <span> (x), close the modal
+span.onclick = function () {
+    modal.style.display = "none";
+}
+
+// When the user clicks anywhere outside of the modal, close it
+window.onclick = function (event) {
+    if (event.target == modal) {
+        modal.style.display = "none";
+    }
+}
+
+
 let queriedApiKeys = [];
 let serialNumber = 1;
 
@@ -362,6 +381,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,7 +421,12 @@ 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);
 
@@ -396,23 +434,37 @@ function sendRequest() {
                 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);