wechat-robot/internal/view/robot/show.html

<div class="mb-6">
    <div class="flex items-center">
        <a href="/admin/robots" class="text-indigo-600 hover:text-indigo-800 mr-4">
            <i class="fas fa-arrow-left"></i>
        </a>
        <h1 class="text-2xl font-bold text-gray-800">{{.Robot.Nickname}}</h1>
        {{if eq .Robot.Status "online"}}
            <span class="ml-4 px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">在线</span>
        {{else if eq .Robot.Status "error"}}
            <span class="ml-4 px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">错误</span>
        {{else}}
            <span class="ml-4 px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">离线</span>
        {{end}}
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- 左侧：机器人信息 -->
    <div class="lg:col-span-1">
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center justify-center mb-4">
                {{if .Robot.Avatar}}
                    <img src="{{.Robot.Avatar}}" alt="{{.Robot.Nickname}}" class="w-24 h-24 rounded-full">
                {{else}}
                    <div class="w-24 h-24 rounded-full bg-gray-200 flex items-center justify-center text-gray-500">
                        <i class="fas fa-user text-4xl"></i>
                    </div>
                {{end}}
            </div>
            
            <div class="border-t pt-4">
                <h2 class="text-lg font-medium mb-4">机器人信息</h2>
                <div class="space-y-2">
                    <div class="flex justify-between">
                        <span class="text-gray-600">容器ID:</span>
                        <span class="text-gray-900 font-mono">{{.Robot.ContainerID | slice 0 12}}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">状态:</span>
                        <span class="text-gray-900">
                            {{if eq .Robot.Status "online"}}在线
                            {{else if eq .Robot.Status "offline"}}离线
                            {{else}}错误{{end}}
                        </span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">微信ID:</span>
                        <span class="text-gray-900">{{if .Robot.WechatID}}{{.Robot.WechatID}}{{else}}-{{end}}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">最近登录:</span>
                        <span class="text-gray-900">{{if .Robot.LastLoginAt}}{{.Robot.LastLoginAt.Format "2006-01-02 15:04:05"}}{{else}}-{{end}}</span>
                    </div>
                </div>
            </div>
            
            {{if .Robot.ErrorMessage}}
            <div class="mt-4 p-3 bg-red-50 text-red-700 rounded-md">
                <h3 class="font-medium mb-1">错误信息:</h3>
                <p>{{.Robot.ErrorMessage}}</p>
            </div>
            {{end}}
            
            <div class="mt-6 flex flex-col space-y-2">
                {{if eq .Robot.Status "online"}}
                    <a href="/admin/robots/{{.Robot.ID}}/contacts" class="bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded text-center">
                        <i class="fas fa-address-book mr-2"></i> 查看联系人
                    </a>
                    <form action="/admin/robots/{{.Robot.ID}}/logout" method="POST">
                        <button type="submit" class="w-full bg-yellow-600 hover:bg-yellow-700 text-white py-2 px-4 rounded">
                            <i class="fas fa-sign-out-alt mr-2"></i> 退出微信
                        </button>
                    </form>
                {{else}}
                    <a href="/admin/robots/{{.Robot.ID}}/login" class="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded text-center">
                        <i class="fas fa-sign-in-alt mr-2"></i> 登录微信
                    </a>
                {{end}}
                
                <form action="/admin/robots/{{.Robot.ID}}" method="POST" onsubmit="return confirm('确定要删除这个机器人吗？此操作不可恢复！')">
                    <input type="hidden" name="_method" value="DELETE">
                    <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded">
                        <i class="fas fa-trash-alt mr-2"></i> 删除机器人
                    </button>
                </form>
            </div>
        </div>
    </div>
    
    <!-- 右侧：容器日志或状态信息 -->
    <div class="lg:col-span-2">
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-lg font-medium mb-4">容器状态</h2>
            
            <div class="bg-gray-100 rounded-md p-4 h-96 overflow-auto font-mono text-sm">
                <!-- 这里可以显示容器日志或状态信息 -->
                <div id="container-logs" class="whitespace-pre-wrap">
                    <div class="flex justify-center items-center h-full text-gray-500">
                        加载中...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 实时获取容器状态的示例代码
    function fetchContainerStatus() {
        fetch('/api/robots/{{.Robot.ID}}/status')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 更新状态信息
                    const statusEl = document.getElementById('container-logs');
                    statusEl.innerHTML = `<div class="mb-2">
                        <strong>容器ID:</strong> ${data.data.robot.container_id}<br>
                        <strong>状态:</strong> ${data.data.status}<br>
                        <strong>上次更新:</strong> ${new Date().toLocaleString()}
                    </div>`;
                }
            })
            .catch(error => {
                console.error('Error fetching status:', error);
            });
    }
    
    // 页面加载后立即获取一次状态
    document.addEventListener('DOMContentLoaded', function() {
        fetchContainerStatus();
        // 每10秒更新一次状态
        setInterval(fetchContainerStatus, 10000);
    });
</script>