templates/user_management.html

{% extends "base.html" %}

{% block title %}用户管理{% endblock %}

{% block content %}
<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold text-gray-800">用户列表</h2>
        <button id="sycGatewayBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">
            一键同步GPT网关
        </button>
        <button id="addUserBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">
            添加用户
        </button>
    </div>

    <!-- 用户列表 -->
    <table class="min-w-full">
        <thead>
            <tr>
                <th

                    class="px-6 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    用户名
                </th>
                <th

                    class="px-6 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    角色
                </th>
                <th

                    class="px-6 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    绑定GPT账号
                </th>
                <th

                    class="px-6 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    GPT过期时间
                </th>
                <th

                    class="px-6 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    绑定Claude账号
                </th>
                <th

                    class="px-6 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    Claude过期时间
                </th>
                <th

                    class="px-6 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    操作
                </th>
            </tr>
        </thead>
        <tbody id="userTableBody">
            <!-- 用户数据将动态插入这里 -->
        </tbody>
    </table>

    <!-- 用户表单模态框 -->
    <div id="userModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="mt-3">
                <h3 class="text-lg font-medium text-gray-900 mb-4">用户信息</h3>
                <form id="userForm">
                    <input type="hidden" id="userId">
                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
                            用户名
                        </label>
                        <input

                            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"

                            id="username" type="text" required>
                    </div>
                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
                            密码
                        </label>
                        <input

                            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"

                            id="password" type="password">
                    </div>
                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="role">
                            角色
                        </label>
                        <select

                            class="shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"

                            id="role" required>
                            <option value="admin">管理员</option>
                            <option value="user">普通用户</option>
                        </select>
                    </div>
                    <!-- 添加GPT过期时间选择 -->
                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="expirationDate">
                            GPT过期时间
                        </label>
                        <input

                            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"

                            id="expirationDate" type="datetime-local">
                    </div>
                    <!-- 添加Claude过期时间选择 -->
                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="expirationClaude">
                            Claude过期时间
                        </label>
                        <input

                            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"

                            id="expirationClaude" type="datetime-local">
                    </div>
                    <div class="flex items-center justify-end">
                        <button type="button" onclick="closeModal()"

                            class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mr-2">
                            取消
                        </button>
                        <button type="submit"

                            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                            保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 绑定账号模态框 -->
    <div id="bindModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="mt-3">
                <h3 class="text-lg font-medium text-gray-900 mb-4">请选择要绑定的账号</h3>
                <form id="bindForm">
                    <input type="hidden" id="userId">
                    <div class="mb-4">
                        <select

                            class="shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"

                            id="email">
                        </select>
                    </div>
                    <div class="mb-4">
                        <select

                            class="shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"

                            id="claudeEmail">
                        </select>
                    </div>
                    <div class="flex items-center justify-end">
                        <button type="button" onclick="closeBindModal()"

                            class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mr-2">
                            取消
                        </button>
                        <button type="submit"

                            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                            保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>


