From 6868eebc621fc6235cd10af7de36d108d5d6a201 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=90=A6?= <liqiworkers@gmail.com>
Date: Tue, 23 Jun 2026 13:17:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |   1 +
 .mimocode/plans/1782182188576-happy-harbor.md | 120 +++
 AGENTS.md                                     |  31 +
 index.html                                    | 935 +++++++++++++++---
 main.go                                       | 502 +++++++++-
 pwd.json                                      |   4 +
 6 files changed, 1411 insertions(+), 182 deletions(-)
 create mode 100644 .mimocode/plans/1782182188576-happy-harbor.md
 create mode 100644 AGENTS.md
 create mode 100644 pwd.json

diff --git a/.gitignore b/.gitignore
index a6900b8..72adc2d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 /.opencode/
 /signature-server
+/uploads/
diff --git a/.mimocode/plans/1782182188576-happy-harbor.md b/.mimocode/plans/1782182188576-happy-harbor.md
new file mode 100644
index 0000000..f705f7a
--- /dev/null
+++ b/.mimocode/plans/1782182188576-happy-harbor.md
@@ -0,0 +1,120 @@
+# 计划：签名列表 + 登录 + 下载功能
+
+## 背景
+
+当前系统：单文件 Go 服务器 (`main.go`)，内嵌 `index.html` 前端。签名文件保存在 `uploads/<姓名>/<姓名>+<日期>.png`。没有认证、没有列表、没有下载。
+
+**目标**：添加登录验证功能，在登录后可以查看签名列表并下载，同时保持原有签名功能不变。
+
+---
+
+## 架构决策
+
+**保持单文件方式**：所有改动都在 `main.go`（后端路由）和 `index.html`（前端单页应用）中完成。运行时只需额外创建 `pwd.json` 文件。
+
+**认证方式**：简单的 Token 认证 —— 后端登录成功后生成 Token，前端存入 `localStorage`，请求受保护路由时携带 Token。无需复杂的 Session 框架。
+
+**文件存储不变**：签名文件仍保存在 `uploads/<姓名>/<姓名>+<日期>.png`，列表接口扫描该目录。
+
+---
+
+## 具体改动
+
+### 1. 后端 (`main.go`)
+
+#### 新增路由：
+| 路由 | 方法 | 说明 |
+|------|------|------|
+| `/login` | POST | 根据 `pwd.json` 验证账号密码，返回 `{success, token}` |
+| `/api/signatures` | GET | 列出所有签名文件（需要有效 Token） |
+| `/download` | GET | 下载签名图片（需要有效 Token，`?path=` 参数） |
+| `/api/check-auth` | GET | 验证 Token 是否有效，返回 `{authenticated}` |
+
+#### 实现细节：
+
+**`pwd.json` 加载**：
+- 从可执行文件目录读取：`filepath.Join(filepath.Dir(os.Args[0]), "pwd.json")`
+- 如果找不到则从当前工作目录读取
+- 格式：`{"account": "liqi", "password": "qiqi991012"}`
+- 启动时加载一次到内存中
+
+**Token 系统**：
+- 登录成功后生成 Token = base64(账号 + 时间戳)
+- 用 `map[string]string` 存储有效 Token（Token → 账号），带过期时间
+- Token 24 小时后过期
+- 内存存储即可，无需持久化
+
+**`/api/signatures` 处理函数**：
+- 遍历 `uploads/` 目录，收集所有 `.png` 文件
+- 返回 JSON 数组：`[{name, path, date, size}]`
+- 按修改时间倒序排列
+- 需要 `Authorization: Bearer <token>` 请求头
+
+**`/download` 处理函数**：
+- 接受 `?path=uploads/<姓名>/<文件名>.png` 查询参数
+- 验证路径在 `uploads/` 目录内（防止路径穿越攻击）
+- 流式返回文件，设置 `Content-Disposition: attachment` 头
+- 需要有效 Token
+
+### 2. 前端 (`index.html`)
+
+#### 核心逻辑变更：
+**默认进入签名页面（无需登录）**，只有点击"签名列表"时才检查登录状态。
+
+#### 新增区域（SPA 风格，无页面刷新）：
+
+**登录视图** (`#loginView`)：
+- 居中卡片，包含账号密码输入框
+- "登录"按钮
+- 登录失败显示错误提示
+- 登录成功后自动跳转到签名列表
+
+**签名列表视图** (`#listView`)：
+- 卡片列表显示所有签名
+- 列：签署人、日期、文件大小、下载按钮
+- "返回签名"按钮回到签名页面
+- 空状态显示"暂无签名记录"
+
+**导航栏**：
+- "签名列表"按钮始终可见
+- 点击时检查登录状态，未登录则跳转登录页
+- 登录后显示"注销"按钮
+
+#### 状态管理：
+- `currentView`：'sign' | 'login' | 'list'
+- `authToken`：存储在 `localStorage`
+- 通过显示/隐藏区域切换视图
+
+### 3. `pwd.json`（运行时文件）
+
+```json
+{
+  "account": "liqi",
+  "password": "qiqi991012"
+}
+```
+
+放在可执行文件旁边（或 `go run` 时的工作目录）。
+
+---
+
+## 修改文件清单
+
+| 文件 | 操作 | 范围 |
+|------|------|------|
+| `main.go` | 编辑 | 添加路由、认证逻辑、文件扫描 |
+| `index.html` | 编辑 | 添加登录视图、列表视图、导航、认证状态 |
+| `pwd.json` | 新建 | 账号密码（运行时） |
+
+---
+
+## 验证步骤
+
+1. **启动服务器**：`go run main.go`
+2. **测试默认进入**：打开 `http://localhost:10081`，直接进入签名页面（无需登录）
+3. **测试签名**：签名并提交，验证保存到 `uploads/`
+4. **测试列表入口**：点击"签名列表"按钮，验证跳转到登录页面
+5. **测试登录**：输入账号密码，登录后跳转到签名列表
+6. **测试下载**：点击下载按钮，验证 PNG 文件正确下载
+7. **测试返回**：点击"返回签名"，验证回到签名页面
+8. **测试注销**：点击"注销"，再次点击"签名列表"需重新登录
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..27e17c3
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,31 @@
+# AGENTS.md
+
+## Project Overview
+
+Single-file Go HTTP server for electronic signature capture and archiving. Frontend HTML is embedded into the Go binary via `//go:embed`.
+
+## Build & Run
+
+```bash
+# Local development
+go run main.go
+# Server starts on port 10081
+
+# Cross-compile (Windows/Linux)
+build.bat
+# Outputs to dist/ with timestamped filenames
+```
+
+## Architecture
+
+- `main.go` — Entire backend. Embeds `index.html`, serves it at `/`, handles `POST /upload` to save base64 PNGs to `uploads/<name>/<name>+<date>.png`
+- `index.html` — Standalone frontend (Tailwind CDN, Phosphor Icons, canvas-based signature)
+- `uploads/` — Runtime signature storage (gitignored)
+
+## Key Constraints
+
+- No `go.mod` present — initialize one if adding dependencies
+- No tests exist
+- Frontend uses CDN resources (Tailwind, Phosphor Icons) — no local build step
+- Upload handler validates name non-empty, strips base64 prefix, saves as PNG
+- Port is hardcoded to `:10081`
diff --git a/index.html b/index.html
index d7abf39..391c035 100644
--- a/index.html
+++ b/index.html
@@ -5,16 +5,18 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>电子签名归档系统</title>
+    <!-- Tailwind CSS CDN -->
     <script src="https://cdn.tailwindcss.com"></script>
-    <!-- 引入 Phosphor Icons (更现代的图标库，比 FontAwesome 更有设计感) -->
+    <!-- Phosphor Icons 图标库 -->
     <script src="https://unpkg.com/@phosphor-icons/web"></script>
     <script>
