# boot-api-document-vue

**Repository Path**: zhangjialei2/boot-api-document-vue

## Basic Information

- **Project Name**: boot-api-document-vue
- **Description**: api文档
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-25
- **Last Updated**: 2025-12-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# API 文档中心

一个基于 Vue 3 + TypeScript + Element Plus 的现代化 API 文档管理系统。

## ✨ 特性

- 🔍 **智能搜索** - 支持按 API 名称、描述、URL 等关键字搜索
- 📱 **响应式设计** - 完美适配桌面端和移动端
- 🔄 **路由持久化** - 页面刷新后保持当前查看的 API 文档
- 🎨 **美观界面** - 现代化的 UI 设计，交互友好
- 📋 **一键复制** - 快速复制 API 路径和示例代码
- 🏷️ **分类管理** - 智能分类，快速定位所需 API
- 📊 **统计信息** - 直观展示 API 使用统计

## 🛠️ 技术栈

- **前端框架**: Vue 3 (Composition API)
- **开发语言**: TypeScript
- **构建工具**: Vite
- **UI 组件库**: Element Plus
- **路由管理**: Vue Router
- **代码高亮**: Prism.js
- **样式方案**: CSS3 + Flexbox

## 🚀 快速开始

### 环境要求

- Node.js >= 20.19.0 || >= 22.12.0
- npm 或 yarn

### 安装依赖

```sh
npm install
```

### 开发模式

```sh
npm run dev
```

### 生产构建

```sh
npm run build
```

### 类型检查

```sh
npm run type-check
```

### 预览构建结果

```sh
npm run preview
```

## 📁 项目结构

```
src/
├── components/          # 可复用组件
│   ├── ApiDetail.vue   # API 详情组件
│   ├── SearchBox.vue   # 搜索组件
│   ├── Sidebar.vue     # 侧边栏导航
│   └── ...
├── views/              # 页面组件
│   ├── Home.vue        # 首页
│   └── ApiDetail.vue   # API 详情页
├── types/              # TypeScript 类型定义
├── utils/              # 工具函数
├── composables/        # 组合式函数
├── stores/             # 状态管理
├── styles/             # 全局样式
└── data/               # 数据文件
    └── api.json        # API 数据
```

## 🎯 主要功能

### 1. 首页概览
- 显示 API 统计信息（控制器数量、方法数量等）
- 快速访问最近使用的 API
- 热门控制器推荐
- API 分类导航

### 2. 搜索功能
- 实时搜索，支持防抖优化
- 多字段匹配（方法名、描述、URL、参数等）
- 搜索结果高亮显示匹配字段
- 点击搜索结果直接跳转到 API 详情

### 3. API 详情
- 完整的 API 信息展示（HTTP 方法、URL、参数等）
- 参数表格化显示，包含类型和描述
- 响应示例和 JSON 结构说明
- 一键复制 API 路径

### 4. 侧边栏导航
- 树形结构展示所有控制器
- 支持展开/折叠操作
- 当前选中状态高亮
- 移动端自适应

## 🔧 自定义配置

### 修改 API 数据

API 数据存储在 `src/data/api.json` 文件中，支持以下结构：

```json
{
  "controllers": [
    {
      "className": "控制器类名",
      "description": "控制器描述",
      "fullClassName": "完整类名",
      "methods": [
        {
          "httpMethod": "HTTP方法",
          "methodName": "方法名",
          "summary": "方法摘要",
          "url": "API路径",
          "parameters": [],
          "returnType": {}
        }
      ]
    }
  ]
}
```

### 主题定制

项目使用 CSS 变量，可通过修改 `src/styles/global.css` 自定义主题：

```css
:root {
  --primary-color: #409EFF;
  --success-color: #67C23A;
  --warning-color: #E6A23C;
  --danger-color: #F56C6C;
}
```

## 📱 移动端适配

- 768px 以下屏幕自动切换为移动端布局
- 侧边栏改为抽屉式交互
- 搜索框固定在顶部
- 表格和卡片自适应布局

## 🤝 贡献指南

1. Fork 本仓库
2. 创建你的功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交你的修改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启一个 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 📞 联系方式

如有问题或建议，请提交 Issue 或联系项目维护者。