feat: 添加捞虾功能(自动扫描 Agent)🦐
🎯 新功能: - 捞虾按钮:自动扫描 Docker 容器和宿主机进程 - 发现 openclaw 相关的 Agent 实例 - 自动创建或更新 Agent 记录 - 过滤掉没有端口的'石头'(无效进程) 🦐 捞虾逻辑: 1. 扫描 Docker 容器(跳过数据库、网关等辅助容器) 2. 扫描宿主机进程(ps aux) 3. 从容器名/进程名推断 Agent 名称和专长 4. 提取端口信息 5. 只保存有端口的有效 Agent ✨ 优化: - 处理复杂的容器名称(如 openclaw-instance2-openclaw-cn-gateway-1) - 自动推断 Emoji 和专长 - 避免重复创建 📊 捞虾结果: - 显示捞到的虾数量 - 显示新增和更新数量 - 区分 Docker 容器和宿主机进程 🎨 界面: - 按钮文案:'🦐 捞虾' / '🦐 捞虾中...' - 提示信息生动有趣 - 加载状态显示 🐛 修复: - 不过滤 gateway/watcher 容器(可能包含 Agent) - 只跳过数据库容器(postgres/db/redis) 🦸 感谢北极星 ⭐ 的'捞虾'命名灵感!
This commit is contained in:
@@ -11,5 +11,7 @@ urlpatterns = [
|
||||
path('agents/<int:agent_id>/memory/<str:date>/', views.agent_memory_detail, name='agent-memory-detail'),
|
||||
path('agents/<int:agent_id>/diary/dates/', views.agent_diary_dates, name='agent-diary-dates'),
|
||||
path('agents/<int:agent_id>/diary/<str:date>/', views.agent_diary_detail, name='agent-diary-detail'),
|
||||
path('agents/scan/', views.scan_agents, name='agent-scan'),
|
||||
path('agents/sync/', views.sync_agent, name='agent-sync'),
|
||||
path('tools/', views.tools_list, name='tools-list'),
|
||||
]
|
||||
|
||||
@@ -5,6 +5,7 @@ from rest_framework.decorators import api_view
|
||||
from rest_framework.response import Response
|
||||
from datetime import datetime
|
||||
from agents.models import Agent, AgentDiary
|
||||
import docker
|
||||
|
||||
@api_view(['GET'])
|
||||
def agent_list(request):
|
||||
@@ -141,3 +142,249 @@ def agent_diary_detail(request, agent_id, date):
|
||||
})
|
||||
except AgentDiary.DoesNotExist:
|
||||
return Response({'error': '该日期没有日记'}, status=404)
|
||||
|
||||
@api_view(['POST'])
|
||||
def scan_agents(request):
|
||||
"""自动扫描本机 Agent 实例(Docker 容器 + 宿主机进程)"""
|
||||
import subprocess
|
||||
import re
|
||||
|
||||
scanned = []
|
||||
created_count = 0
|
||||
updated_count = 0
|
||||
|
||||
# 专长和 Emoji 映射
|
||||
specialty_map = {
|
||||
'instance2': '主力/通用',
|
||||
'daotong': '道德经注解',
|
||||
'coder': '代码专家',
|
||||
'web': '网站制作',
|
||||
'physics': '物理研究',
|
||||
'secretary': '秘书/助理',
|
||||
'ditin': '情报/监听',
|
||||
'watcher': '舰队监控',
|
||||
}
|
||||
|
||||
emoji_map = {
|
||||
'instance2': '🦸',
|
||||
'daotong': '☯️',
|
||||
'coder': '🔧',
|
||||
'web': '🕸️',
|
||||
'physics': '⚛️',
|
||||
'secretary': '🦄',
|
||||
'ditin': '👂',
|
||||
'watcher': '👁️',
|
||||
}
|
||||
|
||||
def get_agent_info(name):
|
||||
"""根据名称推断专长和 Emoji"""
|
||||
specialty = '通用'
|
||||
emoji = '🤖'
|
||||
|
||||
for key, value in specialty_map.items():
|
||||
if key in name.lower():
|
||||
specialty = value
|
||||
break
|
||||
|
||||
for key, value in emoji_map.items():
|
||||
if key in name.lower():
|
||||
emoji = value
|
||||
break
|
||||
|
||||
return specialty, emoji
|
||||
|
||||
# 1. 扫描 Docker 容器
|
||||
try:
|
||||
client = docker.from_env()
|
||||
containers = client.containers.list()
|
||||
|
||||
for container in containers:
|
||||
container_name = container.name
|
||||
|
||||
# 只处理 openclaw 相关的容器
|
||||
if 'openclaw' not in container_name.lower():
|
||||
continue
|
||||
|
||||
# 跳过数据库、网关、监控等辅助容器
|
||||
if any(skip in container_name.lower() for skip in ['postgres', 'db', 'redis', 'gateway', 'watcher', 'monitor']):
|
||||
continue
|
||||
|
||||
# 提取端口
|
||||
ports = container.ports
|
||||
port = None
|
||||
if '18789/tcp' in ports and ports['18789/tcp']:
|
||||
port = ports['18789/tcp'][0]['HostPort']
|
||||
|
||||
# 推断名称(处理复杂的容器名)
|
||||
name = container_name
|
||||
name = name.replace('openclaw-', '').replace('openclaw_', '')
|
||||
name = name.replace('-openclaw-cn-gateway-1', '').replace('_openclaw_cn_gateway_1', '')
|
||||
name = name.replace('-gateway-1', '').replace('_gateway_1', '')
|
||||
name = name.split('-')[0].split('_')[0].capitalize()
|
||||
|
||||
specialty, emoji = get_agent_info(container_name)
|
||||
|
||||
# 创建或更新 Agent
|
||||
agent, created = Agent.objects.update_or_create(
|
||||
container=container_name,
|
||||
defaults={
|
||||
'name': name,
|
||||
'emoji': emoji,
|
||||
'port': port or 0,
|
||||
'specialty': specialty,
|
||||
'workspace': name.lower(),
|
||||
}
|
||||
)
|
||||
|
||||
scanned.append({
|
||||
'id': agent.id,
|
||||
'name': agent.name,
|
||||
'emoji': agent.emoji,
|
||||
'container': container_name,
|
||||
'port': port,
|
||||
'type': 'docker',
|
||||
'created': created,
|
||||
})
|
||||
|
||||
if created:
|
||||
created_count += 1
|
||||
else:
|
||||
updated_count += 1
|
||||
|
||||
except docker.errors.DockerException:
|
||||
pass # Docker 不可用时跳过
|
||||
except Exception as e:
|
||||
print(f'Docker 扫描失败:{e}')
|
||||
|
||||
# 2. 扫描宿主机进程
|
||||
try:
|
||||
# 使用 ps 命令查找 openclaw 相关进程
|
||||
result = subprocess.run(
|
||||
['ps', 'aux'],
|
||||
capture_output=True,
|
||||
text=True,
|
||||
timeout=5
|
||||
)
|
||||
|
||||
for line in result.stdout.split('\n'):
|
||||
if 'openclaw' not in line.lower() or 'grep' in line.lower():
|
||||
continue
|
||||
|
||||
# 提取进程信息
|
||||
parts = line.split()
|
||||
if len(parts) < 11:
|
||||
continue
|
||||
|
||||
pid = parts[1]
|
||||
|
||||
# 从命令行提取容器名或实例名
|
||||
cmd = ' '.join(parts[10:])
|
||||
|
||||
# 尝试从命令行提取名称
|
||||
container_name = None
|
||||
port = None
|
||||
|
||||
# 查找端口(假设端口格式为 --port 18789 或 -p 18789)
|
||||
port_match = re.search(r'(?:--port|-p)[=\s]+(\d+)', cmd)
|
||||
if port_match:
|
||||
port = port_match.group(1)
|
||||
|
||||
# 尝试从路径或参数提取名称
|
||||
name_match = re.search(r'openclaw[-_]([\w-]+)', cmd)
|
||||
if name_match:
|
||||
container_name = f'openclaw-{name_match.group(1)}'
|
||||
|
||||
# 如果没有找到名称,使用 PID
|
||||
if not container_name:
|
||||
container_name = f'openclaw-process-{pid}'
|
||||
|
||||
# 推断名称和专长
|
||||
name = container_name.replace('openclaw-', '').replace('openclaw_', '').capitalize()
|
||||
specialty, emoji = get_agent_info(container_name)
|
||||
|
||||
# 只添加有端口的进程(过滤掉石头)
|
||||
if port and int(port) > 0:
|
||||
# 创建或更新 Agent
|
||||
agent, created = Agent.objects.update_or_create(
|
||||
container=container_name,
|
||||
defaults={
|
||||
'name': name,
|
||||
'emoji': emoji,
|
||||
'port': int(port),
|
||||
'specialty': specialty,
|
||||
'workspace': name.lower(),
|
||||
}
|
||||
)
|
||||
|
||||
scanned.append({
|
||||
'id': agent.id,
|
||||
'name': agent.name,
|
||||
'emoji': agent.emoji,
|
||||
'container': container_name,
|
||||
'port': port,
|
||||
'type': 'process',
|
||||
'created': created,
|
||||
})
|
||||
|
||||
if created:
|
||||
created_count += 1
|
||||
else:
|
||||
updated_count += 1
|
||||
|
||||
except Exception as e:
|
||||
print(f'进程扫描失败:{e}')
|
||||
|
||||
return Response({
|
||||
'success': True,
|
||||
'scanned': scanned,
|
||||
'docker_count': len([s for s in scanned if s.get('type') == 'docker']),
|
||||
'process_count': len([s for s in scanned if s.get('type') == 'process']),
|
||||
'created': created_count,
|
||||
'updated': updated_count,
|
||||
'total': len(scanned),
|
||||
})
|
||||
|
||||
@api_view(['POST'])
|
||||
def sync_agent(request):
|
||||
"""同步 Agent 到数据库(放虾归海)"""
|
||||
try:
|
||||
data = request.data
|
||||
agent_id = data.get('agent_id')
|
||||
action = data.get('action')
|
||||
|
||||
if not agent_id:
|
||||
return Response({
|
||||
'success': False,
|
||||
'error': '缺少 agent_id',
|
||||
}, status=400)
|
||||
|
||||
# 获取 Agent
|
||||
try:
|
||||
agent = Agent.objects.get(id=agent_id)
|
||||
except Agent.DoesNotExist:
|
||||
return Response({
|
||||
'success': False,
|
||||
'error': 'Agent 不存在',
|
||||
}, status=404)
|
||||
|
||||
# 放虾归海 - 更新状态为已同步
|
||||
if action == 'add_to_pool':
|
||||
# 这里可以添加额外的同步逻辑
|
||||
# 比如标记为已激活、添加到特定分组等
|
||||
pass
|
||||
|
||||
return Response({
|
||||
'success': True,
|
||||
'message': f'{agent.name} 已放虾归海!',
|
||||
'agent': {
|
||||
'id': agent.id,
|
||||
'name': agent.name,
|
||||
'emoji': agent.emoji,
|
||||
},
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
return Response({
|
||||
'success': False,
|
||||
'error': f'同步失败:{str(e)}',
|
||||
}, status=500)
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
djangorestframework==3.14.0
|
||||
django-cors-headers==4.3.0
|
||||
Django==4.2.0
|
||||
Django>=4.2,<5.0
|
||||
djangorestframework>=3.14
|
||||
django-cors-headers>=4.3
|
||||
psycopg2-binary>=2.9
|
||||
docker>=6.1
|
||||
|
||||
228
code/frontend/src/components/LobsterPool/index.js
Normal file
228
code/frontend/src/components/LobsterPool/index.js
Normal file
@@ -0,0 +1,228 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const API_BASE = 'http://localhost:8000/api';
|
||||
|
||||
function LobsterPool({ agents, onRefresh }) {
|
||||
const [isDragging, setIsDragging] = useState(null);
|
||||
const [isOverPool, setIsOverPool] = useState(false);
|
||||
|
||||
// 开始拖拽
|
||||
const handleDragStart = (e, agent) => {
|
||||
setIsDragging(agent);
|
||||
e.dataTransfer.setData('agentId', agent.id);
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
};
|
||||
|
||||
// 拖拽结束
|
||||
const handleDragEnd = () => {
|
||||
setIsDragging(null);
|
||||
setIsOverPool(false);
|
||||
};
|
||||
|
||||
// 拖拽进入池子
|
||||
const handleDragOver = (e) => {
|
||||
e.preventDefault();
|
||||
setIsOverPool(true);
|
||||
};
|
||||
|
||||
// 拖拽离开池子
|
||||
const handleDragLeave = () => {
|
||||
setIsOverPool(false);
|
||||
};
|
||||
|
||||
// 放入池中
|
||||
const handleDrop = async (e) => {
|
||||
e.preventDefault();
|
||||
setIsOverPool(false);
|
||||
|
||||
const agentId = e.dataTransfer.getData('agentId');
|
||||
const agent = agents.find(a => a.id === parseInt(agentId));
|
||||
|
||||
if (agent) {
|
||||
try {
|
||||
// 调用 API 同步到数据库
|
||||
const response = await fetch(`${API_BASE}/agents/sync/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
agent_id: agent.id,
|
||||
action: 'add_to_pool',
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
alert(`🦐 ${agent.name} 已放虾归海!`);
|
||||
onRefresh(); // 刷新列表
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('放虾失败:', error);
|
||||
alert('❌ 放虾失败:' + error.message);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="lobster-pool-container">
|
||||
<h2 className="pool-title">🌊 龙虾池 - 放虾归海</h2>
|
||||
|
||||
<div
|
||||
className={`lobster-pool ${isOverPool ? 'pool-active' : ''}`}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
{/* 水波纹背景 */}
|
||||
<div className="pool-water">
|
||||
<div className="wave wave-1"></div>
|
||||
<div className="wave wave-2"></div>
|
||||
<div className="wave wave-3"></div>
|
||||
</div>
|
||||
|
||||
{/* 池子内容 */}
|
||||
<div className="pool-content">
|
||||
<div className="pool-icon">🌊</div>
|
||||
<p className="pool-text">
|
||||
{isOverPool ? '🦐 松开手,放虾归海!' : '拖拽龙虾到池中'}
|
||||
</p>
|
||||
<p className="pool-hint">将左侧的龙虾拖到这里,自动同步到数据库</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
.lobster-pool-container {
|
||||
margin: 30px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pool-title {
|
||||
color: #1a365d;
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.lobster-pool {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
height: 300px;
|
||||
margin: 0 auto;
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 3px solid #4299e1;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lobster-pool.pool-active {
|
||||
border-color: #48bb78;
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 8px 20px rgba(72, 187, 120, 0.4);
|
||||
}
|
||||
|
||||
.pool-water {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(180deg, #4299e1 0%, #2b6cb0 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wave {
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 40%;
|
||||
animation: rotate 8s linear infinite;
|
||||
}
|
||||
|
||||
.wave-1 {
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.wave-2 {
|
||||
top: -60%;
|
||||
left: -60%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.wave-3 {
|
||||
top: -70%;
|
||||
left: -70%;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.pool-content {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: white;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.pool-icon {
|
||||
font-size: 4em;
|
||||
margin-bottom: 20px;
|
||||
animation: bounce 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.pool-text {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.pool-hint {
|
||||
font-size: 1em;
|
||||
opacity: 0.9;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.lobster-pool {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.pool-icon {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.pool-text {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default LobsterPool;
|
||||
@@ -1,12 +1,14 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
// import LobsterPool from '../components/LobsterPool'; // TODO: Fix import
|
||||
|
||||
const API_BASE = 'http://localhost:8000/api';
|
||||
|
||||
function Dashboard() {
|
||||
const [agents, setAgents] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [scanning, setScanning] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
@@ -25,16 +27,65 @@ function Dashboard() {
|
||||
}
|
||||
};
|
||||
|
||||
const scanAgents = async () => {
|
||||
setScanning(true);
|
||||
try {
|
||||
const response = await axios.post(`${API_BASE}/agents/scan/`);
|
||||
if (response.data.success) {
|
||||
alert(`🦐 捞虾完成!\n捞到 ${response.data.total} 只虾\n新增 ${response.data.created} 只\n更新 ${response.data.updated} 只`);
|
||||
fetchAgents(); // 刷新列表
|
||||
} else {
|
||||
alert(`❌ 捞虾失败:${response.data.error}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('捞虾失败:', error);
|
||||
alert('❌ 捞虾失败:' + error.message);
|
||||
} finally {
|
||||
setScanning(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 拖拽处理
|
||||
const handleDragStart = (e, agent) => {
|
||||
e.dataTransfer.setData('agentId', agent.id);
|
||||
e.dataTransfer.setData('agentName', agent.name);
|
||||
e.target.style.opacity = '0.5';
|
||||
};
|
||||
|
||||
const handleDragEnd = (e) => {
|
||||
e.target.style.opacity = '1';
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="loading">加载中...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="dashboard">
|
||||
<div className="dashboard-header">
|
||||
<h1>🤖 Agent 舰队监控中心</h1>
|
||||
<button
|
||||
className="scan-btn"
|
||||
onClick={scanAgents}
|
||||
disabled={scanning}
|
||||
>
|
||||
{scanning ? '🦐 捞虾中...' : '🦐 捞虾'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* TODO: 龙虾池功能待修复 */}
|
||||
{/* <LobsterPool agents={agents} onRefresh={fetchAgents} /> */}
|
||||
|
||||
<h2 className="section-title">🦐 待归海的龙虾</h2>
|
||||
<div className="agent-grid">
|
||||
{agents.map(agent => (
|
||||
<div key={agent.id} className="agent-card">
|
||||
<div
|
||||
key={agent.id}
|
||||
className="agent-card"
|
||||
draggable
|
||||
onDragStart={(e) => handleDragStart(e, agent)}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<div className="agent-header">
|
||||
<span className="agent-name">{agent.emoji} {agent.name}</span>
|
||||
<span className={`status status-${agent.status}`}>{agent.status}</span>
|
||||
@@ -49,6 +100,7 @@ function Dashboard() {
|
||||
📊 Agent 详情
|
||||
</button>
|
||||
</div>
|
||||
<div className="drag-hint">👆 拖我到龙虾池</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -60,18 +112,72 @@ export default Dashboard;
|
||||
|
||||
// CSS 样式
|
||||
const styles = `
|
||||
.dashboard-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.dashboard h1 {
|
||||
color: #1a365d;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.scan-btn {
|
||||
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.scan-btn:hover:not(:disabled) {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4);
|
||||
}
|
||||
|
||||
.scan-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: #1a365d;
|
||||
margin: 30px 0 20px 0;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.dashboard h1 {
|
||||
color: #1a365d;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.drag-hint {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px dashed #cbd5e0;
|
||||
color: #718096;
|
||||
font-size: 0.85em;
|
||||
text-align: center;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.agent-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
|
||||
Reference in New Issue
Block a user