front/src/views/api/apiDebugger/index.vue

<script lang="ts" setup>
  import { ref } from 'vue';
  import ApiTest from '@/components/ApiTest/index.vue';
  import MarkdownViewer from '@/components/MarkdownViewer/index.vue';
  import guideContent from './guide.md?raw';

  defineOptions({
    name: 'ApiDebugger',
  });

  const pageTab = ref<'debug' | 'guide'>('guide');
</script>

<template>
  <div class="api-debugger-page">
    <div class="api-debugger-card">
      <a-tabs v-model:active-key="pageTab" type="line" size="medium" class="page-tabs">
        <a-tab-pane key="guide" title="新手指引">
          <div class="guide-pane">
            <MarkdownViewer :content="guideContent" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="debug" title="接口调试">
          <div class="debug-pane">
            <ApiTest :enable-defaults="false" />
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .api-debugger-page {
    height: 100%;
    width: 100%;
    padding: 16px;
    background: var(--app-page-bg);
    overflow: hidden;
    box-sizing: border-box;
  }

  .api-debugger-card {
    height: 100%;
    background: var(--app-card-bg);
    border-radius: 4px;
    border: 1px solid var(--color-border-2);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .page-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;

    :deep(.arco-tabs-nav) {
      flex-shrink: 0;
      padding: 0 16px;
      margin-bottom: 0;
    }

    :deep(.arco-tabs-content) {
      flex: 1;
      min-height: 0;
      padding-top: 0;
    }

    :deep(.arco-tabs-content-list),
    :deep(.arco-tabs-pane) {
      height: 100%;
    }

    :deep(.arco-tabs-tab) {
      font-size: 14px;
      font-weight: 500;
    }

    :deep(.arco-tabs-tab-active) {
      color: var(--app-primary-color);
    }

    :deep(.arco-tabs-nav-ink) {
      background-color: var(--app-primary-color);
    }
  }

  .debug-pane {
    height: 100%;
    min-height: 0;
    overflow: hidden;

    :deep(.api-test-container) {
      height: 100%;
      padding: 16px;
      background: transparent;
      box-sizing: border-box;
    }
  }

  .guide-pane {
    height: 100%;
    min-height: 0;
    overflow: auto;
    padding: 8px 24px 24px;
    box-sizing: border-box;
  }
</style>