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

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

@@ -6,7 +6,7 @@ import { createRouter,  createWebHistory } from 'vue-router'
 const routes = [
     {
         path: '/',
-        redirect: '/home'
+        redirect: '/helloworld'
     },
     {
         path: '/login',
@@ -16,15 +16,28 @@ const routes = [
         component: () => import('/src/views/user/login.vue')
     },
     {
-        path: '/home',
+        path: '/helloworld',
         component: () => import('/src/components/HelloWorld.vue')
-    },{
+    },
+    {
         path:'/manage',
+        name: '管理页面',
         component: () => import('/src/views/main.vue'),
         children:[
             {
                 path:'/manage/interfaceInfo',
                 component:()=>import('/src/views/interfaceInfo/main.vue')
+            },
+
+        ]
+    },{
+        path:'/home',
+        name: '主页',
+        component: () => import('/src/views/main.vue'),
+        children:[
+            {
+                path: '/home/interfaceInfo',
+                component: () => import('/src/views/interfaceInfo/index.vue')
             }
         ]
     }

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

@@ -0,0 +1,293 @@
+<template>
+  <div class="interface-management">
+
+
+    <!-- 搜索区域 -->
+    <div class="filter-section">
+      <el-input
+          v-model="searchParams.name"
+          placeholder="搜索接口名称"
+          clearable
+          style="width: 300px"
+          @clear="handleSearch"
+          @keyup.enter="handleSearch"
+      >
+        <template #prefix>
+          <el-icon><Search /></el-icon>
+        </template>
+      </el-input>
+    </div>
+
+    <!-- 接口列表 -->
+    <div class="interface-list">
+      <el-table
+          :data="interfaceList"
+          v-loading="loading"
+          style="width: 100%"
+      >
+        <el-table-column prop="name" label="接口名称" min-width="180" show-overflow-tooltip>
+          <template #default="scope">
+            <div class="interface-name">
+              <span class="name-text">{{ scope.row.name }}</span>
+              <el-tag
+                  :type="getMethodType(scope.row.method)"
+                  size="small"
+                  class="method-tag"
+              >
+                {{ scope.row.method }}
+              </el-tag>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="description" label="接口描述" min-width="250" show-overflow-tooltip />
+
+        <el-table-column label="操作" width="100" fixed="right">
+          <template #default="scope">
+            <el-button
+                type="primary"
+                link
+                size="small"
+                @click="handleViewDetail(scope.row.id)"
+            >
+              查看详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 空状态 -->
+    <div v-if="interfaceList.length === 0" class="empty-state">
+      <el-empty description="暂无接口数据" />
+    </div>
+    <!-- 分页 -->
+    <div class="pagination-container">
+      <el-pagination
+          v-model:current-page="pagination.current"
+          v-model:page-size="pagination.size"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import {queryInterface} from "../../commom/api/interfaceInfo.js";
+import {ElMessage} from "element-plus";
+
+const router = useRouter()
+
+// 搜索参数
+const searchParams = reactive({
+  name: ''
+})
+// 分页配置
+const pagination = reactive({
+  current: 1,
+  size: 10,
+  total: 0
+})
+
+// 加载状态
+const loading = ref(false)
+
+// 接口列表数据
+const interfaceList = ref([
+  {
+    id: '1',
+    name: '获取用户信息',
+    description: '根据用户ID获取用户的详细信息',
+    url: '/api/v1/users/{id}',
+    requestHeader: '{"Content-Type": "application/json"}',
+    responseHeader: '{"Content-Type": "application/json"}',
+    status: 1,
+    method: 'GET',
+    userId: 'admin',
+    createTime: new Date('2024-01-15 10:30:00')
+  },
+  {
+    id: '2',
+    name: '创建用户',
+    description: '创建新的用户账户',
+    url: '/api/v1/users',
+    requestHeader: '{"Content-Type": "application/json"}',
+    responseHeader: '{"Content-Type": "application/json"}',
+    status: 1,
+    method: 'POST',
+    userId: 'admin',
+    createTime: new Date('2024-01-16 14:20:00')
+  },
+  {
+    id: '3',
+    name: '更新用户信息',
+    description: '更新指定用户的信息',
+    url: '/api/v1/users/{id}',
+    requestHeader: '{"Content-Type": "application/json"}',
+    responseHeader: '{"Content-Type": "application/json"}',
+    status: 0,
+    method: 'PUT',
+    userId: 'admin',
+    createTime: new Date('2024-01-17 09:15:00')
+  },
+  {
+    id: '4',
+    name: '删除用户',
+    description: '删除指定的用户账户',
+    url: '/api/v1/users/{id}',
+    requestHeader: '{"Content-Type": "application/json"}',
+    responseHeader: '{"Content-Type": "application/json"}',
+    status: 1,
+    method: 'DELETE',
+    userId: 'admin',
+    createTime: new Date('2024-01-18 16:45:00')
+  },
+  {
+    id: '5',
+    name: '查询用户列表',
+    description: '分页查询用户列表信息',
+    url: '/api/v1/users/list',
+    requestHeader: '{"Content-Type": "application/json"}',
+    responseHeader: '{"Content-Type": "application/json"}',
+    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 handleSearch = () => {
+  fetchTableData()
+}
+
+// 查看详情
+const handleViewDetail = (id) => {
+  router.push(`/interface/detail/${id}`)
+}
+
+const fetchTableData = async () => {
+  loading.value = true
+  try {
+    queryInterface({...searchParams, ...pagination }).then((res) => {
+      interfaceList.value = res.data.records
+      pagination.total = res.data.total
+    })
+  } catch (error) {
+    console.error('获取数据失败:', error)
+    ElMessage.error('获取数据失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+
+// 初始化加载
+onMounted(() => {
+  fetchTableData()
+})
+</script>
+
+<style scoped>
+.interface-management {
+  padding: 20px;
+  background: #fff;
+  min-height: calc(100vh - 84px);
+}
+
+.page-header {
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.header-title h1 {
+  margin: 0 0 8px 0;
+  font-size: 24px;
+  color: #303133;
+  font-weight: 600;
+}
+
+.header-title p {
+  margin: 0;
+  color: #606266;
+  font-size: 14px;
+}
+
+.filter-section {
+  margin-bottom: 20px;
+  margin-right: auto;
+}
+
+.interface-list {
+  margin-bottom: 24px;
+}
+
+.interface-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.name-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.method-tag {
+  flex-shrink: 0;
+}
+
+.url-text {
+  font-family: 'Monaco', 'Consolas', monospace;
+  font-size: 12px;
+  color: #409EFF;
+  background: #f0f7ff;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.empty-state {
+  margin-top: 60px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .interface-management {
+    padding: 16px;
+  }
+
+  .filter-section {
+    margin-bottom: 16px;
+  }
+
+  .filter-section .el-input {
+    width: 100% !important;
+  }
+}
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

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

@@ -80,8 +80,6 @@
     >
     <el-table-column type="selection" width="55" />
 
-    <!--<el-table-column prop="id" label="ID" width="80" sortable />-->
-
     <el-table-column prop="name" label="接口名称" min-width="150" show-overflow-tooltip />
 
     <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
@@ -95,9 +93,6 @@
 
 <el-table-column prop="status" label="状态" width="100">
     <template #default="{ row }">
-<!--    <el-tag :type="row.status === 1 ? 'success' : 'danger'">-->
-<!--    {{ row.status === 1 ? '开启' : '关闭' }}-->
-<!--</el-tag>-->
       <el-switch v-model="row.status" :active-value="1" :inactive-value="0" @change="handleStatusChange(row)" />
 </template>
 </el-table-column>
@@ -629,7 +624,6 @@ show-word-limit
     return types[method] || 'info'
 }
     const handleStatusChange = async (interfaceInfo) =>{
-      console.log(interfaceInfo)
       if(interfaceInfo.status === 1){
         //上线
         onlineInterface({

ui/yangyi-open-api-platform-ui/src/views/main.vue

@@ -127,7 +127,7 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import {getUserName, getUserAvatar, clearTokenAndUserInfo} from "/src/commom/utils/auth.js";
+import {getUserName, getUserAvatar, clearTokenAndUserInfo, getUserRole} from "/src/commom/utils/auth.js";
 
 const router = useRouter()
 const route = useRoute()
@@ -147,7 +147,58 @@ const userInfo = ref({
 })
 
 // 菜单数据
-const menuList = ref([
+const menuList = computed(()=>{
+  //根据用户角色显示菜单
+  const role = getUserRole();
+  console.log(role)
+  if(role === '管理员'){
+    return [
+      {
+        path: '/interfaceInfo',
+        title: '接口管理',
+        icon: 'el-icon-document',
+        children: [
+          {
+            path: '/manage/interfaceInfo',
+            title: '接口管理',
+            icon: 'el-icon-notebook-2'
+          }
+        ]
+      },
+    ]
+  }else if (role === '用户'){
+    return [
+      {
+        path: '/home',
+        title: '主页',
+        icon: 'el-icon-document',
+        children: [
+          {
+            path: '/home/interfaceInfo',
+            title: '接口信息',
+            icon: 'el-icon-notebook-2'
+          }
+        ]
+      },
+    ]
+  }else{
+    return [
+      {
+        path: '/home',
+        title: '主页',
+        icon: 'el-icon-document',
+        children: [
+          {
+            path: '/home/interfaceInfo',
+            title: '接口信息',
+            icon: 'el-icon-notebook-2'
+          }
+        ]
+      },
+    ]
+  }
+})
+const menuList1 = ref([
   {
     path: '/dashboard',
     title: '仪表盘',
@@ -235,6 +286,7 @@ const menuList = ref([
   // }
 ])
 
+
 // 计算属性
 const activeMenu = computed(() => route.path)
 

ui/yangyi-open-api-platform-ui/src/views/user/login.vue

@@ -201,7 +201,7 @@ import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { User, Lock, EditPen } from '@element-plus/icons-vue'
 import { login, register } from '/src/commom/api/user.js'
-import {saveUserInfo, setToken} from "/src/commom/utils/auth.js";
+import {getToken, saveUserInfo, setToken} from "/src/commom/utils/auth.js";
 
 const router = useRouter()
 
@@ -317,7 +317,7 @@ const handleRegister = async () => {
 }
 
 onMounted(() => {
-  const token = localStorage.getItem('token')
+  const token = getToken()
   if (token) {
     router.push('/')
   }