feat:前端项目,用户端添加接口参数显示

ui/yangyi-open-api-platform-ui/src/views/interfaceInfo/detail.vue

@@ -100,6 +100,39 @@
       </div>
     </el-card>
 
+    <!--接口参数-->
+    <el-card class="info-card" shadow="never">
+      <template #header>
+        <div class="card-header">
+          <el-icon><Document /></el-icon>
+          <span>参数信息</span>
+        </div>
+      </template>
+
+      <el-descriptions :column="4" border>
+
+        <template v-for="param in params" :key="param.id">
+          <el-descriptions-item label="参数名称">
+            {{ param.name }}
+          </el-descriptions-item>
+
+          <el-descriptions-item label="参数类型">
+            <span class="url-text">{{ param.type == 0 ? 'QUERY' : 'BODY' }}</span>
+          </el-descriptions-item>
+
+          <el-descriptions-item label="参数数据类型">
+            <el-tag :type="getParamType(param.paramType)">
+              {{ param.paramType }}
+            </el-tag>
+          </el-descriptions-item>
+
+          <el-descriptions-item label="参数描述">
+            {{ param.description }}
+          </el-descriptions-item>
+        </template>
+      </el-descriptions>
+    </el-card>
+
     <!-- 操作按钮 -->
     <div class="action-buttons">
       <el-button @click="handleBack">
@@ -125,7 +158,7 @@ import {
   VideoPlay
 } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
-import {getInterfaceById} from "../../commom/api/interfaceInfo.js";
+import {getInterfaceById, getInterfaceParamByInterfaceInfoId} from "../../commom/api/interfaceInfo.js";
 
 const route = useRoute()
 const router = useRouter()
@@ -143,6 +176,16 @@ const interfaceData = ref({
   userId: '',
   createTime: ''
 })
+const params = ref([
+  {
+    id: 1,
+    interfaceInfoId:1,
+    name: 'name',
+    type: 0,
+    paramType: 'string',
+    description: '名称'
+  }
+])
 
 // 模拟接口数据
 const mockInterfaceData = {
@@ -220,6 +263,17 @@ const getMethodType = (method) => {
   return typeMap[method] || 'info'
 }
 
+const getParamType = (paramType) =>{
+  const typeMap = {
+    'string': 'success',
+    'number': 'primary',
+    'boolean': 'warning',
+    'object': 'info',
+    'array': 'danger'
+  }
+  return typeMap[paramType] || 'info'
+}
+
 // 格式化时间显示
 const formatTime = (time) => {
   if (!time) return ''
@@ -269,9 +323,20 @@ const fetchInterfaceDetail = () => {
   })
 }
 
+const fetchInterfaceParam = () =>{
+  const id = route.params.id
+  getInterfaceParamByInterfaceInfoId(id).then(res =>{
+    if(res.code === 200){
+      params.value = res.data
+    }else{
+      ElMessage.error(res.message)
+    }
+  })
+}
 // 初始化加载
 onMounted(() => {
   fetchInterfaceDetail()
+  fetchInterfaceParam()
 })
 </script>