# xlt-api-document-ui

**Repository Path**: wei_pengcheng/xlt-api-document-ui

## Basic Information

- **Project Name**: xlt-api-document-ui
- **Description**: 一个简单的api文档UI界面
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-01-21
- **Last Updated**: 2025-01-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# XLT 接口文档


## 项目介绍

XLT是一个现代化的API文档生成工具，旨在解决传统Swagger UI界面不够美观的问题。主要特点包括：

- 更加美观的UI界面设计，提供更好的用户体验
- 支持深色/浅色主题切换
- 更清晰的API分组和导航结构
- 支持Markdown格式的API描述
- 响应式设计，适配各种屏幕尺寸
- 可自定义主题样式
- 支持OpenAPI/Swagger规范
- 更友好的调试工具

本项目致力于为开发者提供一个既实用又赏心悦目的API文档展示方案，让API文档的阅读和调试体验更加愉悦。

## 项目架构

本项目采用现代化的前端技术栈进行开发：

### 核心技术栈

- **Vue 3**: 采用 Vue 3 作为核心框架，使用 Composition API 开发
- **Vite**: 使用 Vite 作为构建工具，提供极速的开发体验
- **TypeScript**: 使用 TypeScript 进行开发，提供更好的类型支持
- **Pinia**: 状态管理方案
- **Vue Router**: 路由管理

### 项目结构

```src
├── assets          # 静态资源文件
│   ├── fonts      # 字体文件
│   ├── icons      # 图标文件
│   └── styles     # 全局样式文件
├── components     # 公共组件
│   ├── ApiDebugger.vue    # API调试器组件
│   ├── ApiDoc.vue         # API文档展示组件
│   ├── MonacoEditor.vue   # 代码编辑器组件
│   └── ...
├── layouts        # 布局组件
│   ├── MainLayout.vue     # 主布局组件
│   └── ...
├── router         # 路由配置
│   └── index.ts
├── stores         # 状态管理
│   ├── api.ts     # API相关状态
│   └── theme.ts   # 主题相关状态
├── types          # TypeScript 类型定义
│   ├── api.ts     # API相关类型
│   └── common.ts  # 通用类型
├── utils          # 工具函数
│   ├── request.ts # 请求工具
│   └── format.ts  # 格式化工具
└── views          # 页面组件
    ├── Home.vue   # 首页
    └── Doc.vue    # 文档页面

```

项目采用清晰的目录结构，各模块职责分明：

- assets : 存放静态资源，包括字体、图标和全局样式
- components : 可复用的组件，如API调试器、文档展示组件等
- layouts : 页面布局组件，处理整体页面结构
- router : 路由配置，管理页面导航
- stores : Pinia 状态管理，处理全局状态
- types : TypeScript 类型定义，确保类型安全
- utils : 工具函数，提供各种辅助功能
- views : 页面级组件，作为路由的渲染入口


### 项目截图
![image1](./public/image.png)

![image2](./public/image2.png)

![image3](./public/image3.png)

![image4](./public/image4.png)