131 lines
6.5 KiB
HTML
131 lines
6.5 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>飞书提醒配置</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
body {
|
||
font-family: 'Inter', system-ui, sans-serif;
|
||
}
|
||
</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-6">
|
||
<h1 class="text-2xl font-bold text-gray-900">飞书提醒配置</h1>
|
||
<p class="text-sm text-gray-500 mt-1">配置规则，当Gitea事件发生时自动发送飞书通知</p>
|
||
</header>
|
||
|
||
<!-- 新建规则按钮 -->
|
||
<div class="mb-6">
|
||
<button onclick="showRuleModal()"
|
||
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition">
|
||
+ 新建规则
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 规则列表 -->
|
||
<div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
|
||
<div class="px-4 py-3 bg-gray-50 border-b border-gray-200">
|
||
<h3 class="text-sm font-semibold text-gray-700">已配置的规则</h3>
|
||
</div>
|
||
<div id="rulesList" class="divide-y divide-gray-200">
|
||
<div class="p-8 text-center text-gray-400">加载中...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 规则编辑模态窗口 -->
|
||
<div id="ruleModal" 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 max-h-[90vh] overflow-y-auto">
|
||
<h2 class="text-xl font-bold mb-4" id="modalTitle">新建规则</h2>
|
||
<form id="ruleForm" class="space-y-4">
|
||
<input type="hidden" id="ruleId">
|
||
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">规则名称</label>
|
||
<input type="text" id="ruleName" required placeholder="如: 新Issue通知"
|
||
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">触发事件</label>
|
||
<select id="ruleEvent" required onchange="handleEventChange()"
|
||
class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
|
||
<option value="">-- 选择事件 --</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- 动态过滤条件 -->
|
||
<div id="filterField" class="hidden bg-gray-50 p-3 rounded border border-gray-200">
|
||
<label id="filterLabel" class="block text-sm font-medium text-gray-700 mb-1">过滤条件</label>
|
||
<input type="text" id="ruleFilterValue"
|
||
class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
|
||
<input type="hidden" id="ruleFilterKey">
|
||
<p id="filterHelp" class="text-xs text-gray-500 mt-1"></p>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">消息渠道</label>
|
||
<select id="ruleChannel" onchange="toggleChannelFields()"
|
||
class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
|
||
<option value="group">群聊</option>
|
||
<option value="private">私聊</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- 私聊配置 -->
|
||
<div id="privateFields" class="hidden">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">接收者（手机号或邮箱）</label>
|
||
<input type="text" id="targetContact" placeholder="如: 13800138000 或 test@example.com"
|
||
class="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- @ 用户（仅群聊显示） -->
|
||
<div id="atUsersField">
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">@ 用户（手机号/邮箱，逗号分隔）</label>
|
||
<input type="text" id="atUsers" placeholder="13800138000,test@example.com 或 all"
|
||
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">填 all 表示 @所有人</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="flex items-center">
|
||
<input type="checkbox" id="ruleEnabled" checked class="mr-2">
|
||
<span class="text-sm text-gray-700">启用规则</span>
|
||
</label>
|
||
</div>
|
||
</form>
|
||
|
||
<div id="modalError"
|
||
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-between">
|
||
<button onclick="testSend()"
|
||
class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded text-sm font-medium transition">
|
||
测试发送
|
||
</button>
|
||
<div class="flex gap-2">
|
||
<button onclick="closeRuleModal()"
|
||
class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded text-sm font-medium transition">
|
||
取消
|
||
</button>
|
||
<button onclick="saveRule()"
|
||
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>
|
||
</div>
|
||
|
||
<script src="larkReminder.js"></script>
|
||
</body>
|
||
|
||
</html> |