# antdv-pro-layout

**Repository Path**: TsMask/antdv-pro-layout

## Basic Information

- **Project Name**: antdv-pro-layout
- **Description**: 【Vue3】Ant Design Pro Vue 布局，易于使用专业脚手架。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://stackblitz.com/edit/vitejs-vite-9gcs3rs4
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 3
- **Created**: 2023-10-30
- **Last Updated**: 2026-08-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Ant-Design, TypeScript

## README

# Ant Design Vue Pro Layout

Ant Design Vue Pro 布局，快速完成项目布局。

[![Vue Support](https://img.shields.io/badge/support-Vue3-green?style=flat)](./package.json)
[![NPM version](https://img.shields.io/npm/v/antdv-pro-layout/latest?style=flat)](https://www.npmjs.com/package/antdv-pro-layout)
[![NPM downloads](https://img.shields.io/npm/dm/antdv-pro-layout.svg?style=flat)](https://www.npmjs.com/package/antdv-pro-layout)
![License MIT](https://img.shields.io/badge/License-MIT-blue.svg)

[中文](./README.md) | [English](./README.en.md)

## 安装 Install

```bash
npm i antdv-next @antdv-next/icons antdv-pro-layout
```

## 功能特性 Features

| 组件 / 函数 | 说明 |
| --- | --- |
| ProLayout | 整体布局外壳，支持 side / top / mix 三种模式、响应式移动端抽屉、拆分菜单 |
| PageContainer | 页面内容区容器，集成 PageHeader + Tabs + 页脚 |
| PageHeader | 自定义页头，对齐 ant-design-vue v4 PageHeader 能力 |
| TabsView | 多标签页管理，配合 `useTabsView` Hook，支持 KeepAlive 缓存与刷新恢复 |
| GlobalSearch | 菜单搜索面板，`Ctrl/Cmd + K` 快捷键唤起，上下键导航 |
| getMenuData / clearMenuItem | 路由表转菜单数据 |
| useMediaScreen / usePrefersColorScheme | 响应式屏幕尺寸 / 系统主题偏好监听 |
| useIconFont | iconfont 图标渲染器（图片 / iconfont / VNode 自动识别） |
| useTabsView / createTabsView | 标签视图状态管理 Hook（单例 / 独立实例） |

完整函数与组件 API、渲染插槽及各组件用法见 [API.md](./API.md)。

更多示例：

- 演示测试 [playground](./playground/)
- 在线测试示例 [stackblitz](https://stackblitz.com/edit/vitejs-vite-9gcs3rs4)
- 项目示例 [mask_vue3_antd](https://gitee.com/TsMask/mask_vue3_antd)

## 源项目仓库分支 Branch

来自 [@ant-design-vue/pro-layout](https://github.com/vueComponent/pro-components)

- next : Vue3 + `ant-design-vue@3.x` (latest)
- v3.1 : Vue3 + `ant-design-vue@2.2.x` (release LTS)
- v2 : Vue2 + `ant-design-vue@1.7.x`

当前版本

- Vue3 + ant-design-vue@4.2.6 ([v4](https://gitee.com/TsMask/antdv-pro-layout/tree/ver4/))
- Vue3 + antdv-next ([v5，当前版本](https://gitee.com/TsMask/antdv-pro-layout/tree/main/))

## 持续维护 Continuous Maintenance

```bash
# 安装所需依赖
npm install

# 打包生成dist目录含d.ts文件
npm run build
```