+        // Tailwind 配置
         tailwind.config = {
-            darkMode: 'class', // 手动控制暗色模式
+            darkMode: 'class', // 暗色模式手动控制
             theme: {
                 extend: {
                     colors: {
-                        // 使用 Zinc 色系打造冷峻的高级感
+                        // Zinc 色系
                         gray: {
                             50: '#fafafa',
                             100: '#f4f4f5',
@@ -28,15 +30,14 @@
                             900: '#18181b',
                             950: '#09090b',
                         },
-                        // 强调色：克制的深黑/亮白
                         primary: {
-                            DEFAULT: '#18181b', // Zinc 900
-                            dark: '#fafafa',    // Zinc 50
+                            DEFAULT: '#18181b',
+                            dark: '#fafafa',
                         }
                     },
                     fontFamily: {
                         sans: ['Inter', '-apple-system', 'system-ui', 'sans-serif'],
-                        mono: ['JetBrains Mono', 'Menlo', 'monospace'], // 增加代码感
+                        mono: ['JetBrains Mono', 'Menlo', 'monospace'],
                     },
                     boxShadow: {
                         'paper': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)',
@@ -49,10 +50,11 @@
     </script>
     <style type="text/tailwindcss">
         @layer utilities {
+            /* 签名画布样式 */
             .signature-canvas {
                 @apply w-full h-full cursor-crosshair touch-none;
             }
-            /* 隐藏滚动条但保留功能 */
+            /* 隐藏滚动条 */
             .no-scrollbar::-webkit-scrollbar {
                 display: none;
             }
@@ -60,13 +62,17 @@
                 -ms-overflow-style: none;
                 scrollbar-width: none;
             }
-            /* 自定义 Range 滑块 - 极简风格 */
+            /* 自定义滑块样式 */
             input[type=range] {
                 @apply h-1 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer;
             }
             input[type=range]::-webkit-slider-thumb {
                 @apply appearance-none w-3 h-3 rounded-full bg-gray-900 dark:bg-gray-100 shadow-sm transition-transform hover:scale-125;
             }
+            /* 视图切换动画 */
+            .view-hidden {
+                display: none !important;
+            }
         }
         body {
             overscroll-behavior: none;
@@ -76,16 +82,34 @@
 
 <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-sans min-h-screen flex flex-col transition-colors duration-300 selection:bg-gray-900 selection:text-white dark:selection:bg-white dark:selection:text-gray-900">
 
-<!-- 顶部极简导航 -->
+<!-- ================================================================== -->
+<!-- 顶部导航栏 -->
+<!-- ================================================================== -->
 <nav class="fixed top-0 w-full z-40 bg-gray-50/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 transition-colors duration-300">
     <div class="max-w-3xl mx-auto px-6 h-14 flex items-center justify-between">
+        <!-- 左侧：Logo 和标题 -->
         <div class="flex items-center gap-3">
             <div class="w-2 h-2 bg-gray-900 dark:bg-gray-100 rounded-full"></div>
             <h1 class="font-semibold text-sm tracking-wide uppercase text-gray-900 dark:text-gray-100">电子签名<span class="text-gray-400 dark:text-gray-600 font-light">.go</span></h1>
         </div>
 
+        <!-- 右侧：导航按钮 -->
         <div class="flex items-center gap-4">
-            <span class="text-[10px] font-mono text-gray-400 hidden sm:block">服务状态: 在线</span>
+            <!-- 签名列表按钮（登录后显示） -->
+            <button id="navToList" class="hidden items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors">
+                <i class="ph ph-list text-base"></i>
+                <span class="hidden sm:inline">签名列表</span>
+            </button>
+            <!-- 返回签名按钮（列表页面显示） -->
+            <button id="navToSign" class="hidden items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors">
+                <i class="ph ph-pencil-simple text-base"></i>
+                <span class="hidden sm:inline">签名</span>
+            </button>
+            <!-- 登录/注销按钮 -->
+            <button id="authBtn" class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors">
+                <i class="ph ph-sign-in text-base" id="authIcon"></i>
+                <span id="authText">登录</span>
+            </button>
             <!-- 主题切换按钮 -->
             <button id="themeToggle" class="p-2 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors rounded-full focus:outline-none">
                 <i class="ph ph-moon text-lg dark:hidden"></i>
@@ -95,99 +119,225 @@
     </div>
 </nav>
 
-<!-- 主内容区 -->
-<main class="flex-grow flex flex-col items-center pt-24 pb-12 px-4 sm:px-6 w-full max-w-3xl mx-auto gap-8">
-
-    <!-- 头部信息输入 -->
-    <div class="w-full space-y-6">
-        <div class="flex flex-col sm:flex-row items-start sm:items-end justify-between gap-4">
-            <div class="w-full sm:w-2/3 space-y-1">
-                <label for="signerName" class="block text-xs font-mono text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                    签署人姓名
-                </label>
-                <input type="text" id="signerName"
-                       class="w-full bg-transparent border-b-2 border-gray-200 dark:border-gray-700 py-2 text-xl font-medium text-gray-900 dark:text-gray-100 focus:border-gray-900 dark:focus:border-gray-100 outline-none transition-colors placeholder-gray-300 dark:placeholder-gray-600 rounded-none"
-                       placeholder="请输入您的真实姓名">
-            </div>
-            <div class="font-mono text-xs text-gray-400 dark:text-gray-500 text-right w-full sm:w-auto">
-                <div id="currentDate">2026-01-15</div>
-            </div>
-        </div>
-    </div>
-
-    <!-- 签名区域容器 -->
-    <div class="w-full relative group">
-
-        <!-- 工具栏 (悬浮式/极简) -->
-        <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
-            <div class="flex items-center gap-6 bg-white dark:bg-gray-800 px-4 py-2 rounded-full border border-gray-200 dark:border-gray-700 shadow-sm transition-colors duration-300">
-                <!-- 粗细 -->
-                <div class="flex items-center gap-2" title="笔触粗细">
-                    <i class="ph ph-pencil-simple text-gray-400 text-sm"></i>
-                    <input type="range" id="strokeWidth" min="1" max="8" value="2" class="w-16">
+<!-- ================================================================== -->
+<!-- 登录视图 -->
+<!-- ================================================================== -->
+<div id="loginView" class="view-hidden">
+    <main class="flex-grow flex items-center justify-center pt-14 pb-12 px-4">
+        <div class="w-full max-w-sm">
+            <!-- 登录卡片 -->
+            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-8">
+                <!-- 标题 -->
+                <div class="text-center mb-8">
+                    <div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i class="ph ph-lock-key text-xl text-gray-600 dark:text-gray-400"></i>
+                    </div>
+                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">登录系统</h2>
+                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">请输入账号密码以访问签名列表</p>
                 </div>
 
-                <div class="w-px h-3 bg-gray-200 dark:bg-gray-600"></div>
+                <!-- 登录表单 -->
+                <form id="loginForm" class="space-y-5">
+                    <!-- 账号输入框 -->
+                    <div>
+                        <label for="loginAccount" class="block text-xs font-mono text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
+                            账号
+                        </label>
+                        <input type="text" id="loginAccount"
+                               class="w-full bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 focus:border-gray-900 dark:focus:border-gray-100 outline-none transition-colors placeholder-gray-400 dark:placeholder-gray-500"
+                               placeholder="请输入账号"
+                               autocomplete="username">
+                    </div>
 
-                <!-- 颜色 (仅提供黑蓝红) -->
+                    <!-- 密码输入框 -->
+                    <div>
+                        <label for="loginPassword" class="block text-xs font-mono text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
+                            密码
+                        </label>
+                        <input type="password" id="loginPassword"
+                               class="w-full bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 focus:border-gray-900 dark:focus:border-gray-100 outline-none transition-colors placeholder-gray-400 dark:placeholder-gray-500"
+                               placeholder="请输入密码"
+                               autocomplete="current-password">
+                    </div>
+
+                    <!-- 错误提示 -->
+                    <div id="loginError" class="hidden text-sm text-red-500 dark:text-red-400 bg-red-50 dark:bg-red-900/20 px-4 py-2 rounded-lg">
+                        <span id="loginErrorText"></span>
+                    </div>
+
+                    <!-- 登录按钮 -->
+                    <button type="submit" id="loginSubmitBtn"
+                            class="w-full py-2.5 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-sm font-medium rounded-lg shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 flex items-center justify-center gap-2">
+                        <i class="ph ph-sign-in"></i>
+                        <span>登录</span>
+                    </button>
+                </form>
+            </div>
+        </div>
+    </main>
+</div>
+
+<!-- ================================================================== -->
+<!-- 签名视图 -->
+<!-- ================================================================== -->
+<div id="signView">
+    <main class="flex-grow flex flex-col items-center pt-24 pb-12 px-4 sm:px-6 w-full max-w-3xl mx-auto gap-8">
+
+        <!-- 头部信息输入 -->
+        <div class="w-full space-y-6">
+            <div class="flex flex-col sm:flex-row items-start sm:items-end justify-between gap-4">
+                <div class="w-full sm:w-2/3 space-y-1">
+                    <label for="signerName" class="block text-xs font-mono text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                        签署人姓名
+                    </label>
+                    <input type="text" id="signerName"
+                           class="w-full bg-transparent border-b-2 border-gray-200 dark:border-gray-700 py-2 text-xl font-medium text-gray-900 dark:text-gray-100 focus:border-gray-900 dark:focus:border-gray-100 outline-none transition-colors placeholder-gray-300 dark:placeholder-gray-600 rounded-none"
+                           placeholder="请输入您的真实姓名">
+                </div>
+                <div class="font-mono text-xs text-gray-400 dark:text-gray-500 text-right w-full sm:w-auto">
+                    <div id="currentDate">2026-01-15</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 签名区域容器 -->
+        <div class="w-full relative group">
+
+            <!-- 工具栏 -->
+            <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
+                <!-- 左侧：笔触设置 -->
+                <div class="flex items-center gap-6 bg-white dark:bg-gray-800 px-4 py-2 rounded-full border border-gray-200 dark:border-gray-700 shadow-sm transition-colors duration-300">
+                    <!-- 笔触粗细 -->
+                    <div class="flex items-center gap-2" title="笔触粗细">
+                        <i class="ph ph-pencil-simple text-gray-400 text-sm"></i>
+                        <input type="range" id="strokeWidth" min="1" max="8" value="2" class="w-16">
+                    </div>
+
+                    <div class="w-px h-3 bg-gray-200 dark:bg-gray-600"></div>
+
+                    <!-- 颜色选择 -->
+                    <div class="flex items-center gap-2">
+                        <button class="color-btn w-4 h-4 rounded-full bg-black border border-gray-200 ring-offset-2 ring-gray-900 transition-all hover:scale-110 active-color" data-color="#000000"></button>
+                        <button class="color-btn w-4 h-4 rounded-full bg-blue-600 border border-transparent ring-offset-2 ring-blue-600 transition-all hover:scale-110" data-color="#2563EB"></button>
+                        <button class="color-btn w-4 h-4 rounded-full bg-red-600 border border-transparent ring-offset-2 ring-red-600 transition-all hover:scale-110" data-color="#DC2626"></button>
+                        <input type="hidden" id="strokeColor" value="#000000">
+                    </div>
+                </div>
+
+                <!-- 右侧：操作按钮 -->
                 <div class="flex items-center gap-2">
-                    <button class="color-btn w-4 h-4 rounded-full bg-black border border-gray-200 ring-offset-2 ring-gray-900 transition-all hover:scale-110 active-color" data-color="#000000"></button>
-                    <button class="color-btn w-4 h-4 rounded-full bg-blue-600 border border-transparent ring-offset-2 ring-blue-600 transition-all hover:scale-110" data-color="#2563EB"></button>
-                    <button class="color-btn w-4 h-4 rounded-full bg-red-600 border border-transparent ring-offset-2 ring-red-600 transition-all hover:scale-110" data-color="#DC2626"></button>
-                    <input type="hidden" id="strokeColor" value="#000000">
+                    <button id="undoBtn" class="p-2 text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-30 transition-colors" disabled title="撤销">
+                        <i class="ph ph-arrow-u-up-left text-lg"></i>
+                    </button>
+                    <button id="redoBtn" class="p-2 text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-30 transition-colors" disabled title="重做">
+                        <i class="ph ph-arrow-u-up-right text-lg"></i>
+                    </button>
+                    <button id="clearBtn" class="ml-2 px-3 py-1.5 text-xs font-medium text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md transition-colors">
+                        清空
+                    </button>
                 </div>
             </div>
 
-            <div class="flex items-center gap-2">
-                <button id="undoBtn" class="p-2 text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-30 transition-colors" disabled title="撤销">
-                    <i class="ph ph-arrow-u-up-left text-lg"></i>
-                </button>
-                <button id="redoBtn" class="p-2 text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-30 transition-colors" disabled title="重做">
-                    <i class="ph ph-arrow-u-up-right text-lg"></i>
-                </button>
-                <button id="clearBtn" class="ml-2 px-3 py-1.5 text-xs font-medium text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md transition-colors">
-                    清空
-                </button>
+            <!-- 画布区域 -->
+            <div class="relative w-full aspect-[16/9] sm:aspect-[2/1] bg-white rounded-lg shadow-paper hover:shadow-paper-hover dark:shadow-dark-glow transition-all duration-300 overflow-hidden border border-gray-200 dark:border-gray-700/50 dark:brightness-90">
+                <!-- 网格背景 -->
+                <div class="absolute inset-0 opacity-[0.03] pointer-events-none"
+                     style="background-image: radial-gradient(#000 1px, transparent 1px); background-size: 20px 20px;">
+                </div>
+                <!-- 水印提示 -->
+                <div id="watermark" class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none transition-opacity duration-300 select-none text-gray-300 dark:text-gray-200">
+                    <span class="text-xs font-mono border border-dashed border-gray-300 px-3 py-1 rounded text-gray-400">在此区域签名</span>
+                </div>
+                <!-- 签名画布 -->
+                <canvas id="signatureCanvas" class="signature-canvas relative z-10 mix-blend-multiply"></canvas>
             </div>
         </div>
 
-        <!-- 画布 (纸张隐喻) -->
-        <!-- 关键设计：即使在Dark Mode下，画布也是亮的(off-white)，模拟桌面上的纸张，确保黑色笔迹可见且符合物理直觉 -->
-        <div class="relative w-full aspect-[16/9] sm:aspect-[2/1] bg-white rounded-lg shadow-paper hover:shadow-paper-hover dark:shadow-dark-glow transition-all duration-300 overflow-hidden border border-gray-200 dark:border-gray-700/50 dark:brightness-90">
-            <!-- 网格背景 (可选，增加专业感) -->
-            <div class="absolute inset-0 opacity-[0.03] pointer-events-none"
-                 style="background-image: radial-gradient(#000 1px, transparent 1px); background-size: 20px 20px;">
+        <!-- 底部操作栏 -->
+        <div class="w-full flex items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-800">
+            <div class="flex items-center gap-2 text-xs text-gray-400">
+                <i class="ph ph-shield-check text-base"></i>
+                <span class="hidden sm:inline">已启用加密传输 & 安全存储</span>
             </div>
 
-            <div id="watermark" class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none transition-opacity duration-300 select-none text-gray-300 dark:text-gray-200">
-                <span class="text-xs font-mono border border-dashed border-gray-300 px-3 py-1 rounded text-gray-400">在此区域签名</span>
+            <button id="saveToServerBtn" class="group relative px-6 py-2.5 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-sm font-medium rounded-lg shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 overflow-hidden disabled:opacity-70 disabled:cursor-not-allowed">
+                    <span class="relative z-10 flex items-center gap-2">
+                        <i class="ph ph-floppy-disk"></i>
+                        确认归档
+                    </span>
+                <div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
+            </button>
+        </div>
+
+    </main>
+</div>
+
+<!-- ================================================================== -->
+<!-- 签名列表视图 -->
+<!-- ================================================================== -->
+<div id="listView" class="view-hidden">
+    <main class="flex-grow flex flex-col items-center pt-24 pb-12 px-4 sm:px-6 w-full max-w-3xl mx-auto gap-6">
+
+        <!-- 页面标题 -->
+        <div class="w-full flex items-center justify-between">
+            <div>
+                <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">签名列表</h2>
+                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">共 <span id="signatureCount">0</span> 条签名记录</p>
             </div>
-
-            <canvas id="signatureCanvas" class="signature-canvas relative z-10 mix-blend-multiply"></canvas>
+            <button id="refreshListBtn" class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors">
+                <i class="ph ph-arrow-clockwise text-base"></i>
+                <span>刷新</span>
+            </button>
         </div>
 
-    </div>
-
-    <!-- 底部操作栏 -->
-    <div class="w-full flex items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-800">
-        <div class="flex items-center gap-2 text-xs text-gray-400">
-            <i class="ph ph-shield-check text-base"></i>
-            <span class="hidden sm:inline">已启用加密传输 & 安全存储</span>
+        <!-- 签名卡片容器 -->
+        <div id="signatureList" class="w-full space-y-4">
+            <!-- 动态生成签名卡片 -->
         </div>
 
-        <button id="saveToServerBtn" class="group relative px-6 py-2.5 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-sm font-medium rounded-lg shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 overflow-hidden disabled:opacity-70 disabled:cursor-not-allowed">
-                <span class="relative z-10 flex items-center gap-2">
-                    <i class="ph ph-floppy-disk"></i>
-                    确认归档
-                </span>
-            <!-- 按钮Hover光效 -->
-            <div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
+        <!-- 空状态 -->
+        <div id="emptyState" class="hidden w-full flex flex-col items-center justify-center py-16 text-center">
+            <div class="w-16 h-16 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-4">
+                <i class="ph ph-file-dashed text-2xl text-gray-400 dark:text-gray-500"></i>
+            </div>
+            <p class="text-gray-500 dark:text-gray-400 text-sm">暂无签名记录</p>
+            <p class="text-gray-400 dark:text-gray-500 text-xs mt-1">完成签名后将显示在此处</p>
+        </div>
+
+        <!-- 加载状态 -->
+        <div id="loadingState" class="hidden w-full flex flex-col items-center justify-center py-16">
+            <i class="ph ph-spinner animate-spin text-2xl text-gray-400"></i>
+            <p class="text-gray-500 dark:text-gray-400 text-sm mt-4">加载中...</p>
+        </div>
+
+    </main>
+</div>
+
+<!-- ================================================================== -->
+<!-- 签名预览模态框 -->
+<!-- ================================================================== -->
+<div id="previewModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/80 backdrop-blur-sm">
+    <div class="relative max-w-4xl w-full mx-4">
+        <!-- 关闭按钮 -->
+        <button id="closePreviewBtn" class="absolute -top-12 right-0 p-2 text-white/70 hover:text-white transition-colors">
+            <i class="ph ph-x text-2xl"></i>
         </button>
+        <!-- 图片容器 -->
+        <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl overflow-hidden">
+            <div id="previewHeader" class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+                <h3 id="previewName" class="text-lg font-semibold text-gray-900 dark:text-gray-100"></h3>
+                <p id="previewDate" class="text-sm text-gray-500 dark:text-gray-400 mt-1"></p>
+            </div>
+            <div class="p-4">
+                <img id="previewImage" src="" alt="签名预览" class="w-full max-h-[70vh] object-contain bg-gray-50 dark:bg-gray-800 rounded-lg">
+            </div>
+        </div>
     </div>
+</div>
 
-</main>
-
+<!-- ================================================================== -->
 <!-- Toast 通知 -->
+<!-- ================================================================== -->
 <div id="toast" class="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 transition-all duration-300 opacity-0 translate-y-4 pointer-events-none">
     <div class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-4 py-3 rounded-lg shadow-2xl flex items-center gap-3 min-w-[300px] border border-gray-800 dark:border-gray-200">
         <div id="toastIcon" class="text-lg"></div>
@@ -198,33 +348,44 @@
     </div>
 </div>
 
+<!-- ================================================================== -->
+<!-- JavaScript -->
+<!-- ================================================================== -->
 <script>
     document.addEventListener('DOMContentLoaded', function () {
-        // --- Dark Mode Logic ---
-        const themeToggle = document.getElementById('themeToggle');
+        // ==================================================================
+        // 全局状态
+        // ==================================================================
+        let authToken = localStorage.getItem('authToken') || ''; // 认证令牌
+        let currentView = 'sign'; // 当前视图：'login' | 'sign' | 'list'
+
+        // ==================================================================
+        // DOM 元素引用
+        // ==================================================================
         const html = document.documentElement;
+        const themeToggle = document.getElementById('themeToggle');
 
-        // 初始化：检查本地存储或系统偏好
-        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            html.classList.add('dark');
-        } else {
-            html.classList.remove('dark');
-        }
+        // 视图容器
+        const loginView = document.getElementById('loginView');
+        const signView = document.getElementById('signView');
+        const listView = document.getElementById('listView');
 
-        themeToggle.addEventListener('click', () => {
-            html.classList.toggle('dark');
-            if (html.classList.contains('dark')) {
-                localStorage.theme = 'dark';
-            } else {
-                localStorage.theme = 'light';
-            }
-        });
+        // 导航按钮
+        const navToList = document.getElementById('navToList');
+        const navToSign = document.getElementById('navToSign');
+        const authBtn = document.getElementById('authBtn');
+        const authIcon = document.getElementById('authIcon');
+        const authText = document.getElementById('authText');
 
-        // --- 基础设置 ---
-        const now = new Date();
-        document.getElementById('currentDate').textContent = now.toISOString().split('T')[0];
+        // 登录表单
+        const loginForm = document.getElementById('loginForm');
+        const loginAccount = document.getElementById('loginAccount');
+        const loginPassword = document.getElementById('loginPassword');
+        const loginError = document.getElementById('loginError');
+        const loginErrorText = document.getElementById('loginErrorText');
+        const loginSubmitBtn = document.getElementById('loginSubmitBtn');
 
-        // --- Canvas & Core Logic ---
+        // 签名画布
         const canvas = document.getElementById('signatureCanvas');
         const ctx = canvas.getContext('2d');
         const watermark = document.getElementById('watermark');
@@ -237,40 +398,270 @@
         const redoBtn = document.getElementById('redoBtn');
         const signerNameInput = document.getElementById('signerName');
 
-        // Toast Refs
+        // 签名列表
+        const signatureList = document.getElementById('signatureList');
+        const signatureCount = document.getElementById('signatureCount');
+        const emptyState = document.getElementById('emptyState');
+        const loadingState = document.getElementById('loadingState');
+        const refreshListBtn = document.getElementById('refreshListBtn');
+
+        // Toast 提示
         const toast = document.getElementById('toast');
         const toastTitle = document.getElementById('toastTitle');
         const toastMessage = document.getElementById('toastMessage');
         const toastIcon = document.getElementById('toastIcon');
 
-        // State
+        // 签名状态
         let isDrawing = false;
         let pathHistory = [];
         let undoHistory = [];
 
-        // --- 颜色选择逻辑 ---
-        colorBtns.forEach(btn => {
-            btn.addEventListener('click', (e) => {
-                // 移除所有激活状态
-                colorBtns.forEach(b => {
-                    b.classList.remove('ring-2');
-                    // 移除 transform scale
-                    b.style.transform = '';
+        // ==================================================================
+        // 主题切换
+        // ==================================================================
+        // 初始化主题
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            html.classList.add('dark');
+        } else {
+            html.classList.remove('dark');
+        }
+
+        // 主题切换事件
+        themeToggle.addEventListener('click', () => {
+            html.classList.toggle('dark');
+            localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
+        });
+
+        // ==================================================================
+        // 日期显示
+        // ==================================================================
+        document.getElementById('currentDate').textContent = new Date().toISOString().split('T')[0];
+
+        // ==================================================================
+        // 视图切换
+        // ==================================================================
+        /**
+         * 切换显示的视图
+         * @param {string} view - 要显示的视图名称：'login' | 'sign' | 'list'
+         */
+        function switchView(view) {
+            currentView = view;
+
+            // 隐藏所有视图
+            loginView.classList.add('view-hidden');
+            signView.classList.add('view-hidden');
+            listView.classList.add('view-hidden');
+
+            // 显示目标视图
+            switch (view) {
+                case 'login':
+                    loginView.classList.remove('view-hidden');
+                    break;
+                case 'sign':
+                    signView.classList.remove('view-hidden');
+                    break;
+                case 'list':
+                    listView.classList.remove('view-hidden');
+                    break;
+            }
+
+            // 更新导航按钮显示状态
+            updateNavButtons();
+        }
+
+        /**
+         * 更新导航按钮的显示状态
+         */
+        function updateNavButtons() {
+            const isLoggedIn = authToken !== '';
+
+            // 签名列表按钮始终可见
+            navToList.classList.remove('hidden');
+            navToList.classList.add('flex');
+
+            // 更新登录/注销按钮状态
+            if (isLoggedIn) {
+                authText.textContent = '注销';
+                authIcon.classList.remove('ph-sign-in');
+                authIcon.classList.add('ph-sign-out');
+            } else {
+                authText.textContent = '登录';
+                authIcon.classList.remove('ph-sign-out');
+                authIcon.classList.add('ph-sign-in');
+            }
+
+            // 列表页面显示返回按钮
+            if (currentView === 'list') {
+                navToSign.classList.remove('hidden');
+                navToSign.classList.add('flex');
+            } else {
+                navToSign.classList.add('hidden');
+                navToSign.classList.remove('flex');
+            }
+        }
+
+        // ==================================================================
+        // 登录/注销
+        // ==================================================================
+
+        /**
+         * 显示登录错误信息
+         * @param {string} message - 错误信息
+         */
+        function showLoginError(message) {
+            loginErrorText.textContent = message;
+            loginError.classList.remove('hidden');
+        }
+
+        /**
+         * 隐藏登录错误信息
+         */
+        function hideLoginError() {
+            loginError.classList.add('hidden');
+        }
+
+        /**
+         * 处理登录表单提交
+         */
+        loginForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            hideLoginError();
+
+            const account = loginAccount.value.trim();
+            const password = loginPassword.value.trim();
+
+            // 验证输入
+            if (!account || !password) {
+                showLoginError('请输入账号和密码');
+                return;
+            }
+
+            // 禁用按钮，显示加载状态
+            loginSubmitBtn.disabled = true;
+            loginSubmitBtn.innerHTML = '<i class="ph ph-spinner animate-spin"></i> 登录中...';
+
+            try {
+                // 发送登录请求
+                const response = await fetch('/login', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ account, password })
                 });
 
-                // 激活当前
-                const color = e.target.dataset.color;
-                strokeColorInput.value = color;
-                e.target.classList.add('ring-2');
-            });
-        });
-        // 默认选中第一个
-        colorBtns[0].click();
+                const result = await response.json();
 
-        // --- Canvas Resize ---
+                if (result.success) {
+                    // 登录成功，保存令牌
+                    authToken = result.token;
+                    localStorage.setItem('authToken', authToken);
+                    showToast('success', '登录成功', '欢迎回来！');
+                    // 登录成功后跳转到签名列表
+                    switchView('list');
+                    loadSignatureList();
+                } else {
+                    // 登录失败
+                    showLoginError(result.message || '账号或密码错误');
+                }
+            } catch (error) {
+                console.error('登录失败:', error);
+                showLoginError('网络错误，请检查连接');
+            } finally {
+                // 恢复按钮状态
+                loginSubmitBtn.disabled = false;
+                loginSubmitBtn.innerHTML = '<i class="ph ph-sign-in"></i> <span>登录</span>';
+            }
+        });
+
+        /**
+         * 处理注销
+         */
+        function handleLogout() {
+            authToken = '';
+            localStorage.removeItem('authToken');
+            showToast('success', '已注销', '您已安全退出登录');
+            // 注销后回到签名页面
+            switchView('sign');
+        }
+
+        /**
+         * 验证当前令牌是否有效
+         * @returns {Promise<boolean>} 令牌是否有效
+         */
+        async function checkAuth() {
+            if (!authToken) return false;
+
+            try {
+                const response = await fetch('/api/check-auth', {
+                    headers: { 'Authorization': `Bearer ${authToken}` }
+                });
+                const result = await response.json();
+                if (!result.authenticated) {
+                    // 令牌无效，清除本地存储
+                    authToken = '';
+                    localStorage.removeItem('authToken');
+                }
+                return result.authenticated;
+            } catch (error) {
+                console.error('验证登录状态失败:', error);
+                return false;
+            }
+        }
+
+        // ==================================================================
+        // 导航按钮事件
+        // ==================================================================
+
+        // 登录/注销按钮
+        authBtn.addEventListener('click', async () => {
+            if (authToken) {
+                // 已登录，执行注销
+                handleLogout();
+            } else {
+                // 未登录，切换到登录视图
+                switchView('login');
+            }
+        });
+
+        // 签名列表按钮 - 点击时检查登录状态
+        navToList.addEventListener('click', async () => {
+            if (!authToken) {
+                // 未登录，跳转到登录页
+                switchView('login');
+                showToast('error', '需要登录', '请先登录后再查看签名列表');
+                return;
+            }
+            // 已登录，验证令牌有效性
+            const isAuth = await checkAuth();
+            if (isAuth) {
+                switchView('list');
+                loadSignatureList();
+            } else {
+                // 令牌无效，跳转登录页
+                switchView('login');
+                showToast('error', '登录已过期', '请重新登录');
+            }
+        });
+
+        // 返回签名按钮
+        navToSign.addEventListener('click', () => {
+            switchView('sign');
+        });
+
+        // 刷新列表按钮
+        refreshListBtn.addEventListener('click', () => {
+            loadSignatureList();
+        });
+
+        // ==================================================================
+        // 签名画布逻辑
+        // ==================================================================
+
+        /**
+         * 调整画布大小以适配容器
+         */
         function resizeCanvas() {
             const parent = canvas.parentElement;
-            const dpr = window.devicePixelRatio || 2; // 强制使用高DPI
+            const dpr = window.devicePixelRatio || 2;
             const rect = parent.getBoundingClientRect();
 
             canvas.width = rect.width * dpr;
@@ -283,6 +674,7 @@
             redrawCanvas();
         }
 
