automas_admin/AUTO-MAS-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(DevDebugPanel): 优化调试面板的拖拽和展开收起交互

Browse Source
This commit is contained in:
MoeSnowyFox
2025-09-20 23:24:58 +08:00
parent 5eab1b0986
commit 4cc1d1186e
1 changed files with 29 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/components/DevDebugPanel.vue
View File

@@ -5,11 +5,13 @@
:class="{ collapsed: isCollapsed, dragging: isDragging }" :class="{ collapsed: isCollapsed, dragging: isDragging }"
:style="{ left: `${panelPosition.x}px`, top: `${panelPosition.y}px` }" :style="{ left: `${panelPosition.x}px`, top: `${panelPosition.y}px` }"
> >
<div class="debug-header" @mousedown="handleDragStart" @click="toggleCollapse"> <div class="debug-header">
<span class="debug-title" <span class="debug-title drag-handle" @mousedown="handleDragStart">
>🐛 调试面板 <span v-if="isDragging" class="drag-indicator">📌</span></span 调试面板 <span v-if="isDragging" class="drag-indicator">📌</span>
> </span>
<span class="toggle-btn">{{ isCollapsed ? '展开' : '收起' }}</span> <button class="toggle-btn" @click="toggleCollapse" @mousedown.stop>
{{ isCollapsed ? '展开' : '收起' }}
</button>
</div> </div>
<div v-if="!isCollapsed" class="debug-content" @mousedown.stop> <div v-if="!isCollapsed" class="debug-content" @mousedown.stop>
@@ -105,7 +107,7 @@ const route = useRoute()
const router = useRouter() const router = useRouter()
// 开发环境检测 // 开发环境检测
const isDev = ref(import.meta.env.DEV) const isDev = ref(process.env.NODE_ENV === 'development' || import.meta.env?.DEV === true)
// 面板状态 // 面板状态
const isCollapsed = ref(false) const isCollapsed = ref(false)
@@ -163,7 +165,7 @@ const updateTime = () => {
const addRouteHistory = (newRoute: typeof route) => { const addRouteHistory = (newRoute: typeof route) => {
const historyItem: RouteHistoryItem = { const historyItem: RouteHistoryItem = {
path: newRoute.path, path: newRoute.path,
name: newRoute.name, name: typeof newRoute.name === 'string' ? newRoute.name : String(newRoute.name || ''),
time: new Date().toLocaleTimeString(), time: new Date().toLocaleTimeString(),
} }
@@ -320,24 +322,37 @@ onUnmounted(() => {
padding: 8px 12px; padding: 8px 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
cursor: grab;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
user-select: none; user-select: none;
} }
.debug-header:active { .drag-handle {
font-weight: bold;
cursor: grab;
flex: 1;
padding: 4px 0;
}
.drag-handle:active {
cursor: grabbing; cursor: grabbing;
} }
.debug-title { .toggle-btn {
font-weight: bold; background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
color: #fff;
padding: 4px 8px;
font-size: 10px;
cursor: pointer;
transition: all 0.2s ease;
} }
.toggle-btn { .toggle-btn:hover {
font-size: 10px; background: rgba(255, 255, 255, 0.3);
opacity: 0.8; border-color: rgba(255, 255, 255, 0.5);
} }
.debug-content { .debug-content {