admin-ui/src/views/apihub/component/view.vue

<template>
  <el-dialog class="api-view" v-model="showDialog" title="API详情" width="800px" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="API名称" :span="2">{{ apiData.name }}</el-descriptions-item>
      <el-descriptions-item label="API路径" :span="2">{{ apiData.path }}</el-descriptions-item>
      <el-descriptions-item label="请求方法">
        <el-tag :type="getMethodTagType(apiData.method)" size="small">{{ apiData.method }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag size="small" v-if="apiData.status === 'Draft'">草稿</el-tag>
        <el-tag size="small" type="success" v-else-if="apiData.status === 'Published'">已发布</el-tag>
        <el-tag size="small" type="info" v-else-if="apiData.status === 'Deprecated'">已废弃</el-tag>
        <span v-else>{{ apiData.status }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="数据源">{{ apiData.dataSourceName }}</el-descriptions-item>
      <el-descriptions-item label="版本">{{ apiData.version }}</el-descriptions-item>
      <el-descriptions-item label="SQL类型">
        <el-tag size="small" type="info" v-if="apiData.sqlType === 'query'">查询</el-tag>
        <el-tag size="small" type="warning" v-else-if="apiData.sqlType === 'procedure'">存储过程</el-tag>
        <span v-else>{{ apiData.sqlType }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="返回格式">{{ apiData.returnFormat }}</el-descriptions-item>
      <el-descriptions-item label="SQL内容" :span="2">
        <div class="code-block">{{ apiData.sqlContent }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="描述" :span="2">{{ apiData.description || "暂无描述" }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ apiData.createdAt }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{ apiData.updatedAt }}</el-descriptions-item>
    </el-descriptions>

    <div class="section-title">参数定义</div>
    <el-table :data="apiData.parameters || []" style="width: 100%" border v-if="apiData.parameters && apiData.parameters.length">
      <el-table-column prop="name" label="参数名" width="150"></el-table-column>
      <el-table-column prop="type" label="类型" width="100"></el-table-column>
      <el-table-column label="必填" width="80">
        <template #default="scope">
          <el-tag size="small" type="success" v-if="scope.row.required">是</el-tag>
          <el-tag size="small" type="info" v-else>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="defaultValue" label="默认值" width="120"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
    </el-table>
    <el-empty description="暂无参数" v-else></el-empty>

    <div class="section-title" v-if="apiData.plugins && apiData.plugins.length">关联插件</div>
    <el-table :data="apiData.plugins || []" style="width: 100%" border v-if="apiData.plugins && apiData.plugins.length">
      <el-table-column prop="pluginId" label="插件ID" width="100"></el-table-column>
      <el-table-column prop="config" label="插件配置"></el-table-column>
    </el-table>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
        <el-button type="primary" @click="testApi">测试API</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";

const emit = defineEmits(["test"]);
const showDialog = ref(false);
const apiData = reactive({
  id: undefined,
  name: "",
  path: "",
  method: "",
  dataSourceId: undefined,
  dataSourceName: "",
  sqlType: "",
  sqlContent: "",
  parameters: [],
  returnFormat: "",
  version: "",
  status: "",
  plugins: [],
  description: "",
  createdAt: "",
  updatedAt: "",
});

// 根据请求方法返回不同的标签类型
const getMethodTagType = (method: string) => {
  switch (method?.toUpperCase()) {
    case "GET":
      return "success";
    case "POST":
      return "primary";
    case "PUT":
      return "warning";
    case "DELETE":
      return "danger";
    default:
      return "info";
  }
};

// 关闭对话框
const closeDialog = () => {
  showDialog.value = false;
};

// 测试API
const testApi = () => {
  closeDialog();
  emit("test", apiData);
};

// 打开对话框
const open = async (row: any) => {
  // 清空数据
  Object.keys(apiData).forEach((key) => {
    apiData[key] = undefined;
  });

  showDialog.value = true;

  // 实际使用时，应该调用API获取详细信息
  // const res = await api.apihub.getDetail({ id: row.id })
  // Object.assign(apiData, res)

  // 这里模拟直接使用传入的行数据
  Object.assign(apiData, row);
};

defineExpose({ open });
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.section-title {
  font-weight: bold;
  margin: 20px 0 10px;
  font-size: 16px;
  border-left: 4px solid #409eff;
  padding-left: 10px;
}

.code-block {
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 10px;
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-all;
}
</style>