+        // 延迟调整画布大小
         let resizeTimeout;
         window.addEventListener('resize', () => {
             clearTimeout(resizeTimeout);
@@ -290,7 +682,9 @@
         });
         setTimeout(resizeCanvas, 50);
 
-        // --- Drawing Logic ---
+        /**
+         * 获取触摸/鼠标坐标
+         */
         function getPoint(e) {
             const rect = canvas.getBoundingClientRect();
             const clientX = e.touches ? e.touches[0].clientX : e.clientX;
@@ -301,15 +695,15 @@
             };
         }
 
-        // 贝塞尔曲线平滑处理 (让签名更好看)
-        // 这里简化为直线连接以保持性能，如果需要更平滑可以加二次贝塞尔插值
+        /**
+         * 开始绘制
+         */
         function startDrawing(e) {
             if (e.cancelable) e.preventDefault();
             isDrawing = true;
             watermark.style.opacity = '0';
 
             const point = getPoint(e);
-
             const newPath = {
                 points: [point],
                 color: strokeColorInput.value,
@@ -318,7 +712,7 @@
 
             pathHistory.push(newPath);
             undoHistory = [];
-            updateUI();
+            updateCanvasUI();
 
             ctx.beginPath();
             ctx.moveTo(point.x, point.y);
@@ -326,10 +720,13 @@
             ctx.lineJoin = 'round';
             ctx.strokeStyle = newPath.color;
             ctx.lineWidth = newPath.width;
-            ctx.lineTo(point.x, point.y); // 画点
+            ctx.lineTo(point.x, point.y);
             ctx.stroke();
         }
 
+        /**
+         * 绘制中
+         */
         function draw(e) {
             if (!isDrawing) return;
             if (e.cancelable) e.preventDefault();
@@ -342,6 +739,9 @@
             ctx.stroke();
         }
 
+        /**
+         * 停止绘制
+         */
         function stopDrawing() {
             if (isDrawing) {
                 isDrawing = false;
@@ -349,6 +749,9 @@
             }
         }
 
+        /**
+         * 重绘画布
+         */
         function redrawCanvas() {
             ctx.save();
             ctx.setTransform(1, 0, 0, 1, 0, 0);
@@ -378,47 +781,70 @@
             });
         }
 
