WebhockTransfer/templates/admin/channels.html

{% extends "admin/base.html" %}
{% block title %}通知渠道 - Webhook{% endblock %}
{% block content %}
<div class="row mb-3">
    <div class="col">
        <h3>通知渠道列表</h3>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-primary" onclick="openAddModal()">添加渠道</button>
    </div>
</div>

<div class="alert alert-info alert-dismissible fade show" role="alert">
    <strong>什么是“通知渠道”？</strong>
    <p class="mb-0">
        通知渠道（Notification Channels）定义了<strong>消息推送到哪里</strong>（通常是IM工具的群机器人）。<br>
        <strong>类型</strong>：支持 飞书 (Feishu) 和 企业微信 (WeCom) 的群机器人。
    </p>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>类型</th>
            <th>Webhook URL</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {% for c in channels %}
        <tr>
            <td>{{ c.id }}</td>
            <td>{{ c.name }}</td>
            <td>
                {% if c.channel_type == 'feishu' %}
                <span class="badge bg-success">飞书</span>
                {% else %}
                <span class="badge bg-primary">企业微信</span>
                {% endif %}
            </td>
            <td class="text-truncate" style="max-width: 300px;">{{ c.webhook_url }}</td>
            <td>
                <button class="btn btn-sm btn-outline-primary" 
                    onclick="openEditModal('{{ c.id }}', '{{ c.name }}', '{{ c.channel_type }}', '{{ c.webhook_url }}')">修改</button>
                <form action="/admin/channels/delete" method="post" style="display:inline" onsubmit="return confirm('确定删除？')">
                    <input type="hidden" name="id" value="{{ c.id }}">
                    <button type="submit" class="btn btn-sm btn-danger">删除</button>
                </form>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<!-- Modal -->
<div class="modal fade" id="channelModal" tabindex="-1">
    <div class="modal-dialog">
        <form id="channelForm" action="/admin/channels" method="post">
            <input type="hidden" name="id" id="channelId">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">添加通知渠道</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">名称 (内部标识)</label>
                        <input type="text" class="form-control" name="name" id="channelName" required placeholder="例如: 运营群-飞书">
                        <div class="form-text">给这个渠道起个名字，例如“财务群-企微”。</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">类型</label>
                        <select class="form-select" name="channel_type" id="channelType">
                            <option value="feishu">飞书 (Feishu)</option>
                            <option value="wecom">企业微信 (WeCom)</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Webhook URL</label>
                        <input type="url" class="form-control" name="webhook_url" id="channelUrl" required placeholder="https://...">
                        <div class="form-text">
                            <strong>飞书</strong>: https://open.feishu.cn/open-apis/bot/v2/hook/...<br>
                            <strong>企微</strong>: https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=...
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    var modal = new bootstrap.Modal(document.getElementById('channelModal'));

    function openAddModal() {
        document.getElementById('modalTitle').innerText = "添加通知渠道";
        document.getElementById('channelForm').action = "/admin/channels";
        document.getElementById('channelId').value = "";
        document.getElementById('channelName').value = "";
        document.getElementById('channelType').value = "feishu";
        document.getElementById('channelUrl').value = "";
        modal.show();
    }

    function openEditModal(id, name, type, url) {
        document.getElementById('modalTitle').innerText = "修改通知渠道";
        document.getElementById('channelForm').action = "/admin/channels/update";
        document.getElementById('channelId').value = id;
        document.getElementById('channelName').value = name;
        document.getElementById('channelType').value = type;
        document.getElementById('channelUrl').value = url;
        modal.show();
    }
</script>
{% endblock %}