Merge pull request #2 from east-and-west-magic/save-log

README.md

@@ -10,3 +10,8 @@ short_description: log displayer for all end
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+Please set following environment variables:
+
+- `hf_token`: hugginface token
+- `SECRET_KEY`: key of parsing user token

logging_helper.py

@@ -0,0 +1,207 @@
+"""
+a module of logs saving and backuping
+"""
+
+import os
+import datasets as ds
+from apscheduler.schedulers.background import BackgroundScheduler
+from tqdm import tqdm
+from utils import beijing, md5, json_to_str
+from huggingface_hub import HfApi
+import pandas as pd
+import glob
+
+hf = HfApi()
+hf.token = os.environ.get("hf_token")
+
+
+class LoggingHelper:
+
+    def __init__(
+        self,
+        repo_id: str,
+        local_dir: str = "data/logs",
+        synchronize_interval: int = 60,
+    ):
+        """
+        :param repo_id: the repo_id of the dataset in huggingface
+        :param local_dir: a directory in cwd to store downloaded files
+        :param synchronize_interval: the interval of synchronizing between local and huggingface
+
+        """
+        self.local_dir = local_dir
+        self.repo_id = repo_id
+        self.synchronize_interval = synchronize_interval
+        self.repo_type = "dataset"
+        self.scheduler = BackgroundScheduler()
+        self.buffer = dict[str, ds.Dataset]()
+        self.need_push = dict[str, bool]()
+        self.today = beijing().date()
+        ds.disable_progress_bar()
+        self.dataframe: pd.DataFrame
+        self.pull()
+        self.start_synchronize()
+
+    def addlog(self, log: dict):
+        """add one log"""
+        remotedir = self.remotedir()
+        filename = md5(json_to_str(log))[:2] + ".json"
+        remotepath = "/".join([remotedir, filename])
+        if remotepath in self.buffer:
+            self.buffer[remotepath] = self.buffer[remotepath].add_item(log)  # type: ignore
+        else:
+            self.buffer[remotepath] = ds.Dataset.from_dict({})
+            self.buffer[remotepath] = self.buffer[remotepath].add_item(log)  # type: ignore
+        self.need_push[remotepath] = True
+        print("[addlog] Added a log to buffer")
+
+    def remotedir(self):
+        now = beijing()
+        year = now.year.__str__()
+        month = now.month.__str__()
+        day = now.day.__str__()
+        return "/".join([year, month, day])
+
+    def pull(self):
+        try:
+            self.download()
+            remotedir = self.remotedir()
+            print(f"[pull] today dir: {remotedir}")
+            filenames = hf.list_repo_files(
+                repo_id=self.repo_id,
+                repo_type=self.repo_type,
+            )
+            files_to_load = [
+                filename
+                for filename in filenames
+                if filename not in self.buffer
+                and filename.startswith(remotedir)
+                and filename.endswith(".json")
+            ]
+            print(f"[pull] total {len(files_to_load)} to load")
+            for filename in tqdm(files_to_load):
+                print()
+                path = os.sep.join([self.local_dir, filename])
+                with open(path, "r") as f:
+                    data = f.read()
+                if len(data) != 0:
+                    self.buffer[filename] = ds.Dataset.from_json(path)  # type: ignore
+                    self.need_push[filename] = False
+            return True
+        except Exception as e:
+            print(f"[pull] {type(e)}: {e}")
+            return False
+
+    def push_yesterday(self) -> bool:
+        try:
+            year = self.today.year.__str__()
+            month = self.today.month.__str__()
+            day = self.today.day.__str__()
+            remotedir = "/".join([year, month, day])
+            files_to_push = []
+            for filename in self.buffer:
+                if not filename.startswith(remotedir):
+                    continue
+                if not self.need_push[filename]:
+                    del self.buffer[filename]
+                    del self.need_push[filename]
+                files_to_push.append(filename)
+            if len(files_to_push) == 0:
+                return True
+            print("[push_yesterday] Writing datasets to json files")
+            for filename in files_to_push:
+                localpath = os.sep.join([self.local_dir, filename])
+                self.buffer[filename].to_json(localpath)
+                files_to_push.append(filename)
+                print(f"[push_yesterday] {filename} finished")
+            print("[push_yesterday] Done")
+            print("[push_yesterday] Pushing log files to remote")
+            if len(files_to_push):
+                localdir = os.sep.join([self.local_dir, remotedir])
+                res = hf.upload_folder(
+                    repo_id=self.repo_id,
+                    folder_path=localdir,
+                    path_in_repo=remotedir,
+                    repo_type=self.repo_type,
+                    commit_message=f"Updated at {beijing()}",
+                )
+                print(f"[push_yesterday] Log files pushed to {res}")
+            print("[push_yesterday] Done")
+            return True
+        except Exception as e:
+            print(f"[push_yesterday] {type(e)}: {e}")
+            return False
+
+    def push(self):
+        try:
+            now = beijing().date()
+            if now != self.today:  # new day comes
+                if not self.push_yesterday():
+                    print("[push] Failed to upload yesterday's log files")
+                self.today = now
+            files_to_push = [
+                filename for filename in self.need_push if self.need_push[filename]
+            ]
+            if len(files_to_push) == 0:
+                return True
+            print("[push] Writing datasets to json files")
+            for filename in files_to_push:
+                localpath = os.path.join(self.local_dir, filename)
+                self.buffer[filename].to_json(localpath)
+                print(f"[push] {filename} finished")
+            print("[push] Done")
+            print("[push] Pushing log files to remote")
+            remotedir = self.remotedir()
+            localdir = "/".join([self.local_dir, remotedir])
+            res = hf.upload_folder(
+                repo_id=self.repo_id,
+                folder_path=localdir,
+                path_in_repo=remotedir,
+                repo_type=self.repo_type,
+                commit_message=f"Updated at {beijing()}",
+            )
+            for filename in files_to_push:
+                self.need_push[filename] = False
+            print(f"[push] Log files pushed to {res}")
+            print("[push] Done")
+            return True
+        except Exception as e:
+            print(f"[push] {type(e)}: {e}")
+            return False
+
+    def download(self):
+        print("[download] Starting downloading")
+        try:
+            res = hf.snapshot_download(
+                repo_id=self.repo_id,
+                repo_type="dataset",
+                local_dir=self.local_dir,
+            )
+            print(f"[download] Downloaded to {res}")
+        except Exception as e:
+            print(f"[download] {type(e)}: {e}")
+        print("[download] Done")
+
+    def start_synchronize(self):
+        self.scheduler.add_job(
+            self.push,
+            "interval",
+            seconds=self.synchronize_interval,
+        )
+        self.scheduler.start()
+
+    def refresh(self) -> list[dict]:
+        self.push()
+        files = glob.glob("**/*.json", root_dir=self.local_dir, recursive=True)
+        filepathes = [os.sep.join([self.local_dir, file]) for file in files]
+        datasets = []
+        for path in tqdm(filepathes):
+            path = str(path)
+            datasets.append(ds.Dataset.from_json(path))
+        df = pd.DataFrame()
+        if datasets:
+            dataset: ds.Dataset = ds.concatenate_datasets(datasets)
+            df = dataset.to_pandas()
+            assert isinstance(df, pd.DataFrame)
+            df = df.sort_values(by="timestamp", ascending=False)
+        return df.to_dict(orient="records")

