sanbuphy
2347 lines
61 KiB
Vue
2347 lines
61 KiB
Vue
<script setup>
|
||
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
|
||
|
||
const activeTab = ref('elements') // 默认改为 Elements，匹配截图
|
||
const hoverInfo = ref('')
|
||
const isDark = ref(false)
|
||
const isAutoPlaying = ref(false)
|
||
const cursorX = ref(0)
|
||
const cursorY = ref(0)
|
||
const cursorVisible = ref(false)
|
||
const highlightVisible = ref(false)
|
||
const highlightStyle = ref({})
|
||
let tourTimeout = null
|
||
const demoRef = ref(null)
|
||
|
||
// 导览选项
|
||
const tourOptions = [
|
||
{ value: '', label: '选择导览场景...', disabled: true },
|
||
{ value: 'elements', label: '1. 元素面板 (Elements)' },
|
||
{ value: 'console', label: '2. 控制台 (Console)' },
|
||
{ value: 'sources', label: '3. 源代码 (Sources)' },
|
||
{ value: 'network', label: '4. 网络 (Network)' },
|
||
{ value: 'application', label: '5. 应用 (Application)' }
|
||
]
|
||
const selectedTour = ref('')
|
||
|
||
const tabs = [
|
||
{
|
||
id: 'elements',
|
||
label: '元素',
|
||
desc: '查看和修改页面 HTML 结构与 CSS 样式'
|
||
},
|
||
{
|
||
id: 'console',
|
||
label: '控制台',
|
||
desc: '查看日志、错误信息，执行 JavaScript 代码'
|
||
},
|
||
{
|
||
id: 'sources',
|
||
label: '源代码/来源',
|
||
desc: '查看源代码，设置断点调试 JavaScript'
|
||
},
|
||
{
|
||
id: 'network',
|
||
label: '网络',
|
||
desc: '监控网络请求，查看接口数据和加载性能'
|
||
},
|
||
{ id: 'performance', label: '性能', desc: '分析页面运行性能' },
|
||
{ id: 'memory', label: '内存', desc: '检测内存泄漏' },
|
||
{
|
||
id: 'application',
|
||
label: '应用',
|
||
desc: '查看本地存储(Storage)、Cookies、缓存等'
|
||
},
|
||
{ id: 'security', label: '隐私与安全', desc: '查看证书和安全问题' },
|
||
{ id: 'lighthouse', label: 'Lighthouse', desc: '页面质量审计' },
|
||
{ id: 'recorder', label: '记录器', desc: '录制用户操作' }
|
||
]
|
||
|
||
// --- Console Data ---
|
||
const consoleSidebarItems = [
|
||
{ label: '6 条消息', icon: 'list', count: 6, type: 'all' },
|
||
{ label: '6 条用户消息', icon: 'user', count: 6, type: 'user' },
|
||
{ label: '无错误', icon: 'error', count: 0, type: 'error' },
|
||
{ label: '无警告', icon: 'warn', count: 0, type: 'warn' },
|
||
{ label: '无信息', icon: 'info', count: 0, type: 'info' },
|
||
{ label: '6 条详细消息', icon: 'verbose', count: 6, type: 'verbose' }
|
||
]
|
||
const consoleLogs = ref([
|
||
{ type: 'log', msg: '[vite] connecting...', source: 'client:733' },
|
||
{ type: 'log', msg: '[vite] connected.', source: 'client:827' },
|
||
{
|
||
type: 'log',
|
||
msg: 'Config Layers for 404.md:\n========================\n1. locale config (root)\n2. .vitepress/config (root)',
|
||
source: 'shared.js:194'
|
||
},
|
||
{
|
||
type: 'log',
|
||
msg: 'Config Layers for zh-cn/appendix/browser-devtools/index.md:\n=======================================================\n1. locale config (zh-cn)\n2. .vitepress/config (root)',
|
||
source: 'shared.js:194'
|
||
},
|
||
{
|
||
type: 'log',
|
||
msg: '[vite] hot updated: .vitepress/theme/components/appendix/browser-devtools/BrowserDevToolsDemo.vue',
|
||
source: 'client:810'
|
||
},
|
||
{
|
||
type: 'log',
|
||
msg: '[vite] hot updated: .vitepress/theme/components/appendix/browser-devtools/BrowserDevToolsDemo.vue?vue&type=style&index=0&scoped=d906459f&lang.css',
|
||
source: 'client:810'
|
||
}
|
||
])
|
||
const consoleInput = ref('')
|
||
|
||
// --- Elements Data (Aligned with screenshot) ---
|
||
const domTree = ref([
|
||
{
|
||
tag: 'html',
|
||
attrs: { class: 'mac', lang: 'zh-CN', dir: 'ltr' },
|
||
expanded: true,
|
||
children: [
|
||
{
|
||
tag: 'head',
|
||
expanded: false,
|
||
children: [{ tag: 'title', text: 'DevTools Demo' }]
|
||
},
|
||
{
|
||
tag: 'body',
|
||
expanded: true,
|
||
children: [
|
||
{
|
||
tag: 'div',
|
||
attrs: { id: 'app', 'data-v-app': '' },
|
||
expanded: true,
|
||
children: [
|
||
{ tag: 'div', text: '' },
|
||
{
|
||
tag: 'script',
|
||
attrs: {
|
||
type: 'module',
|
||
src: '/easy-vibe/node_modules/vitepress/dist/client/app/index.js'
|
||
}
|
||
},
|
||
{
|
||
tag: 'div',
|
||
attrs: { id: 'el-popper-container-3083' },
|
||
text: ''
|
||
}
|
||
]
|
||
},
|
||
{
|
||
tag: 'div',
|
||
attrs: { style: 'all: initial' },
|
||
expanded: false,
|
||
children: []
|
||
},
|
||
{
|
||
tag: 'div',
|
||
attrs: {
|
||
id: 'immersive-translate-browser-popup',
|
||
style: 'all: initial'
|
||
},
|
||
expanded: false,
|
||
children: []
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
])
|
||
const cssRules = ref([
|
||
{
|
||
selector: 'body',
|
||
styles: {
|
||
'background-color': 'rgb(255, 255, 255)',
|
||
color: '#24292f',
|
||
margin: '0',
|
||
'font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto'
|
||
}
|
||
},
|
||
{ selector: '#app', styles: { padding: '20px' } },
|
||
{ selector: '.mac', styles: { 'font-synthesis': 'none' } }
|
||
])
|
||
|
||
// --- Sources Data ---
|
||
const fileSystem = ref([
|
||
{ name: 'index.html', type: 'file' },
|
||
{
|
||
name: 'src',
|
||
type: 'folder',
|
||
expanded: true,
|
||
children: [
|
||
{ name: 'main.js', type: 'file' },
|
||
{ name: 'App.vue', type: 'file' },
|
||
{ name: 'utils.js', type: 'file' }
|
||
]
|
||
}
|
||
])
|
||
const activeFile = ref('main.js')
|
||
const fileContent = ref(`import { createApp } from 'vue'
|
||
import App from './App.vue'
|
||
|
||
console.log('App mounted successfully.')
|
||
|
||
const app = createApp(App)
|
||
app.mount('#app')`)
|
||
|
||
// --- Network Data ---
|
||
const networkRequests = ref([
|
||
{
|
||
id: 1,
|
||
name: 'index.html',
|
||
status: 200,
|
||
type: 'document',
|
||
size: '2.4kB',
|
||
time: '120ms',
|
||
waterfall: 10,
|
||
headers: { 'Content-Type': 'text/html; charset=utf-8', Server: 'Vite' },
|
||
requestHeaders: {
|
||
'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)',
|
||
Accept: 'text/html'
|
||
},
|
||
preview:
|
||
'<!DOCTYPE html>\n<html lang="zh-CN">\n<head>...</head>\n<body>...</body>\n</html>'
|
||
},
|
||
{
|
||
id: 2,
|
||
name: 'main.js',
|
||
status: 200,
|
||
type: 'script',
|
||
size: '15.2kB',
|
||
time: '80ms',
|
||
waterfall: 40,
|
||
headers: {
|
||
'Content-Type': 'application/javascript',
|
||
'Cache-Control': 'no-cache'
|
||
},
|
||
requestHeaders: {
|
||
'User-Agent': 'Mozilla/5.0 ...',
|
||
Referer: 'http://localhost:3000/'
|
||
},
|
||
preview:
|
||
'import { createApp } from "vue";\nimport App from "./App.vue";\ncreateApp(App).mount("#app");'
|
||
},
|
||
{
|
||
id: 3,
|
||
name: 'style.css',
|
||
status: 200,
|
||
type: 'stylesheet',
|
||
size: '4.1kB',
|
||
time: '45ms',
|
||
waterfall: 50,
|
||
headers: { 'Content-Type': 'text/css' },
|
||
requestHeaders: {
|
||
'User-Agent': 'Mozilla/5.0 ...',
|
||
Referer: 'http://localhost:3000/'
|
||
},
|
||
preview:
|
||
'body { margin: 0; font-family: sans-serif; }\n#app { padding: 20px; }'
|
||
},
|
||
{
|
||
id: 4,
|
||
name: 'api/user',
|
||
status: 200,
|
||
type: 'fetch',
|
||
size: '500B',
|
||
time: '200ms',
|
||
waterfall: 120,
|
||
headers: { 'Content-Type': 'application/json' },
|
||
requestHeaders: {
|
||
Authorization: 'Bearer eyJhbGci...',
|
||
Accept: 'application/json',
|
||
'Content-Type': 'application/json'
|
||
},
|
||
preview:
|
||
'{\n "id": 1001,\n "username": "developer",\n "role": "admin",\n "permissions": ["read", "write"]\n}'
|
||
},
|
||
{
|
||
id: 5,
|
||
name: 'logo.png',
|
||
status: 304,
|
||
type: 'png',
|
||
size: '12kB',
|
||
time: '20ms',
|
||
waterfall: 60,
|
||
headers: { 'Content-Type': 'image/png' },
|
||
requestHeaders: {
|
||
'User-Agent': 'Mozilla/5.0 ...',
|
||
Accept: 'image/webp,image/apng'
|
||
},
|
||
preview: '[Binary Data - Image]'
|
||
}
|
||
])
|
||
const selectedRequest = ref(null)
|
||
const activeDetailTab = ref('headers')
|
||
|
||
const selectRequest = (req) => {
|
||
if (selectedRequest.value && selectedRequest.value.id === req.id) {
|
||
selectedRequest.value = null // Toggle off
|
||
} else {
|
||
selectedRequest.value = req
|
||
activeDetailTab.value = 'headers' // Reset to default tab
|
||
}
|
||
}
|
||
|
||
// --- Application Data ---
|
||
const localStorageData = ref([
|
||
{ key: 'theme', value: 'light' },
|
||
{ key: 'user_token', value: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' },
|
||
{ key: 'sidebar_collapsed', value: 'false' }
|
||
])
|
||
|
||
// --- Actions ---
|
||
|
||
const showInfo = (text) => {
|
||
if (isAutoPlaying.value) return
|
||
hoverInfo.value = text
|
||
}
|
||
|
||
const clearInfo = () => {
|
||
if (isAutoPlaying.value) return
|
||
hoverInfo.value = ''
|
||
}
|
||
|
||
const runConsoleCommand = () => {
|
||
if (!consoleInput.value.trim()) return
|
||
consoleLogs.value.push({ type: 'command', msg: consoleInput.value })
|
||
try {
|
||
const val = consoleInput.value
|
||
if (val === '1+1') consoleLogs.value.push({ type: 'result', msg: '2' })
|
||
else if (val.includes('alert'))
|
||
consoleLogs.value.push({ type: 'result', msg: 'undefined' })
|
||
else
|
||
consoleLogs.value.push({
|
||
type: 'error',
|
||
msg: 'ReferenceError: Command not found in mock'
|
||
})
|
||
} catch (e) {
|
||
consoleLogs.value.push({ type: 'error', msg: e.message })
|
||
}
|
||
consoleInput.value = ''
|
||
nextTick(() => {
|
||
const output = demoRef.value?.querySelector('.console-output')
|
||
if (output) output.scrollTop = output.scrollHeight
|
||
})
|
||
}
|
||
|
||
// --- Auto Tour Logic ---
|
||
|
||
const handleTourSelect = async () => {
|
||
if (!selectedTour.value) return
|
||
const target = selectedTour.value
|
||
|
||
// 如果已经在播放，先停止
|
||
if (isAutoPlaying.value) {
|
||
stopTour()
|
||
await new Promise((r) => setTimeout(r, 100))
|
||
}
|
||
|
||
// 切换到目标 Tab
|
||
activeTab.value = target
|
||
|
||
// 启动导览
|
||
startTour(target)
|
||
}
|
||
|
||
const moveCursorTo = (selector, infoText, waitTime = 2000) => {
|
||
return new Promise((resolve) => {
|
||
const container = demoRef.value
|
||
if (!container) return resolve()
|
||
|
||
// Find element
|
||
const el = container.querySelector(selector)
|
||
if (el) {
|
||
const containerRect = container.getBoundingClientRect()
|
||
const rect = el.getBoundingClientRect()
|
||
|
||
// Calculate center
|
||
const targetX = rect.left - containerRect.left + rect.width / 2
|
||
const targetY = rect.top - containerRect.top + rect.height / 2
|
||
|
||
// Move cursor
|
||
cursorX.value = targetX
|
||
cursorY.value = targetY
|
||
cursorVisible.value = true
|
||
|
||
// Show highlight after a slight delay to simulate travel time
|
||
setTimeout(() => {
|
||
if (!isAutoPlaying.value) return resolve()
|
||
|
||
highlightStyle.value = {
|
||
top: rect.top - containerRect.top + 'px',
|
||
left: rect.left - containerRect.left + 'px',
|
||
width: rect.width + 'px',
|
||
height: rect.height + 'px'
|
||
}
|
||
highlightVisible.value = true
|
||
hoverInfo.value = infoText
|
||
|
||
// Wait and then clear
|
||
tourTimeout = setTimeout(() => {
|
||
highlightVisible.value = false
|
||
resolve()
|
||
}, waitTime)
|
||
}, 500) // faster movement
|
||
} else {
|
||
console.warn('Selector not found:', selector)
|
||
resolve() // Skip if not found
|
||
}
|
||
})
|
||
}
|
||
|
||
const stopTour = () => {
|
||
isAutoPlaying.value = false
|
||
cursorVisible.value = false
|
||
highlightVisible.value = false
|
||
hoverInfo.value = ''
|
||
selectedTour.value = ''
|
||
if (tourTimeout) clearTimeout(tourTimeout)
|
||
}
|
||
|
||
const startTour = async (targetTab) => {
|
||
if (isAutoPlaying.value) return
|
||
isAutoPlaying.value = true
|
||
cursorVisible.value = true
|
||
hoverInfo.value = ''
|
||
|
||
try {
|
||
// Dispatch based on target tab
|
||
if (targetTab === 'console') await runConsoleTour()
|
||
else if (targetTab === 'elements') await runElementsTour()
|
||
else if (targetTab === 'sources') await runSourcesTour()
|
||
else if (targetTab === 'network') await runNetworkTour()
|
||
else if (targetTab === 'application') await runApplicationTour()
|
||
|
||
stopTour()
|
||
} catch (e) {
|
||
console.error(e)
|
||
stopTour()
|
||
}
|
||
}
|
||
|
||
const runConsoleTour = async () => {
|
||
await moveCursorTo(
|
||
'.tab[data-id="console"]',
|
||
'控制台 (Console)：查看日志、交互式运行代码'
|
||
)
|
||
if (!isAutoPlaying.value) return
|
||
await moveCursorTo(
|
||
'.console-toolbar',
|
||
'工具栏：可清空日志、设置 Log 级别、过滤内容'
|
||
)
|
||
if (!isAutoPlaying.value) return
|
||
await moveCursorTo(
|
||
'.console-sidebar',
|
||
'侧边栏：按类型聚合消息 (Errors, Warnings)'
|
||
)
|
||
if (!isAutoPlaying.value) return
|
||
await moveCursorTo(
|
||
'.log-line:nth-child(1)',
|
||
'日志流：显示代码输出，点击右侧链接可跳转源码'
|
||
)
|
||
if (!isAutoPlaying.value) return
|
||
await moveCursorTo(
|
||
'.bottom-drawer-header',
|
||
'抽屉 (Drawer)：查看搜索结果、Issues 等辅助信息'
|
||
)
|
||
if (!isAutoPlaying.value) return
|
||
await moveCursorTo(
|
||
'.console-input-area',
|
||
'即时执行：在这里输入 JS 表达式并回车运行'
|
||
)
|
||
}
|
||
|
||
const runElementsTour = async () => {
|
||
await moveCursorTo(
|
||
'.tab[data-id="elements"]',
|
||
'元素面板 (Elements)：实时查看和修改 DOM/CSS'
|
||
)
|
||
if (!isAutoPlaying.value) return
|
||
await moveCursorTo(
|
||
'.dom-tree-panel',
|
||
'DOM 树：页面的 HTML 结构，可折叠/展开/拖拽'
|
||
)
|
||
if (!isAutoPlaying.value) return
|
||
await moveCursorTo(
|
||
'.dom-node[data-tag="div"]',
|
||
'选中元素：点击元素以在右侧查看其样式'
|
||
)
|
||
if (!isAutoPlaying.value) return
|
||
await moveCursorTo(
|
||
'.styles-panel',
|
||
'样式面板 (Styles)：查看计算后的样式和 CSS 规则'
|
||
)
|
||
if (!isAutoPlaying.value) return
|
||
await moveCursorTo(
|
||
'.style-rule:first-child',
|
||
'CSS 规则：可直接修改属性值，实时预览效果'
|
||
)
|
||
}
|
||
|
||
const runSourcesTour = async () => {
|
||
await moveCursorTo(
|
||
'.tab[data-id="sources"]',
|
||
'源代码 (Sources)：文件浏览与断点调试'
|
||
)
|
||
if (!isAutoPlaying.value) return
|
||
await moveCursorTo('.file-navigator', '文件系统：查看加载的所有资源文件')
|
||
if (!isAutoPlaying.value) return
|
||
await moveCursorTo('.code-editor', '编辑器：查看源码，点击行号设置断点')
|
||
if (!isAutoPlaying.value) return
|
||
await moveCursorTo(
|
||
'.debugger-sidebar',
|
||
'调试器：查看变量 (Watch)、调用栈 (Call Stack)'
|
||
)
|
||
}
|
||
|
||
const runNetworkTour = async () => {
|
||
await moveCursorTo('.tab[data-id="network"]', '网络 (Network)：抓包分析')
|
||
if (!isAutoPlaying.value) return
|
||
await moveCursorTo(
|
||
'.network-toolbar',
|
||
'过滤器：按类型筛选请求 (XHR/Fetch, CSS, JS)'
|
||
)
|
||
if (!isAutoPlaying.value) return
|
||
await moveCursorTo(
|
||
'.network-grid-header',
|
||
'请求列表：查看状态码、类型、大小、耗时'
|
||
)
|
||
if (!isAutoPlaying.value) return
|
||
|
||
// Simulate clicking the API request
|
||
await moveCursorTo('.network-row:nth-child(4)', '点击请求行查看详情')
|
||
if (!isAutoPlaying.value) return
|
||
|
||
// Trigger selection
|
||
selectedRequest.value = networkRequests.value[3] // api/user
|
||
|
||
await moveCursorTo(
|
||
'.detail-header',
|
||
'详情面板：查看 Headers, Preview, Response'
|
||
)
|
||
if (!isAutoPlaying.value) return
|
||
|
||
// 1. Headers Tab
|
||
activeDetailTab.value = 'headers'
|
||
await moveCursorTo(
|
||
'.detail-title:nth-child(1)',
|
||
'Headers: 查看请求/响应头信息'
|
||
)
|
||
if (!isAutoPlaying.value) return
|
||
|
||
await moveCursorTo(
|
||
'.detail-section:nth-child(1)',
|
||
'General：查看 URL、Method (GET/POST) 和状态码 (200)'
|
||
)
|
||
if (!isAutoPlaying.value) return
|
||
|
||
await moveCursorTo(
|
||
'.detail-section:nth-child(2)',
|
||
'Response Headers：服务器返回的头信息 (Content-Type)'
|
||
)
|
||
if (!isAutoPlaying.value) return
|
||
|
||
await moveCursorTo(
|
||
'.detail-section:nth-child(3)',
|
||
'Request Headers：浏览器发送的头信息 (User-Agent, Cookies)'
|
||
)
|
||
if (!isAutoPlaying.value) return
|
||
|
||
// 2. Preview Tab
|
||
await moveCursorTo(
|
||
'.detail-title:nth-child(2)',
|
||
'Preview: 格式化预览接口返回的数据'
|
||
)
|
||
if (!isAutoPlaying.value) return
|
||
activeDetailTab.value = 'preview'
|
||
|
||
await moveCursorTo('.preview-content', 'Preview Content: 查看 JSON 结构')
|
||
if (!isAutoPlaying.value) return
|
||
|
||
// 3. Response Tab
|
||
await moveCursorTo('.detail-title:nth-child(3)', 'Response: 查看原始响应数据')
|
||
if (!isAutoPlaying.value) return
|
||
activeDetailTab.value = 'response'
|
||
|
||
await moveCursorTo('.preview-content', 'Response Body: 原始文本内容')
|
||
if (!isAutoPlaying.value) return
|
||
|
||
await moveCursorTo(
|
||
'.waterfall-cell',
|
||
'瀑布流 (Waterfall)：请求生命周期耗时分析'
|
||
)
|
||
}
|
||
|
||
const runApplicationTour = async () => {
|
||
await moveCursorTo(
|
||
'.tab[data-id="application"]',
|
||
'应用 (Application)：存储与缓存管理'
|
||
)
|
||
if (!isAutoPlaying.value) return
|
||
await moveCursorTo(
|
||
'.storage-sidebar',
|
||
'存储类型：Local Storage, Cookies, IndexedDB'
|
||
)
|
||
if (!isAutoPlaying.value) return
|
||
await moveCursorTo(
|
||
'.storage-content',
|
||
'数据视图：查看 Key-Value 数据，支持增删改查'
|
||
)
|
||
}
|
||
|
||
onUnmounted(() => {
|
||
if (tourTimeout) clearTimeout(tourTimeout)
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div
|
||
class="browser-devtools-demo"
|
||
:class="{ 'dark-mode': isDark }"
|
||
ref="demoRef"
|
||
>
|
||
<!-- Top Controls (Custom for Demo) -->
|
||
<div class="demo-controls">
|
||
<div class="control-label">Chrome DevTools 模拟器</div>
|
||
<div class="control-actions">
|
||
<select
|
||
v-model="selectedTour"
|
||
@change="handleTourSelect"
|
||
class="tour-select"
|
||
:disabled="isAutoPlaying"
|
||
>
|
||
<option
|
||
v-for="opt in tourOptions"
|
||
:key="opt.value"
|
||
:value="opt.value"
|
||
:disabled="opt.disabled"
|
||
>
|
||
{{ opt.label }}
|
||
</option>
|
||
</select>
|
||
<button v-if="isAutoPlaying" class="stop-btn" @click="stopTour">
|
||
停止演示
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Virtual Cursor & Highlight -->
|
||
<div
|
||
class="virtual-cursor"
|
||
v-if="cursorVisible"
|
||
:style="{ transform: `translate(${cursorX}px, ${cursorY}px)` }"
|
||
>
|
||
<svg
|
||
width="24"
|
||
height="24"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
style="filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))"
|
||
>
|
||
<path
|
||
d="M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19823L11.4818 12.3673H5.65376Z"
|
||
fill="#000"
|
||
stroke="white"
|
||
stroke-width="1.5"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<div
|
||
class="highlight-box"
|
||
v-if="highlightVisible"
|
||
:style="highlightStyle"
|
||
></div>
|
||
|
||
<!-- Main UI Container -->
|
||
<div class="devtools-container">
|
||
<!-- Header -->
|
||
<div class="devtools-header">
|
||
<div class="header-left">
|
||
<div
|
||
class="icon-btn element-picker"
|
||
title="选择页面中的元素以进行检查"
|
||
>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="#6e6e6e">
|
||
<path
|
||
d="M4 4h9v2H4V4zm0 4h5v2H4V8zm0 4h5v2H4v-2zm12-5l-4 4h3v4h2v-4h3l-4-4z"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<div class="icon-btn device-toggle" title="切换设备工具栏">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="#6e6e6e">
|
||
<path
|
||
d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<div class="separator"></div>
|
||
<div class="tabs">
|
||
<div
|
||
v-for="tab in tabs"
|
||
:key="tab.id"
|
||
class="tab"
|
||
:class="{ active: activeTab === tab.id }"
|
||
:data-id="tab.id"
|
||
@click="activeTab = tab.id"
|
||
@mouseenter="showInfo(tab.desc)"
|
||
@mouseleave="clearInfo"
|
||
>
|
||
{{ tab.label }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="header-right">
|
||
<div class="icon-btn settings" title="设置">⚙️</div>
|
||
<div class="icon-btn close" title="关闭">×</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Body Area -->
|
||
<div class="devtools-body">
|
||
<!-- 1. Console Panel -->
|
||
<div v-if="activeTab === 'console'" class="panel console-panel-layout">
|
||
<div class="console-toolbar" @mouseenter="showInfo('控制台工具栏')">
|
||
<div class="icon-btn clear" title="清除控制台">🚫</div>
|
||
<div class="separator"></div>
|
||
<div class="dropdown-trigger">top ▼</div>
|
||
<div class="icon-btn eye" title="创建实时表达式">👁️</div>
|
||
<div class="filter-box">
|
||
<span class="filter-icon">🔍</span><input placeholder="过滤" />
|
||
</div>
|
||
<div class="dropdown-trigger">默认级别 ▼</div>
|
||
</div>
|
||
<div class="console-main-area">
|
||
<div class="console-sidebar">
|
||
<div
|
||
v-for="(item, idx) in consoleSidebarItems"
|
||
:key="idx"
|
||
class="sidebar-item"
|
||
:class="{ active: item.type === 'all' }"
|
||
>
|
||
<span class="item-icon">{{
|
||
item.icon === 'error'
|
||
? '❌'
|
||
: item.icon === 'warn'
|
||
? '⚠️'
|
||
: item.icon === 'info'
|
||
? 'ℹ️'
|
||
: item.icon === 'verbose'
|
||
? '💬'
|
||
: item.icon === 'user'
|
||
? '👤'
|
||
: '📋'
|
||
}}</span>
|
||
<span class="item-label">{{ item.label }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="console-content-wrapper">
|
||
<div class="console-output">
|
||
<div
|
||
v-for="(log, idx) in consoleLogs"
|
||
:key="idx"
|
||
class="log-line"
|
||
:class="log.type"
|
||
>
|
||
<div class="log-gutter">
|
||
<span class="icon error" v-if="log.type === 'error'"
|
||
>❌</span
|
||
>
|
||
<span class="icon warn" v-else-if="log.type === 'warn'"
|
||
>⚠️</span
|
||
>
|
||
<span class="icon" v-else-if="log.type === 'command'"
|
||
>></span
|
||
>
|
||
<span class="icon" v-else><</span>
|
||
</div>
|
||
<div class="log-content">
|
||
<pre>{{ log.msg }}</pre>
|
||
</div>
|
||
<div class="log-source">
|
||
<span class="source">{{ log.source }}</span>
|
||
</div>
|
||
</div>
|
||
<!-- Input area inside scrollable area for Chrome feel -->
|
||
<div class="console-input-area">
|
||
<span class="prompt">></span>
|
||
<input
|
||
v-model="consoleInput"
|
||
@keyup.enter="runConsoleCommand"
|
||
class="input-field"
|
||
placeholder=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Bottom Drawer -->
|
||
<div class="bottom-drawer">
|
||
<div class="bottom-drawer-header">
|
||
<div
|
||
class="icon-btn more"
|
||
style="padding: 0 4px; margin-right: 4px"
|
||
>
|
||
⋮
|
||
</div>
|
||
<div class="drawer-tab">控制台</div>
|
||
<div class="drawer-tab">AI 辅助</div>
|
||
<div class="drawer-tab">新变化</div>
|
||
<div class="drawer-tab">问题</div>
|
||
<div class="drawer-tab active">
|
||
搜索 <span class="close-icon">×</span>
|
||
</div>
|
||
</div>
|
||
<div class="drawer-content">
|
||
<div class="search-panel">
|
||
<div class="search-bar">
|
||
<span class="prompt">🔍</span>
|
||
<input
|
||
placeholder="A terminal is just a grid of same-sized cells..."
|
||
class="search-input"
|
||
/>
|
||
<div class="search-actions">Aa ab .*</div>
|
||
</div>
|
||
<div class="search-results">
|
||
<div class="no-results">
|
||
<div class="no-results-title">未找到匹配项</div>
|
||
<div class="no-results-desc">
|
||
没有与您的搜索查询相符的结果
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2. Elements Panel -->
|
||
<div v-else-if="activeTab === 'elements'" class="panel elements-panel">
|
||
<div class="dom-tree-panel">
|
||
<div class="dom-tree-content">
|
||
<div class="dom-node" data-tag="html">
|
||
<div class="line-content">
|
||
<span class="arrow expanded">▼</span>
|
||
<span class="tag-name">html</span>
|
||
<span class="attr-name">class</span>=<span class="attr-val"
|
||
>"mac"</span
|
||
>
|
||
<span class="attr-name">lang</span>=<span class="attr-val"
|
||
>"zh-CN"</span
|
||
>
|
||
<span class="attr-name">dir</span>=<span class="attr-val"
|
||
>"ltr"</span
|
||
>
|
||
<span class="attr-name">style</span>=<span class="attr-val"
|
||
>"--ev-doc-font-size: 14px..."</span
|
||
>
|
||
</div>
|
||
<div class="children">
|
||
<div class="dom-node" data-tag="head">
|
||
<div class="line-content">
|
||
<span class="arrow">▶</span>
|
||
<span class="tag-name">head</span>
|
||
<span class="dots">...</span>
|
||
</div>
|
||
</div>
|
||
<div class="dom-node" data-tag="body">
|
||
<div class="line-content">
|
||
<span class="arrow expanded">▼</span>
|
||
<span class="tag-name">body</span>
|
||
<span class="node-trail">== $0</span>
|
||
</div>
|
||
<div class="children">
|
||
<div class="dom-node selected" data-tag="div">
|
||
<div class="line-content">
|
||
<span class="arrow expanded">▼</span>
|
||
<span class="tag-name">div</span>
|
||
<span class="attr-name">id</span>=<span
|
||
class="attr-val"
|
||
>"app"</span
|
||
>
|
||
<span class="attr-name">data-v-app</span>
|
||
</div>
|
||
<div class="children">
|
||
<div class="dom-node">
|
||
<div class="line-content">
|
||
<span class="indent"></span
|
||
><span class="tag-name">div</span
|
||
><span class="dots">...</span
|
||
><span class="tag-name">/div</span>
|
||
</div>
|
||
</div>
|
||
<div class="dom-node">
|
||
<div class="line-content">
|
||
<span class="indent"></span
|
||
><span class="tag-name">script</span>
|
||
<span class="attr-name">type</span>=<span
|
||
class="attr-val"
|
||
>"module"</span
|
||
>
|
||
<span class="attr-name">src</span>=<span
|
||
class="attr-val"
|
||
>"/easy-vibe/..."</span
|
||
><span class="tag-name">/script</span>
|
||
</div>
|
||
</div>
|
||
<div class="dom-node">
|
||
<div class="line-content">
|
||
<span class="indent"></span
|
||
><span class="tag-name">div</span>
|
||
<span class="attr-name">id</span>=<span
|
||
class="attr-val"
|
||
>"el-popper-container-3083"</span
|
||
><span class="tag-name">></span
|
||
><span class="dots">...</span
|
||
><span class="tag-name">/div</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="line-content">
|
||
<span class="tag-name">/div</span>
|
||
</div>
|
||
</div>
|
||
<div class="dom-node">
|
||
<div class="line-content">
|
||
<span class="arrow">▶</span>
|
||
<span class="tag-name">div</span>
|
||
<span class="attr-name">style</span>=<span
|
||
class="attr-val"
|
||
>"all: initial;"</span
|
||
><span class="tag-name">></span
|
||
><span class="dots">...</span
|
||
><span class="tag-name">/div</span>
|
||
</div>
|
||
</div>
|
||
<div class="dom-node">
|
||
<div class="line-content">
|
||
<span class="arrow">▶</span>
|
||
<span class="tag-name">div</span>
|
||
<span class="attr-name">id</span>=<span
|
||
class="attr-val"
|
||
>"immersive-translate-browser-popup"</span
|
||
>
|
||
<span class="attr-name">style</span>=<span
|
||
class="attr-val"
|
||
>"all: initial;"</span
|
||
><span class="tag-name">></span
|
||
><span class="dots">...</span
|
||
><span class="tag-name">/div</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="line-content">
|
||
<span class="tag-name">/body</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="line-content">
|
||
<span class="tag-name">/html</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="breadcrumbs">html.mac > body > div#app</div>
|
||
<!-- Bottom Drawer (Shared) -->
|
||
<div class="bottom-drawer" style="border-top: 1px solid #ccc">
|
||
<div class="bottom-drawer-header">
|
||
<div
|
||
class="icon-btn more"
|
||
style="padding: 0 4px; margin-right: 4px"
|
||
>
|
||
⋮
|
||
</div>
|
||
<div class="drawer-tab">控制台</div>
|
||
<div class="drawer-tab">AI 辅助</div>
|
||
<div class="drawer-tab">新变化</div>
|
||
<div class="drawer-tab">问题</div>
|
||
<div class="drawer-tab active">
|
||
搜索 <span class="close-icon">×</span>
|
||
</div>
|
||
</div>
|
||
<div class="drawer-content">
|
||
<div class="search-panel">
|
||
<div class="search-bar">
|
||
<span class="prompt">🔍</span>
|
||
<input
|
||
placeholder="A terminal is just a grid of same-sized cells..."
|
||
class="search-input"
|
||
/>
|
||
<div class="search-actions">Aa ab .*</div>
|
||
</div>
|
||
<div class="search-results">
|
||
<div class="no-results">
|
||
<div class="no-results-title">未找到匹配项</div>
|
||
<div class="no-results-desc">
|
||
没有与您的搜索查询相符的结果
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="styles-panel">
|
||
<div class="styles-tabs">
|
||
<div class="style-tab active">样式</div>
|
||
<div class="style-tab">计算样式</div>
|
||
<div class="style-tab">布局</div>
|
||
<div class="style-tab">事件监听器</div>
|
||
<div class="style-tab">»</div>
|
||
</div>
|
||
<div class="styles-content">
|
||
<!-- Box Model Mock -->
|
||
<div class="box-model-container">
|
||
<div class="box-margin">
|
||
<div class="label">margin</div>
|
||
<div class="val-top">-</div>
|
||
<div class="val-left">-</div>
|
||
<div class="val-right">-</div>
|
||
<div class="val-bottom">-</div>
|
||
<div class="box-border">
|
||
<div class="label">border</div>
|
||
<div class="val-top">-</div>
|
||
<div class="val-left">-</div>
|
||
<div class="val-right">-</div>
|
||
<div class="val-bottom">-</div>
|
||
<div class="box-padding">
|
||
<div class="label">padding</div>
|
||
<div class="val-top">-</div>
|
||
<div class="val-left">-</div>
|
||
<div class="val-right">-</div>
|
||
<div class="val-bottom">-</div>
|
||
<div class="box-content">
|
||
<div class="val-content">1600 x 3461</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="filter-bar">
|
||
<input placeholder="过滤" />
|
||
<span class="filter-opt">:hov</span>
|
||
<span class="filter-opt">.cls</span>
|
||
<span class="filter-opt">+</span>
|
||
</div>
|
||
|
||
<div
|
||
class="style-rule"
|
||
v-for="(rule, idx) in cssRules"
|
||
:key="idx"
|
||
>
|
||
<div class="selector">{{ rule.selector }} {</div>
|
||
<div
|
||
class="property"
|
||
v-for="(val, key) in rule.styles"
|
||
:key="key"
|
||
>
|
||
<span class="prop-name">{{ key }}</span
|
||
>: <span class="prop-val">{{ val }}</span
|
||
>;
|
||
</div>
|
||
<div class="selector">}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3. Sources Panel -->
|
||
<div v-else-if="activeTab === 'sources'" class="panel sources-panel">
|
||
<div class="file-navigator">
|
||
<div class="nav-header">
|
||
<span class="nav-tab active">Page</span>
|
||
<span class="nav-tab">Filesystem</span>
|
||
</div>
|
||
<div class="file-tree">
|
||
<div class="file-item file">
|
||
<span class="icon">📄</span> index.html
|
||
</div>
|
||
<div class="file-item folder expanded">
|
||
<span class="folder-icon">▼</span>
|
||
<span class="icon">📁</span> src
|
||
<div class="folder-children">
|
||
<div class="file-item file active">
|
||
<span class="icon">📄</span> main.js
|
||
</div>
|
||
<div class="file-item file">
|
||
<span class="icon">📄</span> App.vue
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="code-editor">
|
||
<div class="editor-tabs">
|
||
<div class="editor-tab active">
|
||
<span class="icon">📄</span> main.js
|
||
<span class="close">×</span>
|
||
</div>
|
||
</div>
|
||
<div class="editor-content">
|
||
<div class="line-numbers">
|
||
1<br />2<br />3<br />4<br />5<br />6
|
||
</div>
|
||
<div class="code-text">
|
||
<pre>{{ fileContent }}</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="debugger-sidebar">
|
||
<div class="debug-section">
|
||
<div class="section-title">
|
||
<span class="arrow">▼</span> Watch
|
||
</div>
|
||
<div class="section-content empty">No watch expressions</div>
|
||
</div>
|
||
<div class="debug-section">
|
||
<div class="section-title">
|
||
<span class="arrow">▼</span> Breakpoints
|
||
</div>
|
||
<div class="section-content">
|
||
<label><input type="checkbox" checked /> main.js:12</label>
|
||
</div>
|
||
</div>
|
||
<div class="debug-section">
|
||
<div class="section-title">
|
||
<span class="arrow">▼</span> Scope
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4. Network Panel -->
|
||
<div v-else-if="activeTab === 'network'" class="panel network-panel">
|
||
<div class="network-toolbar">
|
||
<div class="record-icon">🔴</div>
|
||
<div class="separator"></div>
|
||
<span class="filter-btn active">All</span>
|
||
<span class="filter-btn">Fetch/XHR</span>
|
||
<span class="filter-btn">JS</span>
|
||
<span class="filter-btn">CSS</span>
|
||
<span class="filter-btn">Img</span>
|
||
</div>
|
||
<div class="network-split-view">
|
||
<div class="network-grid">
|
||
<div class="network-grid-header">
|
||
<div class="col name">Name</div>
|
||
<div class="col status">Status</div>
|
||
<div class="col type">Type</div>
|
||
<div class="col size">Size</div>
|
||
<div class="col time">Time</div>
|
||
<div class="col waterfall">Waterfall</div>
|
||
</div>
|
||
<div class="network-rows">
|
||
<div
|
||
class="network-row"
|
||
v-for="(req, idx) in networkRequests"
|
||
:key="idx"
|
||
:class="{
|
||
selected: selectedRequest && selectedRequest.id === req.id
|
||
}"
|
||
@click="selectRequest(req)"
|
||
>
|
||
<div class="col name">{{ req.name }}</div>
|
||
<div class="col status">{{ req.status }}</div>
|
||
<div class="col type">{{ req.type }}</div>
|
||
<div class="col size">{{ req.size }}</div>
|
||
<div class="col time">{{ req.time }}</div>
|
||
<div class="col waterfall">
|
||
<div
|
||
class="waterfall-bar"
|
||
:style="{
|
||
width: req.waterfall + 'px',
|
||
left: idx * 10 + 'px'
|
||
}"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Network Detail Panel (Right Side) -->
|
||
<div class="network-detail" v-if="selectedRequest">
|
||
<div class="detail-header">
|
||
<span
|
||
class="detail-title"
|
||
:class="{ active: activeDetailTab === 'headers' }"
|
||
@click="activeDetailTab = 'headers'"
|
||
>Headers</span
|
||
>
|
||
<span
|
||
class="detail-title"
|
||
:class="{ active: activeDetailTab === 'preview' }"
|
||
@click="activeDetailTab = 'preview'"
|
||
>Preview</span
|
||
>
|
||
<span
|
||
class="detail-title"
|
||
:class="{ active: activeDetailTab === 'response' }"
|
||
@click="activeDetailTab = 'response'"
|
||
>Response</span
|
||
>
|
||
<span class="close-detail" @click="selectedRequest = null"
|
||
>×</span
|
||
>
|
||
</div>
|
||
<div class="detail-content">
|
||
<div v-if="activeDetailTab === 'headers'">
|
||
<div class="detail-section">
|
||
<div class="section-label">General</div>
|
||
<div class="detail-row">
|
||
<span class="key">Request URL:</span>
|
||
<span class="val"
|
||
>http://localhost:3000/{{ selectedRequest.name }}</span
|
||
>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="key">Request Method:</span>
|
||
<span class="val">GET</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="key">Status Code:</span>
|
||
<span class="val status-code"
|
||
>{{ selectedRequest.status }} OK</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="section-label">Response Headers</div>
|
||
<div
|
||
class="detail-row"
|
||
v-for="(val, key) in selectedRequest.headers"
|
||
:key="key"
|
||
>
|
||
<span class="key">{{ key }}:</span>
|
||
<span class="val">{{ val }}</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="detail-section"
|
||
v-if="selectedRequest.requestHeaders"
|
||
>
|
||
<div class="section-label">Request Headers</div>
|
||
<div
|
||
class="detail-row"
|
||
v-for="(val, key) in selectedRequest.requestHeaders"
|
||
:key="key"
|
||
>
|
||
<span class="key">{{ key }}:</span>
|
||
<span class="val">{{ val }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="activeDetailTab === 'preview'">
|
||
<div class="detail-section">
|
||
<div class="section-label">Preview</div>
|
||
<div class="preview-content">
|
||
{{ selectedRequest.preview }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="activeDetailTab === 'response'">
|
||
<div class="detail-section">
|
||
<div class="section-label">Response</div>
|
||
<div class="preview-content">
|
||
{{ selectedRequest.preview }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 5. Application Panel -->
|
||
<div
|
||
v-else-if="activeTab === 'application'"
|
||
class="panel application-panel"
|
||
>
|
||
<div class="storage-sidebar">
|
||
<div class="sidebar-section">
|
||
<div class="section-title">Application</div>
|
||
<div class="section-item">Manifest</div>
|
||
<div class="section-item">Service Workers</div>
|
||
</div>
|
||
<div class="sidebar-section">
|
||
<div class="section-title">Storage</div>
|
||
<div class="section-item active">
|
||
<span class="arrow">▼</span> Local Storage
|
||
</div>
|
||
<div class="section-item indent">http://localhost</div>
|
||
<div class="section-item">
|
||
<span class="arrow">▶</span> Session Storage
|
||
</div>
|
||
<div class="section-item">
|
||
<span class="arrow">▶</span> Cookies
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="storage-content">
|
||
<div class="storage-table">
|
||
<div class="table-header">
|
||
<div class="col key">Key</div>
|
||
<div class="col value">Value</div>
|
||
</div>
|
||
<div
|
||
class="table-row"
|
||
v-for="(item, idx) in localStorageData"
|
||
:key="idx"
|
||
>
|
||
<div class="col key">{{ item.key }}</div>
|
||
<div class="col value">{{ item.value }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Info Bar Overlay -->
|
||
<div class="info-bar" v-if="hoverInfo">
|
||
<span class="info-icon">💡</span> {{ hoverInfo }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* Reset & Base - COMPACT MODE */
|
||
.browser-devtools-demo {
|
||
border: 1px solid #d0d7de;
|
||
border-radius: 6px;
|
||
background-color: #ffffff;
|
||
color: #202124;
|
||
font-family: 'Segoe UI', '.SFNSDisplay', 'Roboto', sans-serif;
|
||
font-size: 11px; /* Smaller font */
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 400px; /* Reduced height */
|
||
position: relative;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
user-select: none;
|
||
}
|
||
|
||
/* Demo Controls (Top Bar) */
|
||
.demo-controls {
|
||
padding: 6px 12px;
|
||
background: #f6f8fa;
|
||
border-bottom: 1px solid #d0d7de;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
z-index: 10;
|
||
height: 32px;
|
||
}
|
||
.control-label {
|
||
font-weight: 600;
|
||
color: #24292f;
|
||
font-size: 12px;
|
||
}
|
||
.control-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
.tour-select {
|
||
padding: 2px 6px;
|
||
border: 1px solid #d0d7de;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
color: #24292f;
|
||
min-width: 180px;
|
||
cursor: pointer;
|
||
}
|
||
.stop-btn {
|
||
background: #cf222e;
|
||
color: white;
|
||
border: none;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
font-size: 11px;
|
||
}
|
||
|
||
/* DevTools Container */
|
||
.devtools-container {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Header & Tabs */
|
||
.devtools-header {
|
||
background-color: #f3f3f3;
|
||
border-bottom: 1px solid #ccc;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 24px; /* Reduced header height */
|
||
padding: 0 4px;
|
||
}
|
||
.header-left,
|
||
.header-right {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 100%;
|
||
}
|
||
.icon-btn {
|
||
padding: 0 6px;
|
||
cursor: pointer;
|
||
color: #6e6e6e;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.icon-btn:hover {
|
||
color: #202124;
|
||
background-color: #eaeaea;
|
||
}
|
||
.separator {
|
||
width: 1px;
|
||
height: 14px;
|
||
background-color: #ccc;
|
||
margin: 0 6px;
|
||
}
|
||
|
||
.tabs {
|
||
display: flex;
|
||
height: 100%;
|
||
overflow-x: auto;
|
||
}
|
||
.tab {
|
||
padding: 0 8px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
color: #5f6368;
|
||
border-bottom: 2px solid transparent;
|
||
height: 100%;
|
||
font-size: 11px;
|
||
white-space: nowrap;
|
||
}
|
||
.tab:hover {
|
||
background-color: #e8eaed;
|
||
color: #202124;
|
||
}
|
||
.tab.active {
|
||
color: #1a73e8;
|
||
border-bottom: 2px solid #1a73e8;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Body Layout */
|
||
.devtools-body {
|
||
flex: 1;
|
||
display: flex;
|
||
overflow: hidden;
|
||
background-color: #fff;
|
||
position: relative;
|
||
}
|
||
.panel {
|
||
flex: 1;
|
||
display: flex;
|
||
overflow: hidden;
|
||
width: 100%;
|
||
}
|
||
|
||
/* --- 1. Console Panel --- */
|
||
.console-panel-layout {
|
||
flex-direction: column;
|
||
}
|
||
.console-toolbar {
|
||
height: 24px; /* Reduced */
|
||
border-bottom: 1px solid #e0e0e0;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 4px;
|
||
background: #f1f3f4;
|
||
}
|
||
.filter-box {
|
||
display: flex;
|
||
align-items: center;
|
||
border: 1px solid #ccc;
|
||
background: #fff;
|
||
border-radius: 2px;
|
||
padding: 0 4px;
|
||
margin: 0 8px;
|
||
flex: 1;
|
||
max-width: 300px;
|
||
height: 18px;
|
||
}
|
||
.filter-box input {
|
||
border: none;
|
||
outline: none;
|
||
width: 100%;
|
||
font-size: 11px;
|
||
}
|
||
.dropdown-trigger {
|
||
font-size: 11px;
|
||
color: #5f6368;
|
||
padding: 0 6px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.console-main-area {
|
||
flex: 1;
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
.console-sidebar {
|
||
width: 160px;
|
||
border-right: 1px solid #e0e0e0;
|
||
background: #f3f3f3;
|
||
padding-top: 2px;
|
||
}
|
||
.sidebar-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 1px 8px;
|
||
cursor: pointer;
|
||
color: #5f6368;
|
||
height: 20px;
|
||
}
|
||
.sidebar-item:hover {
|
||
background: #e8eaed;
|
||
}
|
||
.sidebar-item.active {
|
||
background: #d2e3fc;
|
||
color: #1a73e8;
|
||
}
|
||
.item-icon {
|
||
margin-right: 6px;
|
||
width: 14px;
|
||
text-align: center;
|
||
}
|
||
|
||
.console-content-wrapper {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #fff;
|
||
}
|
||
.console-output {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
font-family: Consolas, 'Lucida Console', monospace;
|
||
font-size: 11px;
|
||
}
|
||
.log-line {
|
||
border-bottom: 1px solid #f0f0f0;
|
||
display: flex;
|
||
padding: 2px 0;
|
||
min-height: 18px;
|
||
}
|
||
.log-line.error {
|
||
background: #fef0f0;
|
||
border-bottom-color: #ffd6d6;
|
||
color: #d93025;
|
||
}
|
||
.log-line.warn {
|
||
background: #fff8e1;
|
||
border-bottom-color: #ffeba0;
|
||
color: #5f4b0e;
|
||
}
|
||
.log-gutter {
|
||
width: 20px;
|
||
text-align: center;
|
||
flex-shrink: 0;
|
||
padding-top: 1px;
|
||
}
|
||
.log-content {
|
||
flex: 1;
|
||
white-space: pre-wrap;
|
||
padding-right: 4px;
|
||
line-height: 1.3;
|
||
}
|
||
.log-source {
|
||
margin-left: 10px;
|
||
margin-right: 10px;
|
||
text-align: right;
|
||
flex-shrink: 0;
|
||
color: #80868b;
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.console-input-area {
|
||
display: flex;
|
||
align-items: center;
|
||
border-top: 1px solid #e0e0e0;
|
||
padding: 2px 4px;
|
||
min-height: 22px;
|
||
}
|
||
.console-input-area .prompt {
|
||
color: #1a73e8;
|
||
margin-right: 6px;
|
||
font-weight: bold;
|
||
}
|
||
.input-field {
|
||
border: none;
|
||
outline: none;
|
||
flex: 1;
|
||
font-family: Consolas, monospace;
|
||
font-size: 11px;
|
||
}
|
||
|
||
/* Bottom Drawer */
|
||
.bottom-drawer {
|
||
height: 120px;
|
||
border-top: 1px solid #ccc;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #fff;
|
||
}
|
||
.bottom-drawer-header {
|
||
height: 24px;
|
||
background: #f3f3f3;
|
||
border-bottom: 1px solid #ccc;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.drawer-tab {
|
||
padding: 0 12px;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
color: #5f6368;
|
||
border-right: 1px solid transparent;
|
||
font-size: 11px;
|
||
}
|
||
.drawer-tab.active {
|
||
background: #fff;
|
||
color: #202124;
|
||
border-right: 1px solid #ccc;
|
||
}
|
||
.close-icon {
|
||
margin-left: 6px;
|
||
font-size: 12px;
|
||
}
|
||
.drawer-content {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
.search-panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
}
|
||
.search-bar {
|
||
padding: 4px;
|
||
border-bottom: 1px solid #e0e0e0;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.search-input {
|
||
flex: 1;
|
||
border: none;
|
||
outline: none;
|
||
font-size: 11px;
|
||
}
|
||
.search-actions {
|
||
color: #5f6368;
|
||
cursor: pointer;
|
||
}
|
||
.search-results {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #fff;
|
||
}
|
||
.no-results {
|
||
text-align: center;
|
||
color: #5f6368;
|
||
}
|
||
.no-results-title {
|
||
font-weight: bold;
|
||
font-size: 12px;
|
||
margin-bottom: 4px;
|
||
}
|
||
.no-results-desc {
|
||
font-size: 11px;
|
||
}
|
||
|
||
/* --- 2. Elements Panel --- */
|
||
.elements-panel {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
.dom-tree-panel {
|
||
flex: 2;
|
||
border-right: 1px solid #d0d7de;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: auto;
|
||
padding: 4px 0;
|
||
font-family: Consolas, Menlo, monospace;
|
||
font-size: 12px;
|
||
background: #fff;
|
||
}
|
||
.dom-node {
|
||
padding-left: 14px;
|
||
line-height: 18px;
|
||
cursor: default;
|
||
white-space: nowrap;
|
||
}
|
||
.dom-node.selected {
|
||
background-color: #cfe8fc;
|
||
}
|
||
.line-content {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.node-trail {
|
||
color: #5f6368;
|
||
margin-left: 6px;
|
||
}
|
||
.arrow {
|
||
color: #5f6368;
|
||
font-size: 10px;
|
||
display: inline-block;
|
||
width: 14px;
|
||
margin-left: -14px;
|
||
text-align: center;
|
||
}
|
||
.tag-name {
|
||
color: #a90d91;
|
||
}
|
||
.attr-name {
|
||
color: #994500;
|
||
margin-left: 4px;
|
||
}
|
||
.attr-val {
|
||
color: #1a1aa6;
|
||
}
|
||
.dots {
|
||
background: #eee;
|
||
border-radius: 2px;
|
||
padding: 0 2px;
|
||
color: #777;
|
||
font-size: 10px;
|
||
margin: 0 2px;
|
||
}
|
||
.indent {
|
||
display: inline-block;
|
||
width: 14px;
|
||
}
|
||
.breadcrumbs {
|
||
border-top: 1px solid #ccc;
|
||
padding: 2px 8px;
|
||
font-size: 11px;
|
||
color: #5f6368;
|
||
background: #fff;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.styles-panel {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #fff;
|
||
border-left: 1px solid #d0d7de;
|
||
min-width: 260px;
|
||
}
|
||
.styles-tabs {
|
||
display: flex;
|
||
background: #f1f3f4;
|
||
border-bottom: 1px solid #ccc;
|
||
height: 26px;
|
||
}
|
||
.style-tab {
|
||
padding: 0 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
color: #5f6368;
|
||
cursor: pointer;
|
||
border-bottom: 2px solid transparent;
|
||
font-size: 11px;
|
||
}
|
||
.style-tab:hover {
|
||
background-color: #e8eaed;
|
||
color: #202124;
|
||
}
|
||
.style-tab.active {
|
||
color: #1a73e8;
|
||
border-bottom: 2px solid #1a73e8;
|
||
font-weight: 500;
|
||
}
|
||
.styles-content {
|
||
padding: 0;
|
||
overflow: auto;
|
||
background: #fff;
|
||
flex: 1;
|
||
}
|
||
|
||
/* Refined Box Model */
|
||
.box-model-container {
|
||
padding: 16px;
|
||
display: flex;
|
||
justify-content: center;
|
||
background-color: #f8f9fa;
|
||
border-bottom: 1px solid #e0e0e0;
|
||
margin-bottom: 4px;
|
||
}
|
||
.box-margin {
|
||
background-color: rgba(249, 204, 157, 0.4);
|
||
border: 1px dashed #caaa87;
|
||
padding: 16px; /* Increased padding for values */
|
||
position: relative;
|
||
font-size: 9px;
|
||
color: #222;
|
||
}
|
||
.box-border {
|
||
background-color: rgba(255, 221, 150, 0.4);
|
||
border: 1px solid #dac689;
|
||
padding: 16px;
|
||
position: relative;
|
||
}
|
||
.box-padding {
|
||
background-color: rgba(195, 223, 183, 0.4);
|
||
border: 1px dashed #9bc89b;
|
||
padding: 16px;
|
||
position: relative;
|
||
}
|
||
.box-content {
|
||
background-color: rgba(174, 213, 243, 0.4);
|
||
border: 1px solid #7eb0d8;
|
||
padding: 4px 8px;
|
||
min-width: 60px;
|
||
text-align: center;
|
||
}
|
||
.label {
|
||
position: absolute;
|
||
top: 2px;
|
||
left: 4px;
|
||
font-size: 8px;
|
||
color: #555;
|
||
pointer-events: none;
|
||
}
|
||
/* Positioning values */
|
||
.val-top {
|
||
position: absolute;
|
||
top: 2px;
|
||
left: 0;
|
||
right: 0;
|
||
text-align: center;
|
||
}
|
||
.val-bottom {
|
||
position: absolute;
|
||
bottom: 2px;
|
||
left: 0;
|
||
right: 0;
|
||
text-align: center;
|
||
}
|
||
.val-left {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.val-right {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
right: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.filter-bar {
|
||
display: flex;
|
||
border: 1px solid #ccc;
|
||
border-radius: 2px;
|
||
padding: 2px 4px;
|
||
margin: 8px;
|
||
background: #fff;
|
||
align-items: center;
|
||
}
|
||
.filter-bar input {
|
||
border: none;
|
||
outline: none;
|
||
flex: 1;
|
||
font-size: 11px;
|
||
}
|
||
.filter-opt {
|
||
padding: 0 4px;
|
||
color: #5f6368;
|
||
cursor: pointer;
|
||
font-weight: bold;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.style-rule {
|
||
margin-bottom: 8px;
|
||
font-family: Consolas, Menlo, monospace;
|
||
font-size: 11px;
|
||
border-bottom: 1px solid #eee;
|
||
padding: 4px 8px 8px 8px;
|
||
}
|
||
.selector {
|
||
color: #a90d91;
|
||
font-weight: bold;
|
||
}
|
||
.property {
|
||
padding-left: 14px;
|
||
line-height: 1.4;
|
||
}
|
||
.prop-name {
|
||
color: #994500;
|
||
}
|
||
.prop-val {
|
||
color: #222;
|
||
}
|
||
|
||
/* --- 3. Sources Panel --- */
|
||
.sources-panel {
|
||
display: flex;
|
||
}
|
||
.file-navigator {
|
||
width: 180px;
|
||
border-right: 1px solid #ccc;
|
||
background: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.nav-header {
|
||
background: #f3f3f3;
|
||
border-bottom: 1px solid #ccc;
|
||
display: flex;
|
||
height: 24px;
|
||
}
|
||
.nav-tab {
|
||
padding: 0 8px;
|
||
cursor: pointer;
|
||
color: #5f6368;
|
||
font-size: 11px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.nav-tab.active {
|
||
background: #fff;
|
||
color: #202124;
|
||
border-right: 1px solid #ccc;
|
||
}
|
||
.file-tree {
|
||
padding: 4px;
|
||
overflow: auto;
|
||
font-family: 'Segoe UI', sans-serif;
|
||
font-size: 11px;
|
||
}
|
||
.file-item {
|
||
padding: 1px 4px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
}
|
||
.file-item:hover {
|
||
background: #f3f3f3;
|
||
}
|
||
.file-item.active {
|
||
background: #cfe8fc;
|
||
}
|
||
.file-item .icon {
|
||
margin-right: 6px;
|
||
opacity: 0.7;
|
||
font-size: 12px;
|
||
}
|
||
.folder-children {
|
||
padding-left: 16px;
|
||
}
|
||
|
||
.code-editor {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #fff;
|
||
}
|
||
.editor-tabs {
|
||
display: flex;
|
||
background: #f3f3f3;
|
||
border-bottom: 1px solid #ccc;
|
||
height: 24px;
|
||
}
|
||
.editor-tab {
|
||
padding: 0 8px;
|
||
background: #fff;
|
||
border-right: 1px solid #ccc;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 11px;
|
||
color: #333;
|
||
}
|
||
.editor-content {
|
||
flex: 1;
|
||
display: flex;
|
||
font-family: Consolas, monospace;
|
||
font-size: 11px;
|
||
overflow: auto;
|
||
}
|
||
.line-numbers {
|
||
width: 30px;
|
||
background: #f3f3f3;
|
||
border-right: 1px solid #ddd;
|
||
text-align: right;
|
||
padding: 4px;
|
||
color: #999;
|
||
line-height: 1.5;
|
||
}
|
||
.code-text {
|
||
flex: 1;
|
||
padding: 4px;
|
||
line-height: 1.5;
|
||
color: #222;
|
||
}
|
||
|
||
.debugger-sidebar {
|
||
width: 200px;
|
||
border-left: 1px solid #ccc;
|
||
background: #f3f3f3;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.debug-section {
|
||
border-bottom: 1px solid #ccc;
|
||
}
|
||
.section-title {
|
||
padding: 2px 8px;
|
||
background: #e0e0e0;
|
||
font-weight: 700;
|
||
font-size: 11px;
|
||
color: #333;
|
||
cursor: pointer;
|
||
}
|
||
.section-content {
|
||
padding: 2px 8px;
|
||
background: #fff;
|
||
}
|
||
|
||
/* --- 4. Network Panel --- */
|
||
.network-panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.network-toolbar {
|
||
height: 24px;
|
||
background: #f3f3f3;
|
||
border-bottom: 1px solid #ccc;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 8px;
|
||
gap: 8px;
|
||
}
|
||
.record-icon {
|
||
color: #d93025;
|
||
font-size: 10px;
|
||
cursor: pointer;
|
||
}
|
||
.filter-btn {
|
||
cursor: pointer;
|
||
padding: 1px 6px;
|
||
border-radius: 2px;
|
||
color: #5f6368;
|
||
}
|
||
.filter-btn:hover {
|
||
background: #e0e0e0;
|
||
color: #202124;
|
||
}
|
||
.filter-btn.active {
|
||
background: #cdcdcd;
|
||
font-weight: 600;
|
||
color: #202124;
|
||
}
|
||
|
||
.network-split-view {
|
||
flex: 1;
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
.network-grid {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 11px;
|
||
overflow: hidden;
|
||
}
|
||
.network-grid-header {
|
||
display: flex;
|
||
background: #f8f9fa;
|
||
border-bottom: 1px solid #ccc;
|
||
padding: 1px 0;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
.network-rows {
|
||
flex: 1;
|
||
overflow: auto;
|
||
background: #fff;
|
||
}
|
||
.network-row {
|
||
display: flex;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
padding: 1px 0;
|
||
cursor: default;
|
||
}
|
||
.network-row:nth-child(even) {
|
||
background: #f9f9f9;
|
||
}
|
||
.network-row:hover {
|
||
background: #e8f0fe;
|
||
}
|
||
.network-row.selected {
|
||
background: #cfe8fc;
|
||
}
|
||
|
||
.col {
|
||
padding: 1px 6px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
border-right: 1px solid #f0f0f0;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.col.name {
|
||
width: 140px;
|
||
}
|
||
.col.status {
|
||
width: 40px;
|
||
color: #5f6368;
|
||
}
|
||
.col.type {
|
||
width: 60px;
|
||
color: #5f6368;
|
||
}
|
||
.col.size {
|
||
width: 50px;
|
||
color: #5f6368;
|
||
}
|
||
.col.time {
|
||
width: 50px;
|
||
color: #5f6368;
|
||
}
|
||
.col.waterfall {
|
||
flex: 1;
|
||
position: relative;
|
||
}
|
||
.waterfall-bar {
|
||
height: 6px;
|
||
background: #8ab4f8;
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
border-radius: 2px;
|
||
border: 1px solid #4285f4;
|
||
}
|
||
|
||
/* Network Detail Panel */
|
||
.network-detail {
|
||
width: 300px;
|
||
border-left: 1px solid #ccc;
|
||
background: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 11px;
|
||
}
|
||
.detail-header {
|
||
height: 24px;
|
||
background: #f3f3f3;
|
||
border-bottom: 1px solid #ccc;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 8px;
|
||
}
|
||
.detail-title {
|
||
margin-right: 12px;
|
||
color: #5f6368;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
border-bottom: 2px solid transparent;
|
||
line-height: 22px;
|
||
}
|
||
.detail-title:hover {
|
||
color: #333;
|
||
}
|
||
.detail-title.active {
|
||
color: #1a73e8;
|
||
border-bottom: 2px solid #1a73e8;
|
||
}
|
||
.close-detail {
|
||
margin-left: auto;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
color: #5f6368;
|
||
}
|
||
.detail-content {
|
||
flex: 1;
|
||
overflow: auto;
|
||
padding: 8px;
|
||
}
|
||
.detail-section {
|
||
margin-bottom: 12px;
|
||
}
|
||
.section-label {
|
||
font-weight: bold;
|
||
margin-bottom: 4px;
|
||
color: #333;
|
||
}
|
||
.detail-row {
|
||
display: flex;
|
||
margin-bottom: 2px;
|
||
line-height: 1.4;
|
||
word-break: break-all;
|
||
}
|
||
.detail-row .key {
|
||
color: #5f6368;
|
||
margin-right: 6px;
|
||
flex-shrink: 0;
|
||
min-width: 80px;
|
||
}
|
||
.detail-row .val {
|
||
color: #222;
|
||
}
|
||
.status-code {
|
||
color: #1a73e8;
|
||
font-weight: bold;
|
||
}
|
||
.preview-content {
|
||
font-family: Consolas, monospace;
|
||
background: #f8f9fa;
|
||
padding: 6px;
|
||
border-radius: 2px;
|
||
border: 1px solid #eee;
|
||
white-space: pre-wrap;
|
||
color: #24292e;
|
||
}
|
||
|
||
/* --- 5. Application Panel --- */
|
||
.application-panel {
|
||
display: flex;
|
||
}
|
||
.storage-sidebar {
|
||
width: 180px;
|
||
border-right: 1px solid #ccc;
|
||
background: #fff;
|
||
padding: 0;
|
||
overflow: auto;
|
||
}
|
||
.sidebar-section {
|
||
margin-bottom: 8px;
|
||
}
|
||
.section-title {
|
||
font-weight: bold;
|
||
color: #5f6368;
|
||
padding: 2px 8px;
|
||
}
|
||
.section-item {
|
||
padding: 1px 8px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
color: #333;
|
||
}
|
||
.section-item:hover {
|
||
background: #f3f3f3;
|
||
}
|
||
.section-item.active {
|
||
background: #cfe8fc;
|
||
}
|
||
.section-item.indent {
|
||
padding-left: 20px;
|
||
}
|
||
.section-item .arrow {
|
||
margin-right: 4px;
|
||
width: 10px;
|
||
}
|
||
.storage-content {
|
||
flex: 1;
|
||
background: #fff;
|
||
overflow: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.storage-table {
|
||
width: 100%;
|
||
font-size: 11px;
|
||
border-collapse: collapse;
|
||
}
|
||
.table-header {
|
||
display: flex;
|
||
background: #f3f3f3;
|
||
border-bottom: 1px solid #ccc;
|
||
font-weight: bold;
|
||
}
|
||
.table-row {
|
||
display: flex;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
.table-row:nth-child(even) {
|
||
background: #f9f9f9;
|
||
}
|
||
.table-row:hover {
|
||
background: #eef;
|
||
}
|
||
.storage-table .col {
|
||
padding: 2px 8px;
|
||
border-right: 1px solid #eee;
|
||
}
|
||
.storage-table .col.key {
|
||
width: 150px;
|
||
font-weight: 600;
|
||
}
|
||
.storage-table .col.value {
|
||
flex: 1;
|
||
font-family: Consolas, monospace;
|
||
}
|
||
|
||
/* Overlays */
|
||
.info-bar {
|
||
background-color: #323232;
|
||
color: white;
|
||
padding: 6px 12px;
|
||
font-size: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
position: absolute;
|
||
bottom: 16px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border-radius: 24px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||
z-index: 9999;
|
||
white-space: nowrap;
|
||
pointer-events: none;
|
||
}
|
||
.info-icon {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.virtual-cursor {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 10000;
|
||
pointer-events: none;
|
||
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
|
||
margin-top: -5px;
|
||
margin-left: -3px;
|
||
}
|
||
|
||
.highlight-box {
|
||
position: absolute;
|
||
border: 2px solid #1a73e8;
|
||
background-color: rgba(26, 115, 232, 0.15);
|
||
pointer-events: none;
|
||
z-index: 9998;
|
||
box-sizing: border-box;
|
||
transition: all 0.3s ease;
|
||
border-radius: 2px;
|
||
}
|
||
</style>
|