-        function updateUI() {
+        /**
+         * 更新画布 UI（撤销/重做按钮状态）
+         */
+        function updateCanvasUI() {
             undoBtn.disabled = pathHistory.length === 0;
             redoBtn.disabled = undoHistory.length === 0;
         }
 
-        // --- Event Listeners ---
+        // 画布事件监听
         canvas.addEventListener('mousedown', startDrawing);
         canvas.addEventListener('mousemove', draw);
         window.addEventListener('mouseup', stopDrawing);
-
         canvas.addEventListener('touchstart', startDrawing, { passive: false });
         canvas.addEventListener('touchmove', draw, { passive: false });
         canvas.addEventListener('touchend', stopDrawing);
 
+        // 清空画布
         clearBtn.addEventListener('click', () => {
             pathHistory = [];
             undoHistory = [];
             redrawCanvas();
-            updateUI();
+            updateCanvasUI();
         });
 
+        // 撤销
         undoBtn.addEventListener('click', () => {
             if (pathHistory.length > 0) {
                 undoHistory.push(pathHistory.pop());
                 redrawCanvas();
-                updateUI();
+                updateCanvasUI();
             }
         });
 
+        // 重做
         redoBtn.addEventListener('click', () => {
             if (undoHistory.length > 0) {
                 pathHistory.push(undoHistory.pop());
                 redrawCanvas();
-                updateUI();
+                updateCanvasUI();
             }
         });
 
-        // --- Upload Logic ---
+        // ==================================================================
+        // 颜色选择
+        // ==================================================================
+        colorBtns.forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                colorBtns.forEach(b => {
+                    b.classList.remove('ring-2');
+                    b.style.transform = '';
+                });
+                strokeColorInput.value = e.target.dataset.color;
+                e.target.classList.add('ring-2');
+            });
+        });
+        colorBtns[0].click();
+
+        // ==================================================================
+        // 上传签名
+        // ==================================================================
         saveBtn.addEventListener('click', async () => {
             const name = signerNameInput.value.trim();
 
+            // 验证姓名
             if (!name) {
                 showToast('error', '信息缺失', '请在保存前输入您的姓名。');
                 signerNameInput.focus();
@@ -427,11 +853,13 @@
                 return;
             }
 
+            // 验证签名
             if (pathHistory.length === 0) {
                 showToast('error', '画布为空', '请先进行签名。');
                 return;
             }
 
+            // 禁用按钮，显示加载状态
             const originalHTML = saveBtn.innerHTML;
             saveBtn.disabled = true;
             saveBtn.innerHTML = '<i class="ph ph-spinner animate-spin"></i> 处理中...';
@@ -442,26 +870,21 @@
                 const response = await fetch('/upload', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        name: name,
-                        image: dataURL
-                    })
+                    body: JSON.stringify({ name, image: dataURL })
                 });
 
                 const result = await response.json();
 
                 if (result.success) {
                     showToast('success', '归档成功', '签名已安全保存至服务器。');
-
+                    // 清空画布和输入
                     setTimeout(() => {
-                        // 清空画布和输入
                         pathHistory = [];
                         undoHistory = [];
                         signerNameInput.value = '';
                         redrawCanvas();
-                        updateUI();
+                        updateCanvasUI();
                     }, 1200);
-
                 } else {
                     showToast('error', '上传失败', result.message);
                 }