</div>
{% endblock %}
{% block extra_js %}
<script>

    let users = [];

    const bindModal = document.getElementById('bindModal');

    const modal = document.getElementById('userModal');

    const userForm = document.getElementById('userForm');

    const bindForm = document.getElementById('bindForm');

    const addUserBtn = document.getElementById('addUserBtn');

    const sycGateway = document.getElementById('sycGatewayBtn');

    // 加载用户列表

    function loadUsers() {

        fetch('/api/users')

            .then(response => response.json())

            .then(data => {

                users = data;

                renderUsers();

            })

            .catch(error => console.error('Error:', error));

    }



    // 渲染用户列表

    function renderUsers() {

        const tbody = document.getElementById('userTableBody');

        tbody.innerHTML = '';

        users.forEach(user => {

            const tr = document.createElement('tr');

            tr.innerHTML = `

                    <td class="px-6 py-4 whitespace-nowrap">${user.username}</td>

                    <td class="px-6 py-4 whitespace-nowrap">${user.role}</td>

                    <td class="px-6 py-4 whitespace-nowrap">${user.bind_email}</td>

                    <td class="px-6 py-4 whitespace-nowrap">${user.expiration_time}</td>

                    <td class="px-6 py-4 whitespace-nowrap">${user.bind_claude_email}</td>

                    <td class="px-6 py-4 whitespace-nowrap">${user.claude_expiration_time}</td>

                    <td class="px-6 py-4 whitespace-nowrap">

                        <button onclick="bindChatGPT('${user.id}')" class="text-blue-600 hover:text-blue-900 mr-4">绑定GPT</button>

                        <button onclick="bindClaude('${user.id}')" class="text-blue-600 hover:text-blue-900 mr-4">绑定Claude</button>

                        <button onclick="editUser('${user.id}')" class="text-blue-600 hover:text-blue-900 mr-4">编辑</button>

                        <button onclick="deleteUser('${user.id}')" class="text-red-600 hover:text-red-900">删除</button>

                        <button onclick="deleteBind('${user.id}')" class="text-red-600 hover:text-red-900">解绑GPT</button>

                        <button onclick="deleteClaudeBind('${user.id}')" class="text-red-600 hover:text-red-900">解绑Claude</button>

                    </td>

                `;

            tbody.appendChild(tr);

        });

    }



    // 打开用户模态框

    function openModal(user = null) {

        const form = document.getElementById('userForm');

        if (user) {

            document.getElementById('userId').value = user.id;

            document.getElementById('username').value = user.username;

            document.getElementById('password').value = '';

            document.getElementById('role').value = user.role;

            document.getElementById('expirationDate').value = user.expiration_time;

            document.getElementById('expirationClaude').value = user.claude_expiration_time;

        } else {

            form.reset();

            document.getElementById('userId').value = '';

        }

        modal.classList.remove('hidden');

    }



    // 关闭用户模态框

    function closeModal() {

        modal.classList.add('hidden');

    }



    // 编辑用户

    function editUser(userId) {

        const user = users.find(u => u.id === userId);

        if (user) {

            openModal(user);

        }

    }



    // 打开绑定模态框

    function openBindModal(user = null,type) {

        if(type == 1){

            url = "/api/all_email"

            fetch(url)

            .then(response => response.json())

            .then(data => {

                const emailSelect = document.getElementById('email');

                document.getElementById('email').classList.remove('hidden')

                document.getElementById('claudeEmail').classList.add('hidden')

                emailSelect.innerHTML = ''; 

                document.getElementById('userId').value = user.id;

                data.forEach(email => {

                    const option = document.createElement('option');

                    option.value = email; 

                    option.textContent = email; 

                    emailSelect.appendChild(option);

                });



                if (user && user.email) {

                    emailSelect.value = user.email; 

                }

            })

            .catch(error => console.error('Error:', error));

        }else{

            url = "/api/all_claude_email"

            fetch(url)

            .then(response => response.json())

            .then(data => {

                const emailSelect = document.getElementById('claudeEmail');

                document.getElementById('claudeEmail').classList.remove('hidden')

                document.getElementById('email').classList.add('hidden')

                emailSelect.innerHTML = ''; 

                document.getElementById('userId').value = user.id;

                data.forEach(email => {

                    const option = document.createElement('option');

                    option.value = email; 

                    option.textContent = email; 

                    emailSelect.appendChild(option);

                });



                if (user && user.email) {

                    emailSelect.value = user.email; 

                }

            })

            .catch(error => console.error('Error:', error));

        }

        

        bindModal.classList.remove('hidden');

    }



    // 关闭绑定模态框

    function closeBindModal() {

        bindModal.classList.add('hidden');

    }



    // 绑定GPT账号

    function bindChatGPT(userId) {

        const user = users.find(u => u.id === userId);

        if (user) {

            openBindModal(user,1);

        }

    }

    // 绑定Claude账号

    function bindClaude(userId) {

        const user = users.find(u => u.id === userId);

        if (user) {

            openBindModal(user,0);

        }

    }





    // 删除用户

    function deleteUser(userId) {

        if (confirm('确定要删除这个用户吗？')) {

            fetch(`/api/users/${userId}`, {

                method: 'DELETE'

            })

                .then(response => response.json())

                .then(data => {

                    if (data.success) {

                        loadUsers();

                    }

                })

                .catch(error => console.error('Error:', error));

        }

    }



    // 解绑GPT账号

    function deleteBind(userId) {

        if (confirm('确定要解除这个用户绑定的ChatGPT账号吗？')) {

            fetch(`/api/del_bind/${userId}`, {

                method: 'DELETE'

            })

                .then(response => response.json())

                .then(data => {

                    if (data.success) {

                        loadUsers();

                    }

                })

                .catch(error => console.error('Error:', error));

        }

    }



    // 解绑Claude账号

    function deleteClaudeBind(userId) {

        if (confirm('确定要解除这个用户绑定的Claude账号吗？')) {

            fetch(`/api/del_bindClaude/${userId}`, {

                method: 'DELETE'

            })

                .then(response => response.json())

                .then(data => {

                    if (data.success) {

                        loadUsers();

                    }

                })

                .catch(error => console.error('Error:', error));

        }

    }



    // 表单提交处理

    userForm.addEventListener('submit', function (e) {

        e.preventDefault();

        const userId = document.getElementById('userId').value;

        const userData = {

            username: document.getElementById('username').value,

            password: document.getElementById('password').value,

            expiration_time: document.getElementById('expirationDate').value,

            claude_expiration_time: document.getElementById('expirationClaude').value,

            role: document.getElementById('role').value

        };



        const url = userId ? `/api/users/${userId}` : '/api/users';

        const method = userId ? 'PUT' : 'POST';



        fetch(url, {

            method: method,

            headers: {

                'Content-Type': 'application/json'

            },

            body: JSON.stringify(userData)

        })

            .then(response => response.json())

            .then(data => {

                if (data.success) {

                    closeModal();

                    loadUsers();

                }

            })

            .catch(error => console.error('Error:', error));

    });





    // 表单提交处理

    bindForm.addEventListener('submit', function (e) {

        e.preventDefault();

        const userId = document.getElementById('userId').value;

        const emailSelect = document.getElementById('email');

        const emailSelectClaude = document.getElementById('claudeEmail');

        const bindEmail = {email: emailSelect.value};

        const bindClaudeEmail = {email: emailSelectClaude.value};

        

        const method = 'PUT';

        if(document.getElementById('claudeEmail').classList.contains('hidden')){

            url = `/api/bind/${userId}`;

            fetch(url, {

                method: method,

                headers: {

                    'Content-Type': 'application/json'

                },

                body: JSON.stringify(bindEmail)

            })

            .then(response => response.json())

            .then(data => {

                if (data.success) {

                    closeBindModal();

                    loadUsers();

                }

            })

            .catch(error => console.error('Error:', error));

        }else{

            url = `/api/bindClaude/${userId}`;

            fetch(url, {

                method: method,

                headers: {

                    'Content-Type': 'application/json'

                },

                body: JSON.stringify(bindClaudeEmail)

            })

            .then(response => response.json())

            .then(data => {

                if (data.success) {

                    closeBindModal();

                    loadUsers();

                }

            })

            .catch(error => console.error('Error:', error));

        }

        

    });



    // 添加用户按钮点击事件

    addUserBtn.addEventListener('click', () => openModal());



    // 一键同步

    function syc() {

    if (confirm('确定是否同步网关？')) {

        fetch(`/api/syc`, {

            method: 'GET'

        })

            .then(response => response.json())

            .then(data => {

                if (data.success) {

                    loadUsers();

                    alert('同步成功！'); // 添加弹窗

                } else {

                    alert('同步失败！'); // 可选，处理失败情况

                }

            })

            .catch(error => console.error('Error:', error));

    }

}





    // 一键同步按钮点击事件

    sycGateway.addEventListener('click', () => syc());





    // 初始加载用户列表

    loadUsers();

</script>
{% endblock %}