feat:前端项目,实现用户端查看接口信息详情页面

ui/yangyi-open-api-platform-ui/src/commom/api/interfaceInfo.js

@@ -23,7 +23,7 @@ export function updateInterface(data) {
         data
     })
 }
-//查询
+//分页查询
 export function queryInterface(params) {
     return request({
         url: '/interfaceInfo',
@@ -49,5 +49,12 @@ export function offlineInterface(data) {
         data
     })
 }
+//查询
+export function getInterfaceById(id) {
+    return request({
+        url: `/interfaceInfo/${id}`,
+        method: 'get',
+    })
+}
 
 

ui/yangyi-open-api-platform-ui/src/router/main.js

@@ -38,6 +38,10 @@ const routes = [
             {
                 path: '/home/interfaceInfo',
                 component: () => import('/src/views/interfaceInfo/index.vue')
+            },
+            {
+                path: '/home/interfaceInfo/detail/:id',
+                component: () => import('/src/views/interfaceInfo/detail.vue')
             }
         ]
     }

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

@@ -0,0 +1,413 @@
+<template>
+  <div class="interface-detail">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <div class="header-left">
+        <el-button
+            type="primary"
+            link
+            @click="handleBack"
+            class="back-btn"
+        >
+          <el-icon><ArrowLeft /></el-icon>
+          返回列表
+        </el-button>
+        <div class="header-title">
+          <h1>{{ interfaceData.name }}</h1>
+          <div class="header-tags">
+            <el-tag :type="getMethodType(interfaceData.method)" class="method-tag">
+              {{ interfaceData.method }}
+            </el-tag>
+            <el-tag :type="interfaceData.status === 1 ? 'success' : 'info'">
+              {{ interfaceData.status === 1 ? '开启' : '关闭' }}
+            </el-tag>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 基本信息卡片 -->
+    <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="2" border>
+        <el-descriptions-item label="接口名称">
+          {{ interfaceData.name }}
+        </el-descriptions-item>
+
+        <el-descriptions-item label="接口描述">
+          {{ interfaceData.description }}
+        </el-descriptions-item>
+
+        <el-descriptions-item label="接口地址">
+          <span class="url-text">{{ interfaceData.url }}</span>
+        </el-descriptions-item>
+
+        <el-descriptions-item label="请求方法">
+          <el-tag :type="getMethodType(interfaceData.method)">
+            {{ interfaceData.method }}
+          </el-tag>
+        </el-descriptions-item>
+
+        <el-descriptions-item label="接口状态">
+          <el-tag :type="interfaceData.status === 1 ? 'success' : 'info'">
+            {{ interfaceData.status === 1 ? '开启' : '关闭' }}
+          </el-tag>
+        </el-descriptions-item>
+
+        <el-descriptions-item label="创建人">
+          {{ interfaceData.userId }}
+        </el-descriptions-item>
+
+        <el-descriptions-item label="创建时间">
+          {{ formatTime(interfaceData.createTime) }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+
+    <!-- 请求头信息 -->
+    <el-card class="info-card" shadow="never">
+      <template #header>
+        <div class="card-header">
+          <el-icon><SetUp /></el-icon>
+          <span>请求头信息</span>
+        </div>
+      </template>
+
+      <div class="code-block">
+        <pre>{{ formatJson(interfaceData.requestHeader) }}</pre>
+      </div>
+    </el-card>
+
+    <!-- 响应头信息 -->
+    <el-card class="info-card" shadow="never">
+      <template #header>
+        <div class="card-header">
+          <el-icon><Finished /></el-icon>
+          <span>响应头信息</span>
+        </div>
+      </template>
+
+      <div class="code-block">
+        <pre>{{ formatJson(interfaceData.responseHeader) }}</pre>
+      </div>
+    </el-card>
+
+    <!-- 操作按钮 -->
+    <div class="action-buttons">
+      <el-button @click="handleBack">
+        <el-icon><ArrowLeft /></el-icon>
+        返回列表
+      </el-button>
+      <el-button type="primary" @click="handleTestInterface" v-if="interfaceData.status === 1">
+        <el-icon><VideoPlay /></el-icon>
+        测试接口
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import {
+  ArrowLeft,
+  Document,
+  SetUp,
+  Finished,
+  VideoPlay
+} from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import {getInterfaceById} from "../../commom/api/interfaceInfo.js";
+
+const route = useRoute()
+const router = useRouter()
+
+// 接口数据
+const interfaceData = ref({
+  id: '',
+  name: '',
+  description: '',
+  url: '',
+  requestHeader: '',
+  responseHeader: '',
+  status: 0,
+  method: '',
+  userId: '',
+  createTime: ''
+})
+
+// 模拟接口数据
+const mockInterfaceData = {
+  '1': {
+    id: '1',
+    name: '获取用户信息',
+    description: '根据用户ID获取用户的详细信息，包括基本信息、角色和权限等',
+    url: '/api/v1/users/{id}',
+    requestHeader: '{\n  "Content-Type": "application/json",\n  "Authorization": "Bearer {token}"\n}',
+    responseHeader: '{\n  "Content-Type": "application/json",\n  "X-RateLimit-Limit": "100",\n  "X-RateLimit-Remaining": "99"\n}',
+    status: 1,
+    method: 'GET',
+    userId: 'admin',
+    createTime: new Date('2024-01-15 10:30:00')
+  },
+  '2': {
+    id: '2',
+    name: '创建用户',
+    description: '创建新的用户账户，需要提供用户名、邮箱和密码等必要信息',
+    url: '/api/v1/users',
+    requestHeader: '{\n  "Content-Type": "application/json",\n  "Authorization": "Bearer {token}"\n}',
+    responseHeader: '{\n  "Content-Type": "application/json",\n  "Location": "/api/v1/users/{id}"\n}',
+    status: 1,
+    method: 'POST',
+    userId: 'admin',
+    createTime: new Date('2024-01-16 14:20:00')
+  },
+  '3': {
+    id: '3',
+    name: '更新用户信息',
+    description: '更新指定用户的个人信息，可以修改用户名、邮箱、头像等字段',
+    url: '/api/v1/users/{id}',
+    requestHeader: '{\n  "Content-Type": "application/json",\n  "Authorization": "Bearer {token}",\n  "If-Match": "{etag}"\n}',
+    responseHeader: '{\n  "Content-Type": "application/json",\n  "ETag": "{new_etag}"\n}',
+    status: 0,
+    method: 'PUT',
+    userId: 'admin',
+    createTime: new Date('2024-01-17 09:15:00')
+  },
+  '4': {
+    id: '4',
+    name: '删除用户',
+    description: '从系统中永久删除指定的用户账户，此操作不可逆，请谨慎使用',
+    url: '/api/v1/users/{id}',
+    requestHeader: '{\n  "Content-Type": "application/json",\n  "Authorization": "Bearer {token}"\n}',
+    responseHeader: '{\n  "Content-Type": "application/json"\n}',
+    status: 1,
+    method: 'DELETE',
+    userId: 'admin',
+    createTime: new Date('2024-01-18 16:45:00')
+  },
+  '5': {
+    id: '5',
+    name: '查询用户列表',
+    description: '分页查询用户列表信息，支持条件筛选和排序',
+    url: '/api/v1/users/list',
+    requestHeader: '{\n  "Content-Type": "application/json",\n  "Authorization": "Bearer {token}"\n}',
+    responseHeader: '{\n  "Content-Type": "application/json",\n  "X-Total-Count": "100",\n  "X-Page-Size": "20"\n}',
+    status: 1,
+    method: 'GET',
+    userId: 'admin',
+    createTime: new Date('2024-01-19 11:20:00')
+  }
+}
+
+// 根据HTTP方法获取对应的标签类型
+const getMethodType = (method) => {
+  const typeMap = {
+    'GET': 'success',
+    'POST': 'primary',
+    'PUT': 'warning',
+    'DELETE': 'danger',
+    'PATCH': 'info'
+  }
+  return typeMap[method] || 'info'
+}
+
+// 格式化时间显示
+const formatTime = (time) => {
+  if (!time) return ''
+  const date = new Date(time)
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  }).replace(/\//g, '-')
+}
+
+// 格式化JSON字符串
+const formatJson = (jsonString) => {
+  if (!jsonString) return '暂无数据'
+  try {
+    const parsed = JSON.parse(jsonString)
+    return JSON.stringify(parsed, null, 2)
+  } catch (error) {
+    return jsonString
+  }
+}
+
+// 返回列表
+const handleBack = () => {
+  router.back()
+}
+
+// 测试接口
+const handleTestInterface = () => {
+  ElMessage.info(`开始测试接口: ${interfaceData.value.name}`)
+  // 这里可以添加接口测试逻辑
+}
+
+// 获取接口详情
+const fetchInterfaceDetail = () => {
+  const id = route.params.id
+  getInterfaceById(id).then((res)=>{
+    if(res.code === 200){
+      interfaceData.value = res.data
+    }else{
+      ElMessage.error(res.message)
+      handleBack()
+    }
+  })
+}
+
+// 初始化加载
+onMounted(() => {
+  fetchInterfaceDetail()
+})
+</script>
+
+<style scoped>
+.interface-detail {
+  padding: 20px;
+  background: #fff;
+  min-height: calc(100vh - 84px);
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.header-left {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.back-btn {
+  margin-top: 8px;
+}
+
+.header-title h1 {
+  margin: 0 0 12px 0;
+  font-size: 24px;
+  color: #303133;
+  font-weight: 600;
+}
+
+.header-tags {
+  display: flex;
+  gap: 8px;
+}
+
+.method-tag {
+  font-weight: bold;
+}
+
+.info-card {
+  margin-bottom: 20px;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.card-header .el-icon {
+  color: #409EFF;
+}
+
+.url-text {
+  font-family: 'Monaco', 'Consolas', monospace;
+  color: #409EFF;
+  background: #f0f7ff;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.code-block {
+  background: #f6f8fa;
+  border: 1px solid #e1e4e8;
+  border-radius: 6px;
+  padding: 16px;
+  overflow-x: auto;
+}
+
+.code-block pre {
+  margin: 0;
+  font-family: 'Monaco', 'Consolas', monospace;
+  font-size: 14px;
+  line-height: 1.45;
+  color: #24292e;
+  white-space: pre-wrap;
+}
+
+.action-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 32px;
+  padding-top: 20px;
+  border-top: 1px solid #f0f0f0;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .interface-detail {
+    padding: 16px;
+  }
+
+  .page-header {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .header-left {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .back-btn {
+    align-self: flex-start;
+  }
+
+  .action-buttons {
+    flex-direction: column;
+  }
+
+  .action-buttons .el-button {
+    width: 100%;
+  }
+}
+
+/* 深色模式支持 */
+@media (prefers-color-scheme: dark) {
+  .code-block {
+    background: #1e1e1e;
+    border-color: #333;
+  }
+
+  .code-block pre {
+    color: #d4d4d4;
+  }
+
+  .url-text {
+    background: #1e3a5f;
+    color: #58a6ff;
+  }
+}
+</style>

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

@@ -79,7 +79,7 @@
 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import {queryInterface} from "../../commom/api/interfaceInfo.js";
+import {queryInterface} from "/src/commom/api/interfaceInfo.js";
 import {ElMessage} from "element-plus";
 
 const router = useRouter()
@@ -183,7 +183,7 @@ const handleSearch = () => {
 
 // 查看详情
 const handleViewDetail = (id) => {
-  router.push(`/interface/detail/${id}`)
+  router.push(`/home/interfaceInfo/detail/${id}`)
 }
 
 const fetchTableData = async () => {