@@ -474,7 +897,216 @@
             }
         });
 
+        // ==================================================================
+        // 签名列表
+        // ==================================================================
+
+        /**
+         * 加载签名列表
+         */
+        async function loadSignatureList() {
+            // 验证登录状态
+            if (!authToken) {
+                switchView('login');
+                return;
+            }
+
+            // 显示加载状态
+            signatureList.innerHTML = '';
+            emptyState.classList.add('hidden');
+            loadingState.classList.remove('hidden');
+
+            try {
+                const response = await fetch('/api/signatures', {
+                    headers: { 'Authorization': `Bearer ${authToken}` }
+                });
+
+                // 检查是否需要重新登录
+                if (response.status === 401) {
+                    authToken = '';
+                    localStorage.removeItem('authToken');
+                    switchView('login');
+                    showToast('error', '登录已过期', '请重新登录');
+                    return;
+                }
+
+                const result = await response.json();
+
+                if (result.success) {
+                    renderSignatureList(result.signatures);
+                } else {
+                    showToast('error', '加载失败', result.message);
+                }
+            } catch (error) {
+                console.error('加载签名列表失败:', error);
+                showToast('error', '网络错误', '无法连接到服务器');
+            } finally {
+                loadingState.classList.add('hidden');
+            }
+        }
+
+        /**
+         * 渲染签名列表
+         * @param {Array} signatures - 签名数据数组
+         */
+        function renderSignatureList(signatures) {
+            signatureCount.textContent = signatures.length;
+
+            if (signatures.length === 0) {
+                signatureList.innerHTML = '';
+                emptyState.classList.remove('hidden');
+                return;
+            }
+
+            emptyState.classList.add('hidden');
+
+            // 生成签名卡片 HTML
+            signatureList.innerHTML = signatures.map(sig => `
+                <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 hover:shadow-lg transition-shadow duration-200">
+                    <div class="flex items-center justify-between">
+                        <!-- 左侧：签名信息 -->
+                        <div class="flex items-center gap-4">
+                            <!-- 签名预览按钮（点击弹出大图） -->
+                            <button class="preview-btn w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden hover:ring-2 hover:ring-gray-400 dark:hover:ring-gray-500 transition-all cursor-pointer"
+                                    data-path="${escapeHtml(sig.path)}" data-name="${escapeHtml(sig.name)}" data-date="${escapeHtml(sig.date)}">
+                                <img src="/download?path=${encodeURIComponent(sig.path)}&token=${encodeURIComponent(authToken)}"
+                                     alt="签名预览"
+                                     class="w-full h-full object-contain pointer-events-none"
+                                     onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">
+                                <div class="w-full h-full items-center justify-center hidden pointer-events-none">
+                                    <i class="ph ph-user text-xl text-gray-500 dark:text-gray-400"></i>
+                                </div>
+                            </button>
+                            <!-- 签名详情 -->
+                            <div class="min-w-0">
+                                <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">${escapeHtml(sig.name)}</h3>
+                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">${escapeHtml(sig.date)}</p>
+                                <p class="text-xs text-gray-400 dark:text-gray-500 truncate mt-0.5" title="${escapeHtml(sig.path)}">${formatFileSize(sig.size)}</p>
+                            </div>
+                        </div>
+                        <!-- 右侧：下载按钮 -->
+                        <button class="download-btn flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors flex-shrink-0"
+                                data-path="${escapeHtml(sig.path)}" data-name="${escapeHtml(sig.name)}_${escapeHtml(sig.date)}.png">
+                            <i class="ph ph-download text-base"></i>
+                            <span class="hidden sm:inline">下载</span>
+                        </button>
+                    </div>
+                </div>
+            `).join('');
+
+            // 绑定下载按钮事件
+            document.querySelectorAll('.download-btn').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const path = btn.dataset.path;
+                    const name = btn.dataset.name;
+                    downloadSignature(path, name);
+                });
+            });
+
+            // 绑定预览按钮事件
+            document.querySelectorAll('.preview-btn').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const path = btn.dataset.path;
+                    const name = btn.dataset.name;
+                    const date = btn.dataset.date;
+                    openPreviewModal(path, name, date);
+                });
+            });
+        }
+
+        /**
+         * 下载签名文件
+         * @param {string} filePath - 文件路径
+         * @param {string} fileName - 下载时的文件名
+         */
+        function downloadSignature(filePath, fileName) {
+            const url = `/download?path=${encodeURIComponent(filePath)}&token=${encodeURIComponent(authToken)}`;
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = fileName;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+        }
+
+        // ==================================================================
+        // 签名预览模态框
+        // ==================================================================
+        const previewModal = document.getElementById('previewModal');
+        const previewImage = document.getElementById('previewImage');
+        const previewName = document.getElementById('previewName');
+        const previewDate = document.getElementById('previewDate');
+
+        /**
+         * 打开预览模态框
+         * @param {string} path - 签名文件路径
+         * @param {string} name - 签署人姓名
+         * @param {string} date - 签名日期
+         */
+        function openPreviewModal(path, name, date) {
+            previewImage.src = `/download?path=${encodeURIComponent(path)}&token=${encodeURIComponent(authToken)}`;
+            previewName.textContent = name;
+            previewDate.textContent = date;
+            previewModal.classList.remove('hidden');
+            previewModal.classList.add('flex');
+            document.body.style.overflow = 'hidden'; // 禁止背景滚动
+        }
+
+        /**
+         * 关闭预览模态框
+         */
+        function closePreviewModal() {
+            previewModal.classList.add('hidden');
+            previewModal.classList.remove('flex');
+            document.body.style.overflow = ''; // 恢复背景滚动
+        }
+
+        // 点击背景关闭模态框
+        previewModal.addEventListener('click', (e) => {
+            if (e.target === previewModal) {
+                closePreviewModal();
+            }
+        });
+
+        // 关闭按钮事件
+        document.getElementById('closePreviewBtn').addEventListener('click', closePreviewModal);
+
+        // ESC 键关闭模态框
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && !previewModal.classList.contains('hidden')) {
+                closePreviewModal();
+            }
+        });
+
+        /**
+         * HTML 转义（防止 XSS）
+         */
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        /**
+         * 格式化文件大小
+         */
+        function formatFileSize(bytes) {
+            if (bytes < 1024) return bytes + ' B';
+            if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+            return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+        }
+
+        // ==================================================================
+        // Toast 通知
+        // ==================================================================
         let toastTimeout;
