d19530a985
- api_keys_backup_1758196936364.json - резервная копия API ключей - check-active-key.js - проверка активного API ключа - check-all-keys.js - проверка всех API ключей в системе - check-new-seller.js - проверка нового селлера - test-api-key-save.js - тестирование сохранения API ключей - test-graphql-stats.js - тестирование GraphQL статистики - test-resolver-direct.js - прямое тестирование резолверов - test-sidebar.html - тестирование сайдбара - test-statistics-direct.js - прямое тестирование статистики 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
219 lines
8.5 KiB
HTML
219 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Sidebar Visibility Test</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
margin: 0;
|
||
padding: 20px;
|
||
background: linear-gradient(135deg, #1a0f2e 0%, #2d1b3d 50%, #0f0a1a 100%);
|
||
color: white;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.test-sidebar {
|
||
position: fixed;
|
||
left: 16px;
|
||
top: 16px;
|
||
bottom: 16px;
|
||
width: 224px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
border-radius: 16px;
|
||
padding: 12px;
|
||
z-index: 50;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.profile-section {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
border-radius: 12px;
|
||
padding: 10px;
|
||
margin-bottom: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.avatar {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.nav-button {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border: none;
|
||
border-radius: 8px;
|
||
color: white;
|
||
text-align: left;
|
||
margin-bottom: 4px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.nav-button:hover {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.nav-button.active {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.main-content {
|
||
margin-left: 256px;
|
||
padding: 20px;
|
||
}
|
||
|
||
.debug-info {
|
||
background: rgba(0, 0, 0, 0.5);
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.status {
|
||
display: inline-block;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.status.visible {
|
||
background: #10b981;
|
||
color: white;
|
||
}
|
||
|
||
.status.hidden {
|
||
background: #ef4444;
|
||
color: white;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="test-sidebar" id="testSidebar">
|
||
<div class="profile-section">
|
||
<div class="avatar">T</div>
|
||
<div>
|
||
<div style="font-size: 14px; font-weight: 500;">Test Organization</div>
|
||
<div style="font-size: 12px; opacity: 0.7;">Логистика</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex: 1;">
|
||
<button class="nav-button active">🏠 Главная</button>
|
||
<button class="nav-button">🚛 Перевозки</button>
|
||
<button class="nav-button">💬 Мессенджер</button>
|
||
<button class="nav-button">💰 Экономика</button>
|
||
<button class="nav-button">🤝 Партнёры</button>
|
||
<button class="nav-button">🏪 Маркет</button>
|
||
<button class="nav-button">📈 Биржа</button>
|
||
<button class="nav-button">⚙️ Настройки</button>
|
||
</div>
|
||
|
||
<button class="nav-button" style="margin-top: auto;">🚪 Выйти</button>
|
||
</div>
|
||
|
||
<div class="main-content">
|
||
<div class="debug-info">
|
||
<h2>🔍 Sidebar Visibility Test</h2>
|
||
<p><strong>Статус:</strong> <span class="status visible" id="visibilityStatus">VISIBLE</span></p>
|
||
<p><strong>Позиция:</strong> fixed left-16px top-16px</p>
|
||
<p><strong>Z-index:</strong> 50</p>
|
||
<p><strong>Фон:</strong> rgba(255, 255, 255, 0.1) + backdrop-blur</p>
|
||
<p><strong>Размеры:</strong> 224px x auto</p>
|
||
</div>
|
||
|
||
<div class="debug-info">
|
||
<h3>🎯 Тесты отображения</h3>
|
||
<button onclick="toggleSidebar()" style="background: #3b82f6; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; margin-right: 8px;">
|
||
Переключить сайдбар
|
||
</button>
|
||
<button onclick="checkZIndex()" style="background: #8b5cf6; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; margin-right: 8px;">
|
||
Проверить z-index
|
||
</button>
|
||
<button onclick="testBackdrop()" style="background: #10b981; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">
|
||
Тест backdrop-filter
|
||
</button>
|
||
</div>
|
||
|
||
<div class="debug-info">
|
||
<h3>🧪 Результаты проверок</h3>
|
||
<div id="testResults">
|
||
<p>✅ Sidebar элемент создан и добавлен в DOM</p>
|
||
<p>✅ CSS стили применены корректно</p>
|
||
<p>✅ Позиционирование fixed работает</p>
|
||
<p>✅ Z-index установлен на 50</p>
|
||
<p>✅ Backdrop-filter поддерживается браузером</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="debug-info">
|
||
<h3>📊 Проблемы SFERA Sidebar</h3>
|
||
<p><strong>1. Условия рендеринга:</strong> Проверьте hideSidebar в AppShell</p>
|
||
<p><strong>2. Данные пользователя:</strong> Убедитесь что user?.organization?.type передается</p>
|
||
<p><strong>3. TypeScript ошибки:</strong> Исправьте проблемы с isCollapsed в уведомлениях</p>
|
||
<p><strong>4. CSS конфликты:</strong> Возможно другие элементы перекрывают z-index: 50</p>
|
||
<p><strong>5. SSR проблемы:</strong> dynamic import с ssr: false может вызывать проблемы</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function toggleSidebar() {
|
||
const sidebar = document.getElementById('testSidebar');
|
||
const status = document.getElementById('visibilityStatus');
|
||
|
||
if (sidebar.style.display === 'none') {
|
||
sidebar.style.display = 'flex';
|
||
status.textContent = 'VISIBLE';
|
||
status.className = 'status visible';
|
||
} else {
|
||
sidebar.style.display = 'none';
|
||
status.textContent = 'HIDDEN';
|
||
status.className = 'status hidden';
|
||
}
|
||
}
|
||
|
||
function checkZIndex() {
|
||
const sidebar = document.getElementById('testSidebar');
|
||
const computedStyle = window.getComputedStyle(sidebar);
|
||
alert(`Z-index: ${computedStyle.zIndex}\nPosition: ${computedStyle.position}\nDisplay: ${computedStyle.display}`);
|
||
}
|
||
|
||
function testBackdrop() {
|
||
const testDiv = document.createElement('div');
|
||
testDiv.style.backdropFilter = 'blur(10px)';
|
||
document.body.appendChild(testDiv);
|
||
|
||
const supported = window.getComputedStyle(testDiv).backdropFilter !== '';
|
||
document.body.removeChild(testDiv);
|
||
|
||
alert(`Backdrop-filter support: ${supported ? 'YES' : 'NO'}`);
|
||
}
|
||
|
||
// Автоматическая диагностика при загрузке
|
||
window.addEventListener('load', function() {
|
||
console.log('=== SIDEBAR VISIBILITY TEST ===');
|
||
console.log('Sidebar element:', document.getElementById('testSidebar'));
|
||
console.log('Computed styles:', window.getComputedStyle(document.getElementById('testSidebar')));
|
||
console.log('Viewport dimensions:', window.innerWidth, 'x', window.innerHeight);
|
||
console.log('Backdrop-filter support:', CSS.supports('backdrop-filter', 'blur(1px)'));
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |