vue-layout-mcp/README.md

A MCP server for generating Vue dashboard layout components

# vue-layout-mcp

一个用于生成 Vue 常用布局组件的 MCP (Model Context Protocol) 服务器。

## 功能特性

提供 10 种前端常用布局组件生成工具，所有布局均为纯净空白架子，开箱即用：

- **两栏布局** - 左右两栏响应式布局
- **三栏布局** - 左中右三栏响应式布局
- **九宫格布局** - 灵活的九宫格布局
- **顶部+内容区布局** - 带顶部导航栏的布局
- **侧边栏布局** - 可折叠的侧边栏+内容区布局
- **圣杯布局** - 经典的 Header + Sidebar + Content + Footer 布局
- **卡片网格布局** - 响应式卡片网格布局
- **Tab 切换布局** - 支持四个方向的标签页切换布局
- **固定侧边栏布局** - 固定宽度侧边栏+自适应内容区布局

## 安装


## 使用方法

### 作为 MCP 服务器运行

```bash
vue-layout-mcp
```

### 在 ai IDE中配置

在配置文件中添加：

```json
{
  "mcpServers": {
    "vue-layout": {
      "command": "npx",
      "args": ["vue-layout-mcp"]
    }
  }
}
```

## 可用工具

### generate-layout-two-columns

生成两栏布局组件，适用于左右分栏的页面结构。

**参数：**
- `leftWidth` (number): 左侧栏宽度百分比，默认 50
- `rightWidth` (number): 右侧栏宽度百分比，默认 50

### generate-layout-three-columns

生成三栏布局组件，适用于左中右分栏的页面结构。

**参数：**
- `leftWidth` (number): 左侧栏宽度百分比，默认 30
- `centerWidth` (number): 中间栏宽度百分比，默认 40
- `rightWidth` (number): 右侧栏宽度百分比，默认 30

### generate-layout-grid-nine

生成九宫格布局组件，适用于仪表板和数据展示页面。

**参数：** 无

### generate-layout-top-content

生成顶部导航+内容区布局组件，适用于带导航栏的单页应用。

**参数：**
- `topHeight` (number): 顶部区域高度（像素），默认 80

### generate-layout-sidebar

生成侧边栏布局组件，支持折叠功能，适用于后台管理系统。

**参数：**
- `sidebarWidth` (number): 侧边栏宽度（像素），默认 240
- `collapsible` (boolean): 是否可折叠，默认 true

### generate-layout-holy-grail

生成圣杯布局组件（Header + Sidebar + Content + Footer），适用于完整的管理后台。

**参数：**
- `headerHeight` (number): 顶部高度（像素），默认 64
- `footerHeight` (number): 底部高度（像素），默认 50
- `sidebarWidth` (number): 侧边栏宽度（像素），默认 200

### generate-layout-card-grid

生成响应式卡片网格布局组件，支持自适应列数。

**参数：**
- `columns` (number): 列数，默认 4
- `gap` (number): 卡片间距（像素），默认 20

### generate-layout-tabs

生成 Tab 标签页切换布局组件，支持四个方向的标签位置。

**参数：**
- `tabPosition` (string): Tab 位置，可选值：'top', 'bottom', 'left', 'right'，默认 'top'

### generate-layout-fixed-sidebar

生成固定侧边栏宽度的双栏布局，主内容区自适应。

**参数：**
- `sidebarWidth` (number): 侧边栏固定宽度（像素），默认 300
- `position` (string): 侧边栏位置，可选值：'left', 'right'，默认 'left'

## 开发

```bash
# 安装依赖
npm install

# 运行
npm start
```

## 许可证

MIT

## 作者

Your Name

## 贡献

欢迎提交 Issue 和 Pull Request！