main.py

@@ -1,9 +1,9 @@
-from fastapi import FastAPI, Body
+from fastapi import FastAPI, Body, Header, Request
 from fastapi.middleware.cors import CORSMiddleware
-from panel.io.fastapi import add_applications
-import page
-from utils import beijing
-import logging
+from utils import beijing, parse_token
+from logging_helper import LoggingHelper
+from fastapi.templating import Jinja2Templates
+
 
 app = FastAPI(
     title=f"Log Displayer",
@@ -19,25 +19,55 @@ app.add_middleware(
     allow_headers=["*"],
 )
 print("Done\n")
-add_applications(page.page, app=app, title="Log Displayer")
-
 
-@app.post("/app")
-async def log_app(message: str = Body(..., embed=True)):
-    print(f"[APP] {message}")
-    logger = logging.getLogger("APP")
-    logger.debug(message)
-    return True
+LOGS_REPO_ID = "pgsoft/logs"
+local_dir = "data/logs"
+logger = LoggingHelper(
+    repo_id=LOGS_REPO_ID,
+    local_dir=local_dir,
+)
 
 
-@app.post("/game")
-async def log_game(message: str = Body(..., embed=True)):
-    print(f"[GAME] {message}")
-    logger = logging.getLogger("Game")
-    logger.debug(message)
+@app.post("/{end}")
+async def add_log(
+    end: str,
+    message: str = Body(..., embed=True),
+    token: str | None = Header(None),
+    source: str | None = Header("web"),
+):
+    print("Type: ", end)
+    print("From: ", source)
+    print("Token: ", token)
+    uid, username = parse_token(token)
+    timestamp = beijing().isoformat()
+    print("Timestamp: ", timestamp)
+    print("Message: ", message)
+    log = {
+        "type": end,
+        "source": source,
+        "uid": uid,
+        "username": username,
+        "token": token,
+        "content": message,
+        "timestamp": timestamp,
+    }
+    logger.addlog(log)
     return True
 
 
 @app.get("/healthcheck")
 async def health_check():
-    return True
+    return True
+
+
+templates = Jinja2Templates(directory="static")
+
+
+@app.get("")
+@app.get("/")
+async def root(request: Request):
+    data = logger.refresh()
+    return templates.TemplateResponse(
+        "index.html",
+        {"request": request, "data": data},
+    )

page.py

@@ -1,39 +0,0 @@
-import panel as pn
-import logging
-from pathlib import Path
-
-
-tab_console_names = ["APP", "Game"]
-pn.extension("terminal")  # type: ignore
-tabs = []
-for name in tab_console_names:
-    terminal = pn.widgets.Terminal(height=600, sizing_mode="stretch_width")
-
-    logger = logging.getLogger(name)
-    logger.setLevel(logging.DEBUG)
-    stream_handler = logging.StreamHandler(terminal)
-    stream_handler.terminator = " \n"
-    formatter = logging.Formatter("%(asctime)s [%(levelname)s]: %(message)s")
-    stream_handler.setFormatter(formatter)
-    stream_handler.setLevel(logging.DEBUG)
-    logger.addHandler(stream_handler)
-
-    log_path = Path(f"data/logs/{name.lower()}.log")
-    log_path.parent.mkdir(parents=True, exist_ok=True)
-    file_handler = logging.FileHandler(log_path)
-    file_handler.setFormatter(formatter)
-    logger.addHandler(file_handler)
-    downloader = pn.widgets.FileDownload(log_path)
-    tabs.append(
-        (
-            name,
-            pn.Column(
-                pn.Row(terminal, align="center"),
-                pn.Row(downloader, align="center"),
-            ),
-        )
-    )
-
-
-def page():
-    return pn.Column(pn.Tabs(*tabs))

requirements.txt

@@ -4,3 +4,7 @@ transformers
 numpy
 torch
 aiohttp
+python-jose[cryptography]
+apscheduler==3.11.0
+huggingface-hub==0.34.4
+datasets==4.0.0

scratch/test_dataset_to_dict.py

@@ -0,0 +1,15 @@
+import datasets as ds
+import pandas as pd
+import glob
+
+dataset = ds.Dataset.from_dict({})
+files = glob.glob("**/*.json", root_dir="data/logs", recursive=True)
+for file in files:
+    path = "data/logs/" + file
+    temp = ds.Dataset.from_json(path)
+    dataset = ds.concatenate_datasets([dataset, temp])  # type: ignore
+df = dataset.to_pandas()
+assert isinstance(df, pd.DataFrame)
+print(len(df))
+res = df.to_dict(orient="records")
+print(res)

scratch/test_glob.py

@@ -0,0 +1,6 @@
+import glob
+
+
+path = "data/logs"
+files = glob.glob("**/*.json", root_dir=path, recursive=True)
+print(files)

static/index.html

@@ -0,0 +1,566 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>日志管理</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 30px;
+            text-align: center;
+        }
+
+        .header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            font-weight: 300;
+        }
+
+        .header p {
+            opacity: 0.9;
+            font-size: 1.1rem;
+        }
+
+        .controls {
+            padding: 30px;
+            background: #f8f9fa;
+            border-bottom: 1px solid #e9ecef;
+        }
+
+        .search-container {
+            display: flex;
+            gap: 15px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        .search-input {
+            flex: 1;
+            min-width: 250px;
+            padding: 12px 20px;
+            border: 2px solid #e9ecef;
+            border-radius: 25px;
+            font-size: 16px;
+            transition: all 0.3s ease;
+        }
+
+        .search-input:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+
+        .btn {
+            padding: 12px 25px;
+            border: none;
+            border-radius: 25px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            display: inline-block;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+        }
+
+        .btn-secondary {
+            background: #6c757d;
+            color: white;
+        }
+
+        .btn-secondary:hover {
+            background: #5a6268;
+            transform: translateY(-2px);
+        }
+
+        .page-size-container {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-top: 20px;
+        }
+
+        .page-size-container label {
+            font-weight: 500;
+            color: #495057;
+        }
+
+        .page-size-container select {
+            padding: 8px 15px;
+            border: 2px solid #e9ecef;
+            border-radius: 8px;
+            font-size: 14px;
+            background: white;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .page-size-container select:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+
+        .content {
+            padding: 30px;
+        }
+
+        .log-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 30px;
+            background: white;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+
+        .log-table th {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 15px;
+            text-align: left;
+            font-weight: 500;
+        }
+
+        .log-table td {
+            padding: 15px;
+            border-bottom: 1px solid #e9ecef;
+            vertical-align: middle;
+        }
+
+        .log-table tr:hover {
+            background: #f8f9fa;
+        }
+
+        .log-table tr:last-child td {
+            border-bottom: none;
+        }
+
+        .username {
+            font-weight: 600;
+            color: #495057;
+        }
+
+        .token {
+            font-family: 'Courier New', monospace;
+            background: #f8f9fa;
+            padding: 8px 12px;
+            border-radius: 4px;
+            font-size: 0.85rem;
+            color: #6c757d;
+            word-break: break-all;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            border: 1px solid #e9ecef;
+        }
+
+        .token:hover {
+            background: #e9ecef;
+            border-color: #667eea;
+        }
+
+        .token::after {
+            content: "点击复制";
+            position: absolute;
+            top: -30px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: #333;
+            color: white;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+            white-space: nowrap;
+        }
+
+        .token:hover::after {
+            opacity: 1;
+        }
+
+        .copy-success {
+            background: #d4edda !important;
+            border-color: #28a745 !important;
+            color: #155724 !important;
+        }
+
+        .content {
+            word-wrap: break-word;
+            line-height: 1.4;
+        }
+
+
+
+        .timestamp {
+            color: #6c757d;
+            font-size: 0.9rem;
+        }
+
+        .pagination {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 20px;
+            margin-top: 30px;
+            flex-wrap: wrap;
+        }
+
+        .pagination .page-size-container {
+            margin: 0;
+        }
+
+        .pagination-controls {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .pagination button {
+            padding: 8px 12px;
+            border: 1px solid #dee2e6;
+            background: white;
+            cursor: pointer;
+            border-radius: 5px;
+            transition: all 0.3s ease;
+        }
+
+        .pagination button:hover:not(:disabled) {
+            background: #667eea;
+            color: white;
+            border-color: #667eea;
+        }
+
+        .pagination button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .pagination .active {
+            background: #667eea;
+            color: white;
+            border-color: #667eea;
+        }
+
+        .page-info {
+            color: #6c757d;
+            margin: 0 15px;
+        }
+
+        .no-data {
+            text-align: center;
+            padding: 60px 20px;
+            color: #6c757d;
+        }
+
+        .no-data i {
+            font-size: 4rem;
+            margin-bottom: 20px;
+            opacity: 0.5;
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                margin: 10px;
+                border-radius: 10px;
+            }
+
+            .header {
+                padding: 20px;
+            }
+
+            .header h1 {
+                font-size: 2rem;
+            }
+
+            .controls {
+                padding: 20px;
+            }
+
+            .search-container {
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .search-input {
+                min-width: auto;
+            }
+
+            .stats {
+                justify-content: center;
+            }
+
+            .content {
+                padding: 20px;
+            }
+
+            .log-table {
+                font-size: 0.9rem;
+            }
+
+            .log-table th,
+            .log-table td {
+                padding: 10px 8px;
+            }
+
+            .error-content {
+                max-width: 200px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>日志管理系统</h1>
+        </div>
+
+        <div class="controls">
+            <div class="search-container">
+                <input type="text" id="searchInput" class="search-input" placeholder="搜索用户名...">
+                <button class="btn btn-primary" onclick="searchLogs()">搜索</button>
+                <button class="btn btn-secondary" onclick="refreshLogs()">刷新</button>
+            </div>
+
+
+        </div>
+
+        <div class="content">
+            <table class="log-table" id="logTable">
+                <thead>
+                    <tr>
+                        <th>Type</th>
+                        <th>Source</th>
+                        <th>UID</th>
+                        <th>Username</th>
+                        <th>Token</th>
+                        <th>Content</th>
+                        <th>Timestamp</th>
+                    </tr>
+                </thead>
+                <tbody id="logTableBody">
+                </tbody>
+            </table>
+
+            <div class="no-data" id="noData" style="display: none;">
+                <div>📋</div>
+                <h3>暂无数据</h3>
+                <p>没有找到匹配的错误日志</p>
+            </div>
+
+            <div class="pagination" id="pagination">
+                <div class="page-size-container">
+                    <label for="pageSize">每页显示：</label>
+                    <select id="pageSize" onchange="changePageSize()">
+                        <option value="20" selected>20条</option>
+                        <option value="40">40条</option>
+                        <option value="60">60条</option>
+                    </select>
+                </div>
+                <div class="pagination-controls">
+                    <button onclick="goToPage(1)" id="firstBtn">首页</button>
+                    <button onclick="goToPage(currentPage - 1)" id="prevBtn">上一页</button>
+                    <span class="page-info" id="pageInfo">第 1 页，共 1 页</span>
+                    <button onclick="goToPage(currentPage + 1)" id="nextBtn">下一页</button>
+                    <button onclick="goToPage(totalPages)" id="lastBtn">末页</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const data = {{ data | tojson}};
+        // 分页配置
+        let currentPage = 1;
+        let pageSize = 20;
+        let totalPages = 1;
+        let filteredLogs = [...data];
+        let searchTerm = '';
+
+        // 初始化页面
+        function initPage() {
+            renderLogs();
+            updatePagination();
+        }
+
+        // 改变每页显示数量
+        function changePageSize() {
+            const select = document.getElementById('pageSize');
+            pageSize = parseInt(select.value);
+            currentPage = 1; // 重置到第一页
+            renderLogs();
+            updatePagination();
+        }
+
+        // 渲染日志表格
+        function renderLogs() {
+            const tbody = document.getElementById('logTableBody');
+            const noData = document.getElementById('noData');
+            const table = document.getElementById('logTable');
+
+            if (filteredLogs.length === 0) {
+                table.style.display = 'none';
+                noData.style.display = 'block';
+                return;
+            }
+
+            table.style.display = 'table';
+            noData.style.display = 'none';
+
+            totalPages = Math.ceil(filteredLogs.length / pageSize);
+            const startIndex = (currentPage - 1) * pageSize;
+            const endIndex = startIndex + pageSize;
+            const currentLogs = filteredLogs.slice(startIndex, endIndex);
+
+            tbody.innerHTML = '';
+
+            currentLogs.forEach(log => {
+                const row = document.createElement('tr');
+                row.innerHTML = `
+                    <td>
+                        <div class="type">${log.type}</div>
+                    </td>
+                    <td>
+                        <div class="uid">${log.source}</div>
+                    </td>
+                    <td>
+                        <div class="uid">${log.uid}</div>
+                    </td>
+                    <td>
+                        <div class="username">${log.username}</div>
+                    </td>
+                    <td>
+                        <div class="token" onclick="copyToken('${log.token}')" title="点击复制">${log.token}</div>
+                    </td>
+                    <td>
+                        <div class="content">${log.content}</div>
+                    </td>
+                    <td>
+                        <div class="timestamp">${log.timestamp}</div>
+                    </td>
+                `;
+                tbody.appendChild(row);
+            });
+        }
+
+        // 复制token到剪贴板
+        function copyToken(token) {
+            navigator.clipboard.writeText(token).then(function() {
+                // 显示复制成功的视觉反馈
+                const tokenElements = document.querySelectorAll('.token');
+                tokenElements.forEach(el => {
+                    if (el.textContent === token) {
+                        el.classList.add('copy-success');
+                        setTimeout(() => {
+                            el.classList.remove('copy-success');
+                        }, 1000);
+                    }
+                });
+            }).catch(function(err) {
+                console.error('复制失败: ', err);
+                // 降级方案：使用旧的复制方法
+                const textArea = document.createElement('textarea');
+                textArea.value = token;
+                document.body.appendChild(textArea);
+                textArea.select();
+                document.execCommand('copy');
+                document.body.removeChild(textArea);
+            });
+        }
+
+        // 更新分页控件
+        function updatePagination() {
+            const pageInfo = document.getElementById('pageInfo');
+            const firstBtn = document.getElementById('firstBtn');
+            const prevBtn = document.getElementById('prevBtn');
+            const nextBtn = document.getElementById('nextBtn');
+            const lastBtn = document.getElementById('lastBtn');
+
+            pageInfo.textContent = `第 ${currentPage} 页，共 ${totalPages} 页`;
+
+            firstBtn.disabled = currentPage === 1;
+            prevBtn.disabled = currentPage === 1;
+            nextBtn.disabled = currentPage === totalPages;
+            lastBtn.disabled = currentPage === totalPages;
+        }
+
+        // 跳转到指定页面
+        function goToPage(page) {
+            if (page < 1 || page > totalPages) return;
+            currentPage = page;
+            renderLogs();
+            updatePagination();
+        }
+
+        // 搜索日志
+        function searchLogs() {
+            searchTerm = document.getElementById('searchInput').value.trim();
+            
+            if (searchTerm === '') {
+                filteredLogs = [...data];
+            } else {
+                filteredLogs = data.filter(log => 
+                    log.username.toLowerCase().includes(searchTerm.toLowerCase())
+                );
+            }
+
+            currentPage = 1;
+            renderLogs();
+            updatePagination();
+        }
+
+        // 刷新日志
+        function refreshLogs() {
+            // 模拟刷新数据
+            console.log('刷新日志数据...');
+            initPage();
+        }
+
+        // 监听回车键搜索
+        document.getElementById('searchInput').addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                searchLogs();
+            }
+        });
+
+        // 页面加载完成后初始化
+        document.addEventListener('DOMContentLoaded', initPage);
+    </script>
+</body>
+</html>

utils.py

@@ -1,7 +1,63 @@
 from datetime import datetime
 from zoneinfo import ZoneInfo
+from typing import Any
+from jose import jwt
+import hashlib
+import json
+import uuid
+import os
+
+
+SECRET_KEY = os.environ.get("SECRET_KEY")
 
 
 def beijing():
     """get beijing time"""
     return datetime.now(tz=ZoneInfo("Asia/Shanghai"))
+
+
+def decode_jwt(token: str) -> dict[str, Any]:
+    """get payload in the jwt token"""
+    assert SECRET_KEY, "Please set the environment variable SECRET_KEY"
+    return jwt.decode(token, SECRET_KEY, algorithms=["HS256"])
+
+
+def parse_token(token: str | None) -> tuple[str, str]:
+    """parse user token to get uid and username
+
+    :param token (str): jwt token
+    :return (str, str): (uid, username)
+    """
+    if not token:
+        uid, username = "no_uid", "Anonymous"
+    else:
+        payload: dict = decode_jwt(token)
+        uid = payload.get("uid", "no_uid")
+        username = payload.get("username", "Anonymous")
+    print(f"UID: {uid}")
+    print(f"Username: {username}")
+    return uid, username
+
+
+def md5(text: list[str | bytes] | str | bytes | None = None) -> str:
+    """generate the md5 hash code of the given text, if text is None,
+    return a random md5"""
+    code = hashlib.md5()
+    if text:
+        if isinstance(text, str):
+            text = text.encode("utf-8")
+            code.update(text)
+        elif isinstance(text, list):
+            for t in text:
+                if isinstance(t, str):
+                    t = t.encode("utf-8")
+                code.update(t)
+        else:
+            code.update(text)
+    else:
+        code.update(uuid.uuid4().bytes)
+    return code.hexdigest()
+
+
+def json_to_str(obj: dict | list) -> str:
+    return json.dumps(obj, separators=(",", ":"))