+
+        /**
+         * 显示 Toast 提示
+         * @param {string} type - 类型：'success' | 'error'
+         * @param {string} title - 标题
+         * @param {string} message - 内容
+         */
         function showToast(type, title, message) {
             if (toastTimeout) clearTimeout(toastTimeout);
 
@@ -483,7 +1115,7 @@
                 error: '<i class="ph ph-warning-circle text-red-400"></i>'
             };
 
-            toastIcon.innerHTML = icons[type];
+            toastIcon.innerHTML = icons[type] || '';
             toastTitle.textContent = title;
             toastMessage.textContent = message;
 
@@ -493,7 +1125,18 @@
                 toast.classList.add('translate-y-4', 'opacity-0', 'pointer-events-none');
             }, 3500);
         }
+
+        // ==================================================================
+        // 初始化
+        // ==================================================================
+        function init() {
+            // 默认进入签名页面（无需登录）
+            switchView('sign');
+        }
+
+        // 启动应用
+        init();
     });
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/main.go b/main.go
index c5eb6cb..6150496 100644
--- a/main.go
+++ b/main.go
@@ -5,39 +5,129 @@ import (
 	"encoding/base64"
 	"encoding/json"
 	"fmt"
+	"io/fs"
 	"log"
 	"net/http"
 	"os"
 	"path/filepath"
+	"sort"
 	"strings"
 	"time"
 )
 
-// 1. 引入 embed 包，并将 index.html 嵌入到变量 content 中
-//
+// ============================================================================
+// 嵌入前端文件
+// ============================================================================
+
 //go:embed index.html
 var content embed.FS
 
-// UploadRequest 定义前端发送的JSON数据结构
+// ============================================================================
+// 数据结构定义
+// ============================================================================
+
+// UploadRequest 前端发送的签名上传请求结构
 type UploadRequest struct {
-	Name  string `json:"name"`
-	Image string `json:"image"`
+	Name  string `json:"name"`  // 签署人姓名
+	Image string `json:"image"` // Base64 编码的签名图片
 }
 
-// UploadResponse 定义返回给前端的响应结构
+// UploadResponse 服务器返回的响应结构
 type UploadResponse struct {
-	Success bool   `json:"success"`
-	Message string `json:"message"`
-	Path    string `json:"path"`
+	Success bool   `json:"success"` // 是否成功
+	Message string `json:"message"` // 提示信息
+	Path    string `json:"path"`    // 文件保存路径
 }
 
