343 lines
18 KiB
HTML
343 lines
18 KiB
HTML
<!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;
|
||
}
|
||
</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>
|
||
<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="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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 手动扫描 Transition -->
|
||
<div class="mb-4 p-3 bg-purple-50 border border-purple-200 rounded">
|
||
<p class="text-xs text-purple-700 mb-2">输入工单 Key 扫描该工单当前可用的状态流转，扫描结果会追加到下拉菜单中</p>
|
||
<div class="flex gap-2">
|
||
<input type="text" id="transIssueKey" placeholder="例如: TEST-123"
|
||
class="flex-1 border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 outline-none uppercase">
|
||
<button onclick="scanTransitions()" id="scanTransBtn"
|
||
class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded text-sm font-medium transition whitespace-nowrap">
|
||
扫描流转
|
||
</button>
|
||
</div>
|
||
<div id="transResult" class="mt-2 text-sm"></div>
|
||
<div id="transError"
|
||
class="hidden mt-2 bg-red-50 text-red-700 p-2 rounded text-xs border border-red-200"></div>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="mappingsEditor.js"></script>
|
||
|
||
</body>
|
||
|
||
</html> |