team/tyapi-frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
18278715334
2025-12-09 17:13:29 +08:00
parent 4f8d37483e
commit 8c96c1ffa4
1 changed files with 86 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/pages/api/ApiDebugger.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="flex flex-col h-screen bg-gray-50 overflow-hidden">
<div class="debugger-page flex flex-col h-screen bg-gray-50 overflow-hidden">
<!-- 主要内容区域 -->
<div class="flex gap-3 flex-1 p-3 overflow-hidden min-h-0">
<div class="debugger-main flex gap-3 flex-1 p-3 overflow-hidden min-h-0">
<!-- 左侧产品选择区域 -->
<div class="bg-white rounded-lg shadow-sm overflow-hidden flex flex-col h-full w-64 flex-shrink-0">
<div class="panel-left bg-white rounded-lg shadow-sm overflow-hidden flex flex-col h-full w-72 flex-shrink-0">
<div class="p-3 flex flex-col h-full">
<div class="flex justify-between items-center mb-3 flex-wrap gap-2 flex-shrink-0">
<h3 class="text-base font-semibold text-gray-800 m-0">产品选择</h3>
@@ -58,11 +58,11 @@
</div>
<!-- 中间调试配置区域 -->
<div class="bg-white rounded-lg shadow-sm overflow-hidden flex flex-col h-full flex-1 min-w-0">
<div class="panel-center bg-white rounded-lg shadow-sm overflow-hidden flex flex-col h-full flex-1 min-w-0">
<div class="p-3 flex flex-col h-full">
<div class="flex justify-between items-center mb-3 flex-wrap gap-2 flex-shrink-0">
<div class="flex justify-between items-center mb-3 flex-wrap gap-2 flex-shrink-0 actions-header">
<h3 class="text-base font-semibold text-gray-800 m-0">调试配置</h3>
<div class="flex gap-1.5 items-center">
<div class="actions-bar flex gap-1.5 items-center flex-wrap">
<el-button @click="goToProductDetail" size="default" type="primary" plain>
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
@@ -534,7 +534,86 @@
</template>
<style scoped>
/* 所有样式已使用Tailwind CSS实现 */
/* 响应式优化 */
@media (max-width: 1024px) {
.debugger-page {
height: auto;
min-height: 100vh;
overflow: auto;
}
.debugger-main {
flex-direction: column;
overflow: visible;
}
.panel-left {
width: 100%;
max-height: 360px;
overflow: auto;
}
.panel-center {
width: 100%;
min-height: auto;
overflow: visible;
}
.panel-center .grid.grid-cols-2 {
grid-template-columns: 1fr;
}
.panel-center .grid.grid-cols-2 > * {
min-width: 0;
}
}
@media (max-width: 768px) {
.debugger-main {
gap: 12px;
padding: 12px;
}
.panel-left {
max-height: 320px;
}
.panel-center {
padding: 0;
}
.actions-header {
align-items: flex-start;
}
/* 按钮区域：两列折行，避免超出屏幕 */
.actions-bar {
width: 100%;
justify-content: flex-start;
gap: 8px;
}
.actions-bar .el-button {
flex: 1 1 48%;
min-width: 140px;
}
/* 主要按钮独占一行，保证可点 */
.actions-bar .el-button:last-child {
flex: 1 1 100%;
}
/* 操作按钮区域允许换行且间距更紧凑 */
.panel-center .flex-wrap {
gap: 8px;
}
/* 表单输入区域保持可读性 */
.panel-center :deep(.el-input),
.panel-center :deep(.el-select) {
width: 100%;
}
}
</style>
<script setup>