+// LoginRequest 登录请求结构
+type LoginRequest struct {
+	Account  string `json:"account"`  // 账号
+	Password string `json:"password"` // 密码
+}
+
+// LoginResponse 登录响应结构
+type LoginResponse struct {
+	Success bool   `json:"success"` // 是否成功
+	Token   string `json:"token"`   // 认证令牌
+	Message string `json:"message"` // 提示信息
+}
+
+// SignatureItem 签名文件信息结构
+type SignatureItem struct {
+	Name string `json:"name"` // 签署人姓名
+	Path string `json:"path"` // 文件路径
+	Date string `json:"date"` // 签名日期
+	Size int64  `json:"size"` // 文件大小（字节）
+}
+
+// ============================================================================
+// 全局变量
+// ============================================================================
+
+// 存储账号密码信息
+var accountConfig struct {
+	Account  string `json:"account"`  // 账号
+	Password string `json:"password"` // 密码
+}
+
+// 存储有效的认证令牌，格式：令牌 -> 账号
+var validTokens = make(map[string]string)
+
+// Token 过期时间（24小时）
+const tokenExpireDuration = 24 * time.Hour
+
+// 存储令牌的创建时间
+var tokenCreateTimes = make(map[string]time.Time)
+
+// uploads 目录的绝对路径
+var uploadsDir string
+
+// ============================================================================
+// 主函数
+// ============================================================================
+
 func main() {
-	// 2. 修改路由处理：直接从内存(嵌入的文件系统)中读取页面，而不是从磁盘读取
-	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
-		// 设置正确的 Content-Type
-		w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	// 获取可执行文件所在目录
+	execPath, err := os.Executable()
+	if err != nil {
+		log.Printf("获取可执行文件路径失败: %v，使用当前目录", err)
+		execPath = filepath.Join(".", "placeholder")
+	}
+	execDir := filepath.Dir(execPath)
 
-		// 从嵌入的文件系统中读取 index.html
+	// 初始化 uploads 目录的绝对路径
+	uploadsDir = filepath.Join(execDir, "uploads")
+
+	// 加载账号密码配置文件
+	loadAccountConfig(execDir)
+
+	// 注册路由
+	setupRoutes()
+
+	// 启动服务器
+	port := ":10081"
+	fmt.Println("========================================")
+	fmt.Println("  电子签名归档系统 v2.0")
+	fmt.Println("========================================")
+	fmt.Printf("监听端口: %s\n", port)
+	fmt.Printf("签名存储: %s\n", uploadsDir)
+	fmt.Printf("访问地址: http://localhost%s\n", port)
+	fmt.Println("========================================")
+
+	if err := http.ListenAndServe(port, nil); err != nil {
+		log.Fatal("服务器启动失败:", err)
+	}
+}
+
+// ============================================================================
+// 路由设置
+// ============================================================================
+
+// setupRoutes 注册所有 HTTP 路由
+func setupRoutes() {
+	// 主页面 - 从嵌入的文件系统提供前端页面
+	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Content-Type", "text/html; charset=utf-8")
 		data, err := content.ReadFile("index.html")
 		if err != nil {
 			http.Error(w, "系统错误: 页面文件丢失", 500)
@@ -46,79 +136,358 @@ func main() {
 		w.Write(data)
 	})
 
-	// 设置上传接口
+	// 签名上传接口（无需认证）
 	http.HandleFunc("/upload", uploadHandler)
 
-	// 启动服务器
-	port := ":10081"
-	fmt.Printf("Linux 服务启动中...\n")
-	fmt.Printf("监听端口: %s\n", port)
-	fmt.Println("文件保存路径: ./uploads")
+	// 登录接口
+	http.HandleFunc("/login", loginHandler)
 
-	if err := http.ListenAndServe(port, nil); err != nil {
-		log.Fatal("服务器启动失败:", err)
+	// 验证登录状态接口
+	http.HandleFunc("/api/check-auth", checkAuthHandler)
+
+	// 获取签名列表接口（需要认证）
+	http.HandleFunc("/api/signatures", signaturesHandler)
+
+	// 下载签名文件接口（需要认证）
+	http.HandleFunc("/download", downloadHandler)
+}
+
+// ============================================================================
+// 认证相关函数
+// ============================================================================
+
+// loadAccountConfig 从 pwd.json 加载账号密码配置
+// 优先从可执行文件目录加载，如果找不到则从当前工作目录加载
+func loadAccountConfig(execDir string) {
+	// 尝试从可执行文件目录加载
+	configPath := filepath.Join(execDir, "pwd.json")
+	if err := loadConfigFromFile(configPath); err != nil {
+		// 如果失败，尝试从当前工作目录加载
+		configPath = filepath.Join(".", "pwd.json")
+		if err := loadConfigFromFile(configPath); err != nil {
+			log.Printf("警告: 未找到 pwd.json 配置文件，登录功能将不可用")
+			return
+		}
+	}
+	log.Printf("已加载账号配置: %s", configPath)
+}
+
+// loadConfigFromFile 从指定路径加载配置文件
+func loadConfigFromFile(path string) error {
+	data, err := os.ReadFile(path)
+	if err != nil {
+		return err
+	}
+	return json.Unmarshal(data, &accountConfig)
+}
+
+// generateToken 生成认证令牌
+// 格式：base64(账号:时间戳)，简单但足够用于本地场景
+func generateToken(account string) string {
+	// 组合账号和时间戳
+	raw := fmt.Sprintf("%s:%d", account, time.Now().UnixNano())
+	// Base64 编码
+	token := base64.StdEncoding.EncodeToString([]byte(raw))
+
+	// 记录令牌创建时间
+	validTokens[token] = account
+	tokenCreateTimes[token] = time.Now()
+
+	return token
+}
+
+// validateToken 验证令牌是否有效
+// 返回：是否有效、对应的账号
+func validateToken(token string) (bool, string) {
+	if token == "" {
+		return false, ""
+	}
+
+	// 检查令牌是否存在
+	account, exists := validTokens[token]
+	if !exists {
+		return false, ""
+	}
+
+	// 检查令牌是否过期
+	createTime, ok := tokenCreateTimes[token]
+	if !ok || time.Since(createTime) > tokenExpireDuration {
+		// 令牌已过期，删除它
+		delete(validTokens, token)
+		delete(tokenCreateTimes, token)
+		return false, ""
+	}
+
+	return true, account
+}
+
+// cleanExpiredTokens 清理过期的令牌
+func cleanExpiredTokens() {
+	now := time.Now()
+	for token, createTime := range tokenCreateTimes {
+		if now.Sub(createTime) > tokenExpireDuration {
+			delete(validTokens, token)
+			delete(tokenCreateTimes, token)
+		}
 	}
 }
 
+// getAuthTokenFromRequest 从请求中提取认证令牌
+// 支持从 Authorization 头或查询参数获取
+func getAuthTokenFromRequest(r *http.Request) string {
+	// 首先尝试从 Authorization 头获取
+	authHeader := r.Header.Get("Authorization")
+	if strings.HasPrefix(authHeader, "Bearer ") {
+		return strings.TrimPrefix(authHeader, "Bearer ")
+	}
+
+	// 然后尝试从查询参数获取
+	return r.URL.Query().Get("token")
+}
+
+// ============================================================================
+// 路由处理函数
+// ============================================================================
+
+// loginHandler 处理登录请求
+// POST /login - 验证账号密码，返回认证令牌
+func loginHandler(w http.ResponseWriter, r *http.Request) {
+	// 只允许 POST 方法
+	if r.Method != http.MethodPost {
+		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	// 检查是否配置了账号密码
+	if accountConfig.Account == "" {
+		sendJSONResponse(w, false, "系统未配置登录账号", "")
+		return
+	}
+
+	// 解析请求体
+	var req LoginRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		sendJSONResponse(w, false, "无效的请求数据", "")
+		return
+	}
+
+	// 去除前后空格
+	req.Account = strings.TrimSpace(req.Account)
+	req.Password = strings.TrimSpace(req.Password)
+
+	// 验证账号密码
+	if req.Account == "" || req.Password == "" {
+		sendJSONResponse(w, false, "账号和密码不能为空", "")
+		return
+	}
+
+	// 对比账号密码
+	if req.Account != accountConfig.Account || req.Password != accountConfig.Password {
+		log.Printf("登录失败: 账号 %s 密码错误", req.Account)
+		sendJSONResponse(w, false, "账号或密码错误", "")
+		return
+	}
+
+	// 登录成功，生成令牌
+	token := generateToken(req.Account)
+	log.Printf("登录成功: 账号 %s", req.Account)
+
+	// 返回成功响应（使用 LoginResponse 结构）
+	w.Header().Set("Content-Type", "application/json")
+	resp := LoginResponse{
+		Success: true,
+		Token:   token,
+		Message: "登录成功",
+	}
+	json.NewEncoder(w).Encode(resp)
+}
+
+// checkAuthHandler 检查认证状态
+// GET /api/check-auth - 验证令牌是否有效
+func checkAuthHandler(w http.ResponseWriter, r *http.Request) {
+	token := getAuthTokenFromRequest(r)
+	valid, account := validateToken(token)
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]interface{}{
+		"authenticated": valid,
+		"account":       account,
+	})
+}
+
+// uploadHandler 处理签名上传
+// POST /upload - 接收 Base64 编码的签名图片并保存
 func uploadHandler(w http.ResponseWriter, r *http.Request) {
 	if r.Method != http.MethodPost {
 		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
 		return
 	}
 
+	// 解析请求体
 	var req UploadRequest
 	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
-		jsonResponse(w, false, "无效的请求数据", "")
+		sendJSONResponse(w, false, "无效的请求数据", "")
 		return
 	}
 
