From 65204c3e6c665804c87f519bcfb92252d88e8eb4 Mon Sep 17 00:00:00 2001
From: loren <loren@langcore.cn>
Date: Fri, 30 Jan 2026 10:27:35 +0800
Subject: [PATCH] =?UTF-8?q?style:=E4=BB=A3=E7=A0=81=E6=A0=BC=E5=BC=8F?=
 =?UTF-8?q?=E5=8C=96=E5=92=8C=E6=9B=B4=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore         |   2 +-
 public/editor.html | 508 +++++++++++++++++++++++++--------------------
 2 files changed, 284 insertions(+), 226 deletions(-)
diff --git a/.gitignore b/.gitignore
index ffbc1b4..2bffb26 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,4 +25,4 @@ logs/
 sync_database.sqlite
 
 //暂时忽略
-app.js
\ No newline at end of file
+mappingsEditor.js
\ No newline at end of file
diff --git a/public/editor.html b/public/editor.html
index de14038..10f4726 100644
--- a/public/editor.html
+++ b/public/editor.html
@@ -1,268 +1,326 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Gitea-Jira 映射配置生成器</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
-        body { font-family: 'Inter', system-ui, sans-serif; }
-        .step-card { transition: all 0.3s ease; }
-        .step-active { border-left: 4px solid #3b82f6; }
-        .jira-icon { width: 16px; height: 16px; display: inline-block; vertical-align: middle; margin-right: 6px; }
+        body {
+            font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .step-card {
+            transition: all 0.3s ease;
+        }
+
+        .step-active {
+            border-left: 4px solid #3b82f6;
+        }
+
+        .jira-icon {
+            width: 16px;
+            height: 16px;
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 6px;
+        }
     </style>
 </head>
+
 <body class="bg-gray-50 text-gray-800 min-h-screen p-6">
 
-<div class="max-w-4xl mx-auto">
-    <header class="mb-8 flex items-center justify-between">
-        <div>
-            <h1 class="text-2xl font-bold text-gray-900">Gitea-Jira 映射生成器</h1>
-            <p class="text-sm text-gray-500 mt-1">连接 Jira，自动提取 ID，生成 mappings.json 配置</p>
-        </div>
-        <div class="flex items-center gap-2">
-            <button onclick="openSettings()" class="text-sm bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded transition">
-                全局设置
-            </button>
-            <div class="text-xs bg-blue-100 text-blue-800 px-3 py-1 rounded-full">v2.0</div>
-        </div>
-    </header>
-
-    <!-- 全局设置模态窗口 -->
-    <div id="settingsModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-        <div class="bg-white rounded-lg shadow-xl p-6 max-w-lg w-full mx-4">
-            <h2 class="text-xl font-bold mb-4">全局设置</h2>
-            <div class="space-y-4">
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Jira 地址 (Base URL)</label>
-                    <input type="text" id="settingsJiraUrl" placeholder="https://your-domain.atlassian.net" class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
-                </div>
-                
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Jira 用户名/邮箱</label>
-                    <input type="text" id="settingsJiraUser" placeholder="email@example.com" class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
-                    <p class="text-xs text-gray-400 mt-1">使用 PAT 时可留空</p>
-                </div>
-                
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">API Token / 密码</label>
-                    <input type="password" id="settingsJiraToken" placeholder="ATATT3xFfGF0..." class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
-                    <p class="text-xs text-gray-400 mt-1">推荐使用 PAT (Personal Access Token)</p>
-                </div>
-            </div>
-            <div class="mt-6 flex justify-end gap-2">
-                <button onclick="closeSettings()" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded text-sm font-medium transition">
-                    取消
-                </button>
-                <button onclick="saveSettings()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition">
-                    保存设置
-                </button>
-            </div>
-        </div>
-    </div>
-
-    <!-- 改名模态窗口 -->
-    <div id="renameModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-        <div class="bg-white rounded-lg shadow-xl p-6 max-w-lg w-full mx-4">
-            <h2 class="text-xl font-bold mb-4">重命名仓库</h2>
-            <div class="space-y-4">
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">当前名称</label>
-                    <input type="text" id="renameOldName" readonly class="w-full border rounded px-3 py-2 text-sm bg-gray-100 text-gray-600">
-                </div>
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">新名称</label>
-                    <input type="text" id="renameNewName" placeholder="例如: owner/repo" class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
-                    <p class="text-xs text-gray-400 mt-1">格式: owner/repo</p>
-                </div>
-            </div>
-            <div id="renameError" class="hidden mt-3 bg-red-50 text-red-700 p-3 rounded text-sm border border-red-200"></div>
-            <div class="mt-6 flex justify-end gap-2">
-                <button onclick="closeRenameModal()" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded text-sm font-medium transition">
-                    取消
-                </button>
-                <button onclick="confirmRename()" id="renameConfirmBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition">
-                    确认改名
-                </button>
-            </div>
-        </div>
-    </div>
-
-    <!-- Step 0: 选择/新建仓库 -->
-    <div id="step0" class="bg-white rounded-lg shadow p-6 mb-6 step-card step-active">
-        <h2 class="text-lg font-semibold mb-4 flex items-center">
-            <span class="bg-blue-100 text-blue-600 rounded-full w-8 h-8 flex items-center justify-center text-sm mr-3">0</span>
-            选择仓库配置
-        </h2>
-        <div class="space-y-4">
+    <div class="max-w-4xl mx-auto">
+        <header class="mb-8 flex items-center justify-between">
             <div>
-                <button onclick="loadExistingMappings()" id="loadBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded text-sm font-medium transition">
-                    加载现有配置
-                </button>
-                <button onclick="createNewMapping()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded text-sm font-medium transition ml-2">
-                    新建仓库配置
-                </button>
+                <h1 class="text-2xl font-bold text-gray-900">Gitea-Jira 映射生成器</h1>
+                <p class="text-sm text-gray-500 mt-1">连接 Jira，自动提取 ID，生成 mappings.json 配置</p>
             </div>
-            
-            <div id="repoListContainer" class="hidden">
-                <h3 class="text-sm font-semibold text-gray-700 mb-2">现有仓库配置:</h3>
-                <div id="repoList" class="space-y-2 max-h-64 overflow-y-auto"></div>
-            </div>
-            
-            <div id="newRepoContainer" class="hidden">
-                <label class="block text-sm font-medium text-gray-700 mb-1">新仓库名称</label>
-                <input type="text" id="newRepoName" placeholder="例如: loren/issueBotTest" class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
-                <button onclick="confirmNewRepo()" class="mt-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition">
-                    确认并继续
+            <div class="flex items-center gap-2">
+                <button onclick="openSettings()"
+                    class="text-sm bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded transition">
+                    全局设置
                 </button>
+                <div class="text-xs bg-blue-100 text-blue-800 px-3 py-1 rounded-full">v2.0</div>
             </div>
-        </div>
-        <div id="step0Error" class="hidden mt-3 bg-red-50 text-red-700 p-3 rounded text-sm border border-red-200"></div>
-    </div>
+        </header>
 
-    <!-- Step 1: 项目配置 -->
-    <div id="step1" class="bg-white rounded-lg shadow p-6 mb-6 step-card hidden">
-        <h2 class="text-lg font-semibold mb-4 flex items-center">
-            <span class="bg-blue-100 text-blue-600 rounded-full w-8 h-8 flex items-center justify-center text-sm mr-3">1</span>
-            项目配置
-        </h2>
-        <div class="mb-3 bg-blue-50 border border-blue-200 rounded p-3 flex items-center justify-between">
-            <p class="text-sm text-blue-800">
-                <span class="font-semibold">当前配置仓库:</span> <span id="currentRepoName" class="font-mono">-</span>
-            </p>
-            <button onclick="backToStart()" class="text-xs bg-white hover:bg-gray-50 text-gray-700 px-3 py-1 rounded border">
-                返回
-            </button>
-        </div>
-        <div class="grid grid-cols-1 gap-4">
-            <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">目标 Jira 项目 Key</label>
-                <input type="text" id="projectKey" placeholder="例如: TEST" class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none uppercase font-bold text-gray-700">
-            </div>
+        <!-- 全局设置模态窗口 -->
+        <div id="settingsModal"
+            class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+            <div class="bg-white rounded-lg shadow-xl p-6 max-w-lg w-full mx-4">
+                <h2 class="text-xl font-bold mb-4">全局设置</h2>
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Jira 地址 (Base URL)</label>
+                        <input type="text" id="settingsJiraUrl" placeholder="https://your-domain.atlassian.net"
+                            class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
+                    </div>
 
-            <!-- Sprint ID 提取区域 -->
-            <div class="mt-4 border-t pt-4">
-                <h3 class="text-sm font-semibold text-gray-700 mb-2">配置 Sprint 映射（可选）</h3>
-                <p class="text-xs text-gray-500 mb-3">输入一个已在目标 Sprint 中的工单 Key，系统将自动提取 Sprint ID 并建立映射</p>
-                <div class="flex gap-2">
-                    <input type="text" id="issueKey" placeholder="例如: TEST-196" class="w-1/5 border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none uppercase">
-                    <button onclick="fetchSprintId()" id="fetchSprintBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded text-sm font-medium transition whitespace-nowrap">
-                        提取 Sprint
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Jira 用户名/邮箱</label>
+                        <input type="text" id="settingsJiraUser" placeholder="email@example.com"
+                            class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
+                        <p class="text-xs text-gray-400 mt-1">使用 PAT 时可留空</p>
+                    </div>
+
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">API Token / 密码</label>
+                        <input type="password" id="settingsJiraToken" placeholder="ATATT3xFfGF0..."
+                            class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
+                        <p class="text-xs text-gray-400 mt-1">推荐使用 PAT (Personal Access Token)</p>
+                    </div>
+                </div>
+                <div class="mt-6 flex justify-end gap-2">
+                    <button onclick="closeSettings()"
+                        class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded text-sm font-medium transition">
+                        取消
                     </button>
-                    <div id="sprintResult" class="flex-1 flex items-center px-3 text-sm"></div>
-                </div>
-                <div id="sprintMilestone" class="hidden mt-3 flex gap-2 items-center">
-                    <label class="text-xs font-medium text-gray-600 whitespace-nowrap">里程碑名称:</label>
-                    <input type="text" id="milestoneName" placeholder="例如: v1.0.1" class="flex-1 border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
-                    <button onclick="addSprintMapping()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded text-sm font-medium transition whitespace-nowrap">
-                        添加映射
+                    <button onclick="saveSettings()"
+                        class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition">
+                        保存设置
                     </button>
                 </div>
-                <div id="sprintError" class="hidden mt-2 bg-red-50 text-red-700 p-2 rounded text-xs border border-red-200"></div>
-                
-                <!-- Sprint 映射列表 -->
-                <div id="sprintListContainer" class="hidden mt-4">
-                    <h4 class="text-xs font-semibold text-gray-600 mb-2">已添加的 Sprint 映射:</h4>
-                    <div id="sprintList" class="space-y-2"></div>
-                </div>
             </div>
         </div>
-        <div class="mt-4 flex justify-end">
-            <button onclick="scanJira()" id="scanBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded shadow text-sm font-medium transition flex items-center">
-                <span id="scanBtnText">开始扫描</span>
-            </button>
-        </div>
-        <div id="scanError" class="hidden mt-3 bg-red-50 text-red-700 p-3 rounded text-sm border border-red-200"></div>
-    </div>
 
-    <!-- Step 2: 交互映射 -->
-    <div id="step2" class="bg-white rounded-lg shadow p-6 mb-6 hidden">
-        <h2 class="text-lg font-semibold mb-4 flex items-center">
-            <span class="bg-blue-100 text-blue-600 rounded-full w-8 h-8 flex items-center justify-center text-sm mr-3">2</span>
-            配置映射关系
-        </h2>
-        
-        <div class="space-y-6">
-            <!-- 优先级 -->
-            <div>
-                <h3 class="text-sm font-bold text-gray-800 uppercase tracking-wide border-b pb-2 mb-3">优先级映射 (Priority)</h3>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="priorityContainer">
-                    <!-- 动态生成 -->
-                </div>
-            </div>
-
-            <!-- 工单类型 -->
-            <div>
-                <h3 class="text-sm font-bold text-gray-800 uppercase tracking-wide border-b pb-2 mb-3">类型映射 （不填写的类型不会同步）(Issue Types)</h3>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="typeContainer">
-                    <!-- 动态生成 -->
-                </div>
-                <div class="mt-2 text-sm text-gray-600 flex items-center gap-2">
-                    <label>默认类型（设置后即使Gitea没打标签也会被同步到Jira）:</label>
-                    <select id="defaultTypeSelect" class="border rounded px-2 py-1 text-sm bg-gray-50"></select>
-                </div>
-            </div>
-
-            <!-- 状态流转 -->
-            <div>
-                <h3 class="text-sm font-bold text-gray-800 uppercase tracking-wide border-b pb-2 mb-3">状态动作 (Transitions)</h3>
-                <div class="bg-yellow-50 border border-yellow-200 rounded p-3 mb-3 text-xs text-yellow-800 hidden" id="transWarning"></div>
-                <div class="grid grid-cols-1 gap-3">
-                    <div class="flex items-center justify-between bg-gray-50 p-3 rounded border">
-                        <span class="font-mono text-sm font-medium text-gray-700">关闭 (Close)</span>
-                        <select id="transClose" class="border rounded px-2 py-1 text-sm w-1/2"></select>
+        <!-- 改名模态窗口 -->
+        <div id="renameModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+            <div class="bg-white rounded-lg shadow-xl p-6 max-w-lg w-full mx-4">
+                <h2 class="text-xl font-bold mb-4">重命名仓库</h2>
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">当前名称</label>
+                        <input type="text" id="renameOldName" readonly
+                            class="w-full border rounded px-3 py-2 text-sm bg-gray-100 text-gray-600">
                     </div>
-                    <div class="flex items-center justify-between bg-gray-50 p-3 rounded border">
-                        <span class="font-mono text-sm font-medium text-gray-700">重开 (Reopen)</span>
-                        <select id="transReopen" class="border rounded px-2 py-1 text-sm w-1/2"></select>
-                    </div>
-                    <div class="flex items-center justify-between bg-gray-50 p-3 rounded border">
-                        <span class="font-mono text-sm font-medium text-gray-700">处理中 (In Progress)</span>
-                        <select id="transProgress" class="border rounded px-2 py-1 text-sm w-1/2"></select>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">新名称</label>
+                        <input type="text" id="renameNewName" placeholder="例如: owner/repo"
+                            class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
+                        <p class="text-xs text-gray-400 mt-1">格式: owner/repo</p>
                     </div>
                 </div>
+                <div id="renameError"
+                    class="hidden mt-3 bg-red-50 text-red-700 p-3 rounded text-sm border border-red-200"></div>
+                <div class="mt-6 flex justify-end gap-2">
+                    <button onclick="closeRenameModal()"
+                        class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded text-sm font-medium transition">
+                        取消
+                    </button>
+                    <button onclick="confirmRename()" id="renameConfirmBtn"
+                        class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition">
+                        确认改名
+                    </button>
+                </div>
             </div>
         </div>
 
-        <!-- JSON 预览和编辑区 -->
-        <div class="mt-6 border-t pt-6">
-            <div class="flex items-center justify-between mb-3">
-                <h3 class="text-sm font-bold text-gray-800 uppercase tracking-wide">配置预览（可编辑）</h3>
-                <button onclick="updatePreview()" class="text-xs bg-blue-50 hover:bg-blue-100 text-blue-600 px-3 py-1 rounded transition">
-                    刷新预览
+        <!-- Step 0: 选择/新建仓库 -->
+        <div id="step0" class="bg-white rounded-lg shadow p-6 mb-6 step-card step-active">
+            <h2 class="text-lg font-semibold mb-4 flex items-center">
+                <span
+                    class="bg-blue-100 text-blue-600 rounded-full w-8 h-8 flex items-center justify-center text-sm mr-3">0</span>
+                选择仓库配置
+            </h2>
+            <div class="space-y-4">
+                <div>
+                    <button onclick="loadExistingMappings()" id="loadBtn"
+                        class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded text-sm font-medium transition">
+                        加载现有配置
+                    </button>
+                    <button onclick="createNewMapping()"
+                        class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded text-sm font-medium transition ml-2">
+                        新建仓库配置
+                    </button>
+                </div>
+
+                <div id="repoListContainer" class="hidden">
+                    <h3 class="text-sm font-semibold text-gray-700 mb-2">现有仓库配置:</h3>
+                    <div id="repoList" class="space-y-2 max-h-64 overflow-y-auto"></div>
+                </div>
+
+                <div id="newRepoContainer" class="hidden">
+                    <label class="block text-sm font-medium text-gray-700 mb-1">新仓库名称</label>
+                    <input type="text" id="newRepoName" placeholder="例如: loren/issueBotTest"
+                        class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
+                    <button onclick="confirmNewRepo()"
+                        class="mt-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition">
+                        确认并继续
+                    </button>
+                </div>
+            </div>
+            <div id="step0Error" class="hidden mt-3 bg-red-50 text-red-700 p-3 rounded text-sm border border-red-200">
+            </div>
+        </div>
+
+        <!-- Step 1: 项目配置 -->
+        <div id="step1" class="bg-white rounded-lg shadow p-6 mb-6 step-card hidden">
+            <h2 class="text-lg font-semibold mb-4 flex items-center">
+                <span
+                    class="bg-blue-100 text-blue-600 rounded-full w-8 h-8 flex items-center justify-center text-sm mr-3">1</span>
+                项目配置
+            </h2>
+            <div class="mb-3 bg-blue-50 border border-blue-200 rounded p-3 flex items-center justify-between">
+                <p class="text-sm text-blue-800">
+                    <span class="font-semibold">当前配置仓库:</span> <span id="currentRepoName" class="font-mono">-</span>
+                </p>
+                <button onclick="backToStart()"
+                    class="text-xs bg-white hover:bg-gray-50 text-gray-700 px-3 py-1 rounded border">
+                    返回
                 </button>
             </div>
-            <div class="relative">
-                <textarea id="jsonPreview" class="w-full h-96 bg-gray-900 text-gray-100 font-mono text-xs p-4 rounded outline-none border-2 border-gray-700 focus:border-blue-500 transition" spellcheck="false" placeholder="配置将在此显示，可直接编辑..."></textarea>
-                <div id="jsonError" class="hidden mt-2 bg-red-50 text-red-700 p-2 rounded text-xs border border-red-200"></div>
+            <div class="grid grid-cols-1 gap-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">目标 Jira 项目 Key</label>
+                    <input type="text" id="projectKey" placeholder="例如: TEST"
+                        class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none uppercase font-bold text-gray-700">
+                </div>
+
+                <!-- Sprint ID 提取区域 -->
+                <div class="mt-4 border-t pt-4">
+                    <h3 class="text-sm font-semibold text-gray-700 mb-2">配置 Sprint 映射（可选）</h3>
+                    <p class="text-xs text-gray-500 mb-3">输入一个已在目标 Sprint 中的工单 Key，系统将自动提取 Sprint ID 并建立映射</p>
+                    <div class="flex gap-2">
+                        <input type="text" id="issueKey" placeholder="例如: TEST-196"
+                            class="w-1/5 border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none uppercase">
+                        <button onclick="fetchSprintId()" id="fetchSprintBtn"
+                            class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded text-sm font-medium transition whitespace-nowrap">
+                            提取 Sprint
+                        </button>
+                        <div id="sprintResult" class="flex-1 flex items-center px-3 text-sm"></div>
+                    </div>
+                    <div id="sprintMilestone" class="hidden mt-3 flex gap-2 items-center">
+                        <label class="text-xs font-medium text-gray-600 whitespace-nowrap">里程碑名称:</label>
+                        <input type="text" id="milestoneName" placeholder="例如: v1.0.1"
+                            class="flex-1 border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
+                        <button onclick="addSprintMapping()"
+                            class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded text-sm font-medium transition whitespace-nowrap">
+                            添加映射
+                        </button>
+                    </div>
+                    <div id="sprintError"
+                        class="hidden mt-2 bg-red-50 text-red-700 p-2 rounded text-xs border border-red-200"></div>
+
+                    <!-- Sprint 映射列表 -->
+                    <div id="sprintListContainer" class="hidden mt-4">
+                        <h4 class="text-xs font-semibold text-gray-600 mb-2">已添加的 Sprint 映射:</h4>
+                        <div id="sprintList" class="space-y-2"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-4 flex justify-end">
+                <button onclick="scanJira()" id="scanBtn"
+                    class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded shadow text-sm font-medium transition flex items-center">
+                    <span id="scanBtnText">开始扫描</span>
+                </button>
+            </div>
+            <div id="scanError" class="hidden mt-3 bg-red-50 text-red-700 p-3 rounded text-sm border border-red-200">
             </div>
         </div>
 
-        <div class="mt-6 flex justify-end border-t pt-4">
-            <button onclick="saveToFile()" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded shadow text-sm font-medium transition">
-                保存到 mappings.json
-            </button>
-        </div>
-    </div>
+        <!-- Step 2: 交互映射 -->
+        <div id="step2" class="bg-white rounded-lg shadow p-6 mb-6 hidden">
+            <h2 class="text-lg font-semibold mb-4 flex items-center">
+                <span
+                    class="bg-blue-100 text-blue-600 rounded-full w-8 h-8 flex items-center justify-center text-sm mr-3">2</span>
+                配置映射关系
+            </h2>
 
-    <!-- Step 3: 保存结果 -->
-    <div id="step3" class="bg-white rounded-lg shadow p-6 mb-12 hidden">
-        <h2 class="text-lg font-semibold mb-4 flex items-center justify-between">
-            <div class="flex items-center">
-                <span class="bg-green-100 text-green-600 rounded-full w-8 h-8 flex items-center justify-center text-sm mr-3">3</span>
-                保存成功
+            <div class="space-y-6">
+                <!-- 优先级 -->
+                <div>
+                    <h3 class="text-sm font-bold text-gray-800 uppercase tracking-wide border-b pb-2 mb-3">优先级映射
+                        (Priority)</h3>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="priorityContainer">
+                        <!-- 动态生成 -->
+                    </div>
+                </div>
+
+                <!-- 工单类型 -->
+                <div>
+                    <h3 class="text-sm font-bold text-gray-800 uppercase tracking-wide border-b pb-2 mb-3">类型映射
+                        （不填写的类型不会同步）(Issue Types)</h3>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="typeContainer">
+                        <!-- 动态生成 -->
+                    </div>
+                    <div class="mt-2 text-sm text-gray-600 flex items-center gap-2">
+                        <label>默认类型（设置后即使Gitea没打标签也会被同步到Jira）:</label>
+                        <select id="defaultTypeSelect" class="border rounded px-2 py-1 text-sm bg-gray-50"></select>
+                    </div>
+                </div>
+
+                <!-- 状态流转 -->
+                <div>
+                    <h3 class="text-sm font-bold text-gray-800 uppercase tracking-wide border-b pb-2 mb-3">状态动作
+                        (Transitions)</h3>
+                    <div class="bg-yellow-50 border border-yellow-200 rounded p-3 mb-3 text-xs text-yellow-800 hidden"
+                        id="transWarning"></div>
+                    <div class="grid grid-cols-1 gap-3">
+                        <div class="flex items-center justify-between bg-gray-50 p-3 rounded border">
+                            <span class="font-mono text-sm font-medium text-gray-700">关闭 (Close)</span>
+                            <select id="transClose" class="border rounded px-2 py-1 text-sm w-1/2"></select>
+                        </div>
+                        <div class="flex items-center justify-between bg-gray-50 p-3 rounded border">
+                            <span class="font-mono text-sm font-medium text-gray-700">重开 (Reopen)</span>
+                            <select id="transReopen" class="border rounded px-2 py-1 text-sm w-1/2"></select>
+                        </div>
+                        <div class="flex items-center justify-between bg-gray-50 p-3 rounded border">
+                            <span class="font-mono text-sm font-medium text-gray-700">处理中 (In Progress)</span>
+                            <select id="transProgress" class="border rounded px-2 py-1 text-sm w-1/2"></select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- JSON 预览和编辑区 -->
+            <div class="mt-6 border-t pt-6">
+                <div class="flex items-center justify-between mb-3">
+                    <h3 class="text-sm font-bold text-gray-800 uppercase tracking-wide">配置预览（可编辑）</h3>
+                    <button onclick="updatePreview()"
+                        class="text-xs bg-blue-50 hover:bg-blue-100 text-blue-600 px-3 py-1 rounded transition">
+                        刷新预览
+                    </button>
+                </div>
+                <div class="relative">
+                    <textarea id="jsonPreview"
+                        class="w-full h-96 bg-gray-900 text-gray-100 font-mono text-xs p-4 rounded outline-none border-2 border-gray-700 focus:border-blue-500 transition"
+                        spellcheck="false" placeholder="配置将在此显示，可直接编辑..."></textarea>
+                    <div id="jsonError"
+                        class="hidden mt-2 bg-red-50 text-red-700 p-2 rounded text-xs border border-red-200"></div>
+                </div>
+            </div>
+
+            <div class="mt-6 flex justify-end border-t pt-4">
+                <button onclick="saveToFile()"
+                    class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded shadow text-sm font-medium transition">
+                    保存到 mappings.json
+                </button>
+            </div>
+        </div>
+
+        <!-- Step 3: 保存结果 -->
+        <div id="step3" class="bg-white rounded-lg shadow p-6 mb-12 hidden">
+            <h2 class="text-lg font-semibold mb-4 flex items-center justify-between">
+                <div class="flex items-center">
+                    <span
+                        class="bg-green-100 text-green-600 rounded-full w-8 h-8 flex items-center justify-center text-sm mr-3">3</span>
+                    保存成功
+                </div>
+            </h2>
+            <div id="saveResult" class="text-sm"></div>
+            <div class="mt-4">
+                <button onclick="location.reload()"
+                    class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition">
+                    继续配置其他仓库
+                </button>
             </div>
-        </h2>
-        <div id="saveResult" class="text-sm"></div>
-        <div class="mt-4">
-            <button onclick="location.reload()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition">
-                继续配置其他仓库
-            </button>
         </div>
     </div>
-</div>
 
-<script src="app.js"></script>
+    <script src="mappingsEditor.js"></script>
 
 </body>
+
 </html>
\ No newline at end of file
