diff --git a/index.html b/index.html
index 391c035..892a3de 100644
--- a/index.html
+++ b/index.html
@@ -313,6 +313,36 @@
     </main>
 </div>
 
+<!-- ================================================================== -->
+<!-- 姓名填写模态框 -->
+<!-- ================================================================== -->
+<div id="nameModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/80 backdrop-blur-sm">
+    <div class="relative w-full max-w-sm mx-4">
+        <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl overflow-hidden">
+            <!-- 头部 -->
+            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">请输入签署人姓名</h3>
+                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">归档前需要填写签署人姓名</p>
+            </div>
+            <!-- 输入框 -->
+            <div class="px-6 py-4">
+                <input type="text" id="modalSignerName"
+                       class="w-full bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg px-4 py-3 text-lg font-medium 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="请输入姓名">
+            </div>
+            <!-- 按钮 -->
+            <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-end gap-3">
+                <button id="cancelNameBtn" class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors">
+                    取消
+                </button>
+                <button id="confirmNameBtn" class="px-6 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-sm font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-200">
+                    确认归档
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!-- ================================================================== -->
 <!-- 签名预览模态框 -->
 <!-- ================================================================== -->
@@ -385,6 +415,12 @@
         const loginErrorText = document.getElementById('loginErrorText');
         const loginSubmitBtn = document.getElementById('loginSubmitBtn');
 
+        // 姓名填写模态框
+        const nameModal = document.getElementById('nameModal');
+        const modalSignerName = document.getElementById('modalSignerName');
+        const cancelNameBtn = document.getElementById('cancelNameBtn');
+        const confirmNameBtn = document.getElementById('confirmNameBtn');
+
         // 签名画布
         const canvas = document.getElementById('signatureCanvas');
         const ctx = canvas.getContext('2d');
@@ -842,23 +878,86 @@
         // 上传签名
         // ==================================================================
         saveBtn.addEventListener('click', async () => {
-            const name = signerNameInput.value.trim();
-
-            // 验证姓名
-            if (!name) {
-                showToast('error', '信息缺失', '请在保存前输入您的姓名。');
-                signerNameInput.focus();
-                signerNameInput.classList.add('border-red-500');
-                setTimeout(() => signerNameInput.classList.remove('border-red-500'), 2000);
-                return;
-            }
-
             // 验证签名
             if (pathHistory.length === 0) {
                 showToast('error', '画布为空', '请先进行签名。');
                 return;
             }
 
+            const name = signerNameInput.value.trim();
+
+            // 名字为空，弹出模态框让用户填写
+            if (!name) {
+                openNameModal();
+                return;
+            }
+
+            // 执行上传
+            await uploadSignature(name);
+        });
+
+        /**
+         * 打开姓名填写模态框
+         */
+        function openNameModal() {
+            modalSignerName.value = '';
+            nameModal.classList.remove('hidden');
+            nameModal.classList.add('flex');
+            document.body.style.overflow = 'hidden';
+            setTimeout(() => modalSignerName.focus(), 100);
+        }
+
+        /**
+         * 关闭姓名填写模态框
+         */
+        function closeNameModal() {
+            nameModal.classList.add('hidden');
+            nameModal.classList.remove('flex');
+            document.body.style.overflow = '';
+        }
+
+        // 取消按钮事件
+        cancelNameBtn.addEventListener('click', closeNameModal);
+
+        // 点击背景关闭
+        nameModal.addEventListener('click', (e) => {
+            if (e.target === nameModal) {
+                closeNameModal();
+            }
+        });
+
+        // 确认归档按钮事件
+        confirmNameBtn.addEventListener('click', async () => {
+            const name = modalSignerName.value.trim();
+            if (!name) {
+                modalSignerName.classList.add('border-red-500');
+                setTimeout(() => modalSignerName.classList.remove('border-red-500'), 2000);
+                return;
+            }
+            signerNameInput.value = name;
+            closeNameModal();
+            await uploadSignature(name);
+        });
+
+        // 回车确认
+        modalSignerName.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                confirmNameBtn.click();
+            }
+        });
+
+        // ESC 关闭
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && !nameModal.classList.contains('hidden')) {
+                closeNameModal();
+            }
+        });
+
+        /**
+         * 执行签名上传
+         * @param {string} name - 签署人姓名
+         */
+        async function uploadSignature(name) {
             // 禁用按钮，显示加载状态
             const originalHTML = saveBtn.innerHTML;
             saveBtn.disabled = true;
@@ -877,7 +976,7 @@
 
                 if (result.success) {
                     showToast('success', '归档成功', '签名已安全保存至服务器。');
-                    // 清空画布和输入
+                    // 清空画布
                     setTimeout(() => {
                         pathHistory = [];
                         undoHistory = [];
@@ -895,7 +994,7 @@
                 saveBtn.disabled = false;
                 saveBtn.innerHTML = originalHTML;
             }
-        });
+        }
 
         // ==================================================================
         // 签名列表