+	// 验证姓名不为空
 	req.Name = strings.TrimSpace(req.Name)
 	if req.Name == "" {
-		jsonResponse(w, false, "名字不能为空", "")
-		return
-	}
-	if req.Image == "" {
-		jsonResponse(w, false, "签名数据为空", "")
+		sendJSONResponse(w, false, "名字不能为空", "")
 		return
 	}
 
+	// 验证签名数据不为空
+	if req.Image == "" {
+		sendJSONResponse(w, false, "签名数据为空", "")
+		return
+	}
+
+	// 去除 Base64 前缀（data:image/png;base64,）
 	b64data := req.Image
 	if idx := strings.Index(b64data, ","); idx != -1 {
 		b64data = b64data[idx+1:]
 	}
 
+	// 解码 Base64 数据
 	imgBytes, err := base64.StdEncoding.DecodeString(b64data)
 	if err != nil {
-		jsonResponse(w, false, "图片数据解码失败", "")
+		sendJSONResponse(w, false, "图片数据解码失败", "")
 		return
 	}
 
-	// 使用当前服务器时间
+	// 生成安全的文件名
 	dateStr := time.Now().Format("2006-1-2")
 	safeName := filepath.Base(req.Name)
 
-	// Linux下路径分隔符自动处理
+	// 创建保存目录
 	saveDir := filepath.Join("uploads", safeName)
 	if err := os.MkdirAll(saveDir, 0755); err != nil {
 		log.Printf("创建目录失败: %v", err)
-		jsonResponse(w, false, "服务器存储错误", "")
+		sendJSONResponse(w, false, "服务器存储错误", "")
 		return
 	}
 
+	// 生成完整的文件路径
 	fileName := fmt.Sprintf("%s+%s.png", safeName, dateStr)
 	fullPath := filepath.Join(saveDir, fileName)
 
+	// 写入文件
 	if err := os.WriteFile(fullPath, imgBytes, 0644); err != nil {
 		log.Printf("写入文件失败: %v", err)
-		jsonResponse(w, false, "保存文件失败", "")
+		sendJSONResponse(w, false, "保存文件失败", "")
 		return
 	}
 
-	log.Printf("已保存签名: %s", fullPath) // 记录日志方便Linux查看
-	jsonResponse(w, true, "签名保存成功！", fullPath)
+	log.Printf("已保存签名: %s", fullPath)
+	sendJSONResponse(w, true, "签名保存成功！", fullPath)
 }
 
-func jsonResponse(w http.ResponseWriter, success bool, message string, path string) {
+// signaturesHandler 获取签名列表
+// GET /api/signatures - 返回所有签名文件的信息（需要认证）
+func signaturesHandler(w http.ResponseWriter, r *http.Request) {
+	// 验证认证
+	token := getAuthTokenFromRequest(r)
+	valid, _ := validateToken(token)
+	if !valid {
+		w.Header().Set("Content-Type", "application/json")
+		w.WriteHeader(http.StatusUnauthorized)
+		json.NewEncoder(w).Encode(map[string]interface{}{
+			"success": false,
+			"message": "未登录或登录已过期",
+		})
+		return
+	}
+
+	// 收集所有签名文件
+	signatures := collectSignatureFiles()
+
+	// 返回结果
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]interface{}{
+		"success":    true,
+		"signatures": signatures,
+	})
+}
+
+// downloadHandler 下载签名文件
+// GET /download?path=xxx - 下载指定的签名图片（需要认证）
+func downloadHandler(w http.ResponseWriter, r *http.Request) {
+	// 验证认证
+	token := getAuthTokenFromRequest(r)
+	valid, _ := validateToken(token)
+	if !valid {
+		w.Header().Set("Content-Type", "application/json")
+		w.WriteHeader(http.StatusUnauthorized)
+		json.NewEncoder(w).Encode(map[string]interface{}{
+			"success": false,
+			"message": "未登录或登录已过期",
+		})
+		return
+	}
+
+	// 获取文件路径参数
+	filePath := r.URL.Query().Get("path")
+	if filePath == "" {
+		w.Header().Set("Content-Type", "application/json")
+		w.WriteHeader(http.StatusBadRequest)
+		json.NewEncoder(w).Encode(map[string]interface{}{
+			"success": false,
+			"message": "缺少文件路径参数",
+		})
+		return
+	}
+
+	// 安全检查：确保路径在 uploads 目录内，防止路径穿越攻击
+	absPath, err := filepath.Abs(filePath)
+	if err != nil {
+		w.Header().Set("Content-Type", "application/json")
+		w.WriteHeader(http.StatusBadRequest)
+		json.NewEncoder(w).Encode(map[string]interface{}{
+			"success": false,
+			"message": "无效的文件路径",
+		})
+		return
+	}
+
+	// 获取 uploads 目录的绝对路径
+	uploadsAbs, _ := filepath.Abs("uploads")
+	if !strings.HasPrefix(absPath, uploadsAbs) {
+		w.Header().Set("Content-Type", "application/json")
+		w.WriteHeader(http.StatusForbidden)
+		json.NewEncoder(w).Encode(map[string]interface{}{
+			"success": false,
+			"message": "无权访问该文件",
+		})
+		return
+	}
+
+	// 检查文件是否存在
+	if _, err := os.Stat(absPath); os.IsNotExist(err) {
+		w.Header().Set("Content-Type", "application/json")
+		w.WriteHeader(http.StatusNotFound)
+		json.NewEncoder(w).Encode(map[string]interface{}{
+			"success": false,
+			"message": "文件不存在",
+		})
+		return
+	}
+
+	// 设置响应头，触发浏览器下载
+	fileName := filepath.Base(absPath)
+	w.Header().Set("Content-Disposition", fmt.Sprintf("attachment; filename=\"%s\"", fileName))
+	w.Header().Set("Content-Type", "image/png")
+
+	// 提供文件
+	http.ServeFile(w, r, absPath)
+}
+
+// ============================================================================
+// 辅助函数
+// ============================================================================
+
+// sendJSONResponse 发送 JSON 格式的响应（上传接口专用）
+func sendJSONResponse(w http.ResponseWriter, success bool, message string, path string) {
 	w.Header().Set("Content-Type", "application/json")
 	resp := UploadResponse{
 		Success: success,
@@ -127,3 +496,64 @@ func jsonResponse(w http.ResponseWriter, success bool, message string, path stri
 	}
 	json.NewEncoder(w).Encode(resp)
 }
+
+// collectSignatureFiles 收集 uploads 目录下所有签名文件
+// 返回按修改时间倒序排列的签名文件列表
+func collectSignatureFiles() []SignatureItem {
+	var signatures []SignatureItem
+
+	// 检查 uploads 目录是否存在
+	if _, err := os.Stat("uploads"); os.IsNotExist(err) {
+		return signatures
+	}
+
+	// 遍历 uploads 目录下的所有子目录（每个子目录对应一个签署人）
+	err := filepath.Walk("uploads", func(path string, info fs.FileInfo, err error) error {
+		if err != nil {
+			return nil // 跳过错误的文件
+		}
+
+		// 只处理 .png 文件
+		if !info.IsDir() && strings.HasSuffix(strings.ToLower(info.Name()), ".png") {
+			// 从文件路径中提取签署人姓名（目录名）
+			relPath, _ := filepath.Rel("uploads", path)
+			parts := strings.SplitN(relPath, string(filepath.Separator), 2)
+			name := ""
+			if len(parts) > 0 {
+				name = parts[0]
+			}
+
+			// 从文件名中提取日期
+			// 文件名格式：<姓名>+<日期>.png
+			baseName := strings.TrimSuffix(info.Name(), ".png")
+			datePart := ""
+			if idx := strings.LastIndex(baseName, "+"); idx != -1 {
+				datePart = baseName[idx+1:]
+			}
+
+			signatures = append(signatures, SignatureItem{
+				Name: name,
+				Path: path,
+				Date: datePart,
+				Size: info.Size(),
+			})
+		}
+		return nil
+	})
+
+	if err != nil {
+		log.Printf("遍历签名目录失败: %v", err)
+	}
+
+	// 按修改时间倒序排列
+	sort.Slice(signatures, func(i, j int) bool {
+		fileInfoI, _ := os.Stat(signatures[i].Path)
+		fileInfoJ, _ := os.Stat(signatures[j].Path)
+		if fileInfoI == nil || fileInfoJ == nil {
+			return false
+		}
+		return fileInfoI.ModTime().After(fileInfoJ.ModTime())
+	})
+
+	return signatures
+}
diff --git a/pwd.json b/pwd.json
new file mode 100644
index 0000000..9bc7661
--- /dev/null
+++ b/pwd.json
@@ -0,0 +1,4 @@
+{
+  "account": "liqi",
+  "password": "qiqi991012"
+}