331 lines
8.4 KiB
Plaintext
331 lines
8.4 KiB
Plaintext
<template>
|
||
<view class="admin-page api-management">
|
||
<!-- 左侧分类树 -->
|
||
<view class="sidebar-tree">
|
||
<view class="sidebar-header">
|
||
<button class="btn-primary-sm">新增分类</button>
|
||
<button class="btn-success-sm ml-10">同步</button>
|
||
</view>
|
||
<scroll-view class="tree-scroll" scroll-y="true">
|
||
<view class="tree-node" v-for="(group, gIndex) in apiGroups" :key="gIndex">
|
||
<view class="node-label">
|
||
<text class="arrow">▼</text>
|
||
<text class="folder-icon">📁</text>
|
||
<text class="label-text">{{ group.name }}</text>
|
||
</view>
|
||
<view class="node-children">
|
||
<view
|
||
class="child-item"
|
||
v-for="(api, aIndex) in group.children"
|
||
:key="aIndex"
|
||
:class="{ active: selectedApiId === api.id }"
|
||
@click="selectedApiId = api.id"
|
||
>
|
||
<text class="method-tag" :class="api.method.toLowerCase()">{{ api.method }}</text>
|
||
<text class="api-name">{{ api.name }}</text>
|
||
<text class="more-icon">...</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 右侧接口详情 -->
|
||
<view class="api-content">
|
||
<view class="content-header">
|
||
<text class="current-api-title">分销员列表</text>
|
||
<view class="header-actions">
|
||
<button class="btn-secondary-sm">调试</button>
|
||
<button class="btn-primary-sm ml-10">编辑</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="info-section">
|
||
<view class="info-title">接口信息</view>
|
||
<view class="info-list">
|
||
<view class="info-item">
|
||
<text class="info-label">接口名称：</text>
|
||
<text class="info-value">分销员列表</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">请求类型：</text>
|
||
<text class="method-badge get">GET</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">功能描述：</text>
|
||
<text class="info-value">--</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">是否公共：</text>
|
||
<text class="info-value">否</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="info-section">
|
||
<view class="info-title">调用方式</view>
|
||
<view class="info-list">
|
||
<view class="info-item">
|
||
<text class="info-label">路由地址：</text>
|
||
<text class="info-value">agent/index</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">文件地址：</text>
|
||
<text class="info-value">app/adminapi/controller/v1/agent/AgentManage.php</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">方法名：</text>
|
||
<text class="info-value">index</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 参数表格 -->
|
||
<view class="params-section">
|
||
<view class="info-title">header参数：</view>
|
||
<view class="params-table">
|
||
<view class="table-head">
|
||
<view class="th p-attr">属性</view>
|
||
<view class="th p-type">类型</view>
|
||
<view class="th p-required">必须</view>
|
||
<view class="th p-desc">说明</view>
|
||
</view>
|
||
<view class="table-row">
|
||
<view class="td p-attr">Authori-zation</view>
|
||
<view class="td p-type">string</view>
|
||
<view class="td p-required">否</view>
|
||
<view class="td p-desc">--</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="params-section mt-20">
|
||
<view class="info-title">query参数：</view>
|
||
<view class="params-table">
|
||
<view class="table-head">
|
||
<view class="th p-attr">属性</view>
|
||
<view class="th p-type">类型</view>
|
||
<view class="th p-required">必须</view>
|
||
<view class="th p-desc">说明</view>
|
||
</view>
|
||
<view class="table-row" v-for="(p, i) in queryParams" :key="i">
|
||
<view class="td p-attr">{{ p.attr }}</view>
|
||
<view class="td p-type">{{ p.type }}</view>
|
||
<view class="td p-required">{{ p.required }}</view>
|
||
<view class="td p-desc">{{ p.desc }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view></template>
|
||
<script setup lang="uts">
|
||
import { ref } from 'vue'
|
||
|
||
const selectedApiId = ref('1-1')
|
||
|
||
const apiGroups = ref([
|
||
{
|
||
name: '分销员管理',
|
||
children: [
|
||
{ id: '1-1', name: '分销员列表', method: 'GET' },
|
||
{ id: '1-2', name: '修改上级推广人', method: 'PUT' },
|
||
{ id: '1-3', name: '分销员列表头部统计', method: 'GET' },
|
||
{ id: '1-4', name: '推广人列表', method: 'GET' },
|
||
{ id: '1-5', name: '推广订单列表', method: 'GET' }
|
||
]
|
||
},
|
||
{
|
||
name: '分销设置',
|
||
children: []
|
||
},
|
||
{
|
||
name: '分销等级',
|
||
children: []
|
||
}
|
||
])
|
||
|
||
const queryParams = ref([
|
||
{ attr: 'page', type: 'string', required: '是', desc: '页码' },
|
||
{ attr: 'limit', type: 'string', required: '是', desc: '每页条数' },
|
||
{ attr: 'nickname', type: 'string', required: '是', desc: '用户昵称/用户id/手机号码' }
|
||
])
|
||
</script>
|
||
|
||
<style scoped>
|
||
.api-management {
|
||
display: flex;
|
||
flex-direction: row;
|
||
height: calc(100vh - 64px);
|
||
background-color: #fff;
|
||
}
|
||
|
||
.sidebar-tree {
|
||
width: 260px;
|
||
border-right: 1px solid #f0f0f0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.sidebar-header {
|
||
padding: 15px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.tree-scroll {
|
||
flex: 1;
|
||
}
|
||
|
||
.tree-node {
|
||
padding: 5px 0;
|
||
}
|
||
|
||
.node-label {
|
||
padding: 8px 15px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.label-text {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.node-children {
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.child-item {
|
||
padding: 8px 15px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
position: relative;
|
||
}
|
||
|
||
.child-item.active {
|
||
background-color: #e6f7ff;
|
||
color: #1890ff;
|
||
}
|
||
|
||
.method-tag {
|
||
font-size: 10px;
|
||
padding: 0 4px;
|
||
border-radius: 2px;
|
||
margin-right: 8px;
|
||
min-width: 30px;
|
||
text-align: center;
|
||
}
|
||
|
||
.method-tag.get { color: #52c41a; border: 1px solid #b7eb8f; background: #f6ffed; }
|
||
.method-tag.put { color: #faad14; border: 1px solid #ffe58f; background: #fffbe6; }
|
||
|
||
.api-name {
|
||
font-size: 13px;
|
||
flex: 1;
|
||
}
|
||
|
||
.api-content {
|
||
flex: 1;
|
||
padding: 20px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.content-header {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.current-api-title {
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.info-section {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.info-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.info-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
padding-left: 15px;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 14px;
|
||
color: #666;
|
||
width: 80px;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.method-badge {
|
||
font-size: 12px;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.method-badge.get { background-color: #e6f7ff; color: #1890ff; }
|
||
|
||
.params-table {
|
||
border: 1px solid #f0f0f0;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.table-head {
|
||
background-color: #f8f8f9;
|
||
display: flex;
|
||
flex-direction: row;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.table-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.th, .td {
|
||
padding: 12px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.p-attr { flex: 2; }
|
||
.p-type { flex: 1; }
|
||
.p-required { flex: 1; }
|
||
.p-desc { flex: 3; }
|
||
|
||
.btn-primary-sm { background-color: #1890ff; color: #fff; font-size: 12px; padding: 5px 10px; border-radius: 4px; border: none; }
|
||
.btn-success-sm { background-color: #52c41a; color: #fff; font-size: 12px; padding: 5px 10px; border-radius: 4px; border: none; }
|
||
.btn-secondary-sm { background-color: #fff; color: #666; border: 1px solid #d9d9d9; font-size: 12px; padding: 5px 10px; border-radius: 4px; }
|
||
|
||
.ml-10 { margin-left: 10px; }
|
||
.mt-20 { margin-top: 20px; }
|
||
</style>
|
||
|
||
|