heqiapp/platforms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(agents): add design references

Browse Source
This commit is contained in:
yanweidong
2026-08-10 23:34:28 +08:00
parent a2383fc8a1
commit 72a83f5fcd
86 changed files with 8889 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
.agents/skills/arco-design-vue/references/components/layout/divider.md Normal file
View File

@@ -0,0 +1,131 @@
---
name: arco-vue-divider
description: "Arco Design Vue 分割线 Divider 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-divider>`、属性、事件、插槽、示例和实现细节。"
user-invocable: false
---
# 分割线 Divider
## 简介
对不同章节的文本段落进行分割，默认为水平分割线，可在中间加入文字。
## 基本用法
```vue
<template>
<div class="divider-demo">
<p>A design is a plan or specification for the construction of an object.</p>
<a-divider />
<p>A design is a plan or specification for the construction of an object.</p>
<a-divider dashed />
<p>A design is a plan or specification for the construction of an object.</p>
<a-divider :size="2" style="border-bottom-style: dotted" />
<p>A design is a plan or specification for the construction of an object.</p>
</div>
<div class="divider-demo" style="marginTop: 48px">
<div class="flex-box">
<span class="avatar"><IconImage /></span>
<div class="content">
<a-typography-title :heading="6">Image</a-typography-title>
May 4, 2010
</div>
</div>
<a-divider class="half-divider" />
<div class="flex-box">
<span class="avatar"><IconUser /></span>
<div class="content">
<a-typography-title :heading="6">Avatar</a-typography-title>
May 4, 2010
</div>
</div>
<a-divider class="half-divider" />
<div class="flex-box">
<span class="avatar"><IconPen /></span>
<div class="content">
<a-typography-title :heading="6">Icon</a-typography-title>
May 4, 2010
</div>
</div>
</div>
</template>
<script>
import {
IconImage,
IconUser,
IconPen,
} from '@arco-design/web-vue/es/icon';
export default {
components: {
IconImage,
IconUser,
IconPen,
},
};
</script>
<style scoped>
.divider-demo {
box-sizing: border-box;
width: 560px;
padding: 24px;
border: 30px solid rgb(var(--gray-2));
}
.half-divider {
left: 55px;
width: calc(100% - 55px);
min-width: auto;
margin: 16px 0;
}
.flex-box {
display: flex;
align-items: center;
justify-content: center;
}
.flex-box .avatar {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-right: 16px;
color: var(--color-text-2);
font-size: 16px;
background-color: var(--color-fill-3);
border-radius: 50%;
}
.flex-box .content {
flex: 1;
color: var(--color-text-2);
font-size: 12px;
line-height: 20px;
}
</style>
```
## API
### `<divider>` 属性
|参数名|描述|类型|默认值|版本|
|---|---|---|:---:|:---|
|direction|分割线的方向，是水平还是竖直|`'horizontal' \| 'vertical'`|`'horizontal'`||
|orientation|分割线文字的位置|`'left' \| 'center' \| 'right'`|`'center'`||
|type|分割线样式类型|`'solid' \| 'dashed' \| 'dotted' \| 'double'`|`-`|2.35.0|
|size|分割线宽度/高度|`number`|`-`|2.35.0|
|margin|分割线上下 margin (垂直方向时为左右 margin)|`number \| string`|`-`|2.35.0|
## 常用模式
- **带有文字的分割线**：通过 `orientation` 为分割线添加描述文字。
- **竖直分割线**：指定 `direction` 为 `vertical` 即可使用竖直分割线。竖直分割线不能带文字。
## 最佳实践
- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
- 布局组件只处理结构和间距，不在其中承载业务状态。
- 响应式页面优先组合 `a-grid`、`a-row`、`a-col` 和 `a-space`。

225
.agents/skills/arco-design-vue/references/components/layout/grid.md Normal file
View File

@@ -0,0 +1,225 @@
---
name: arco-vue-grid
description: "Arco Design Vue 栅格 Grid 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-grid>`、属性、事件、插槽、示例和实现细节。"
user-invocable: false
---
# 栅格 Grid
## 简介
展示了最基本的 24 等分应用。
## 基本用法
```vue
<template>
<div class="grid-demo-background">
<a-space direction="vertical" :size="16" style="display: block;">
<a-row class="grid-demo">
<a-col :span="24">
<div>24 - 100%</div>
</a-col>
</a-row>
<a-row class="grid-demo">
<a-col :span="12">
<div>12 - 50%</div>
</a-col>
<a-col :span="12">
<div>12 - 50%</div>
</a-col>
</a-row>
<a-row class="grid-demo">
<a-col :span="8">
<div>8 - 33.33%</div>
</a-col>
<a-col :span="8">
<div>8 - 33.33%</div>
</a-col>
<a-col :span="8">
<div>8 - 33.33%</div>
</a-col>
</a-row>
<a-row class="grid-demo">
<a-col :span="6">
<div>6 - 25%</div>
</a-col>
<a-col :span="6">
<div>6 - 25%</div>
</a-col>
<a-col :span="6">
<div>6 - 25%</div>
</a-col>
<a-col :span="6">
<div>6 - 25%</div>
</a-col>
</a-row>
<a-row class="grid-demo">
<a-col :span="4">
<div>4 - 16.66%</div>
</a-col>
<a-col :span="4">
<div>4 - 16.66%</div>
</a-col>
<a-col :span="4">
<div>4 - 16.66%</div>
</a-col>
<a-col :span="4">
<div>4 - 16.66%</div>
</a-col>
<a-col :span="4">
<div>4 - 16.66%</div>
</a-col>
<a-col :span="4">
<div>4 - 16.66%</div>
</a-col>
</a-row>
</a-space>
</div>
</template>
<style scoped>
.grid-demo-background {
background-image: linear-gradient(
90deg,
var(--color-fill-2) 4.16666667%,
transparent 4.16666667%,
transparent 8.33333333%,
var(--color-fill-2) 8.33333333%,
var(--color-fill-2) 12.5%,
transparent 12.5%,
transparent 16.66666667%,
var(--color-fill-2) 16.66666667%,
var(--color-fill-2) 20.83333333%,
transparent 20.83333333%,
transparent 25%,
var(--color-fill-2) 25%,
var(--color-fill-2) 29.16666667%,
transparent 29.16666667%,
transparent 33.33333333%,
var(--color-fill-2) 33.33333333%,
var(--color-fill-2) 37.5%,
transparent 37.5%,
transparent 41.66666667%,
var(--color-fill-2) 41.66666667%,
var(--color-fill-2) 45.83333333%,
transparent 45.83333333%,
transparent 50%,
var(--color-fill-2) 50%,
var(--color-fill-2) 54.16666667%,
transparent 54.16666667%,
transparent 58.33333333%,
var(--color-fill-2) 58.33333333%,
var(--color-fill-2) 62.5%,
transparent 62.5%,
transparent 66.66666667%,
var(--color-fill-2) 66.66666667%,
var(--color-fill-2) 70.83333333%,
transparent 70.83333333%,
transparent 75%,
var(--color-fill-2) 75%,
var(--color-fill-2) 79.16666667%,
transparent 79.16666667%,
transparent 83.33333333%,
var(--color-fill-2) 83.33333333%,
var(--color-fill-2) 87.5%,
transparent 87.5%,
transparent 91.66666667%,
var(--color-fill-2) 91.66666667%,
var(--color-fill-2) 95.83333333%,
transparent 95.83333333%
);
}
.grid-demo .arco-col {
height: 48px;
line-height: 48px;
color: var(--color-white);
text-align: center;
}
.grid-demo .arco-col:nth-child(2n) {
background-color: rgba(var(--arcoblue-6), 0.9);
}
.grid-demo .arco-col:nth-child(2n + 1) {
background-color: var(--color-primary-light-4);
}
</style>
```
## API
### `<row>` 属性
|参数名|描述|类型|默认值|版本|
|---|---|---|:---:|:---|
|gutter|栅格间隔，单位是`px` 栅格间隔。可传入响应式对象写法 { xs: 4, sm: 6, md: 12}，传入数组 [ 水平间距， 垂直间距 ] 来设置两个方向。|`number\| ResponsiveValue\| [number \| ResponsiveValue, number \| ResponsiveValue]`|`0`||
|justify|水平对齐方式 (`justify-content`)|`'start' \| 'center' \| 'end' \| 'space-around' \| 'space-between'`|`'start'`||
|align|竖直对齐方式 ( `align-items` )|`'start' \| 'center' \| 'end' \| 'stretch'`|`'start'`||
|div|开启这个选项`Row`和`Col`都会被当作div而不会附带任何Grid相关的类和样式|`boolean`|`false`||
|wrap|`Col` 是否支持换行|`boolean`|`true`|2.13.0|
### `<col>` 属性
|参数名|描述|类型|默认值|版本|
|---|---|---|:---:|:---|
|span|栅格占位格数|`number`|`24`||
|offset|栅格左侧的间隔格数，间隔内不可以有栅格|`number`|`-`||
|order|对元素进行排序|`number`|`-`||
|xs|< 576px 响应式栅格|`number \| { [key: string]: any }`|`-`||
|sm|>= 576px 响应式栅格|`number \| { [key: string]: any }`|`-`||
|md|>= 768px 响应式栅格|`number \| { [key: string]: any }`|`-`||
|lg|>= 992px 响应式栅格|`number \| { [key: string]: any }`|`-`||
|xl|>= 1200px 响应式栅格|`number \| { [key: string]: any }`|`-`||
|xxl|>= 1600px 响应式栅格|`number \| { [key: string]: any }`|`-`||
|flex|设置 flex 布局属性|`number \| string \| 'initial' \| 'auto' \| 'none'`|`-`|2.10.0|
### `<grid>` 属性 (2.15.0)
响应式配置从 `2.18.0` 开始支持，具体配置 [ResponsiveValue](#responsivevalue)
|参数名|描述|类型|默认值|
|---|---|---|:---:|
|cols|每一行展示的列数|`number \| ResponsiveValue`|`24`|
|row-gap|行与行之间的间距|`number \| ResponsiveValue`|`0`|
|col-gap|列与列之间的间距|`number \| ResponsiveValue`|`0`|
|collapsed|是否折叠|`boolean`|`false`|
|collapsed-rows|折叠时显示的行数|`number`|`1`|
### `<grid-item>` 属性 (2.15.0)
响应式配置从 `2.18.0` 开始支持，具体配置 [ResponsiveValue](#responsivevalue)
|参数名|描述|类型|默认值|
|---|---|---|:---:|
|span|跨越的格数|`number \| ResponsiveValue`|`1`|
|offset|左侧的间隔格数|`number \| ResponsiveValue`|`0`|
|suffix|是否是后缀元素|`boolean`|`false`|
### ResponsiveValue
|参数名|描述|类型|默认值|
|---|---|---|:---:|
|xxl|>= 1600px 响应式配置|`number`|`-`|
|xl|>= 1200px 响应式配置|`number`|`-`|
|lg|>= 992px 响应式配置|`number`|`-`|
|md|>= 768px 响应式配置|`number`|`-`|
|sm|>= 576px 响应式配置|`number`|`-`|
|xs|< 576px 响应式配置|`number`|`-`|
## 常用模式
- **栅格偏移**：指定 `offset` 可以对栅格进行平移操作。
- **区块间隔**：通过在 `Row` 上指定 `gutter` 可以增加栅格的区域间隔。
- **水平布局**：通过 `justify` 来进行水平布局。
- **垂直布局**：通过 `align` 来进行垂直布局。
- **排序**：通过 `order` 来进行元素排序。
- **响应式布局**：预置六种响应尺寸, 分别为 `xs`, `sm`, `md`, `lg`, `xl`, `xxl`。
- **其他属性的响应式**：`span`, `offset`, `order` 属性可以内嵌到 `xs`, `sm`, `md`, `lg`, `xl`, `xxl` 对象中使用。比如 `:xs="8"` 相当于 `:xs="{ span: 8 }"`。
- **Flex 用法**：通过设置 `Col` 组件的 `flex` 属性，可以任意配置 flex 布局。
## 最佳实践
- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
- 布局组件只处理结构和间距，不在其中承载业务状态。
- 响应式页面优先组合 `a-grid`、`a-row`、`a-col` 和 `a-space`。

152
.agents/skills/arco-design-vue/references/components/layout/layout.md Normal file
View File

@@ -0,0 +1,152 @@
---
name: arco-vue-layout
description: "Arco Design Vue 布局 Layout 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-layout>`、属性、事件、插槽、示例和实现细节。"
user-invocable: false
---
# 布局 Layout
## 简介
典型的页面布局。
## 基本用法
```vue
<template>
<div class="layout-demo">
<a-layout style="height: 400px;">
<a-layout-header>Header</a-layout-header>
<a-layout-content>Content</a-layout-content>
<a-layout-footer>Footer</a-layout-footer>
</a-layout>
<br />
<a-layout style="height: 400px;">
<a-layout-header>Header</a-layout-header>
<a-layout>
<a-layout-sider theme="dark">Sider</a-layout-sider>
<a-layout-content>Content</a-layout-content>
</a-layout>
<a-layout-footer>Footer</a-layout-footer>
</a-layout>
<br />
<a-layout style="height: 400px;">
<a-layout-header>Header</a-layout-header>
<a-layout>
<a-layout-content>Content</a-layout-content>
<a-layout-sider>Sider</a-layout-sider>
</a-layout>
<a-layout-footer>Footer</a-layout-footer>
</a-layout>
<br />
<a-layout style="height: 400px;">
<a-layout-header>Header</a-layout-header>
<a-layout>
<a-layout-sider style="width: 64px;">Sider</a-layout-sider>
<a-layout-sider style="width: 206px; margin-left: 1px;">Sider</a-layout-sider>
<a-layout-content>Content</a-layout-content>
</a-layout>
<a-layout-footer>Footer</a-layout-footer>
</a-layout>
</div>
</template>
<style scoped>
.layout-demo :deep(.arco-layout-header),
.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-sider-children),
.layout-demo :deep(.arco-layout-content) {
display: flex;
flex-direction: column;
justify-content: center;
color: var(--color-white);
font-size: 16px;
font-stretch: condensed;
text-align: center;
}
.layout-demo :deep(.arco-layout-header),
.layout-demo :deep(.arco-layout-footer) {
height: 64px;
background-color: var(--color-primary-light-4);
}
.layout-demo :deep(.arco-layout-sider) {
width: 206px;
background-color: var(--color-primary-light-3);
}
.layout-demo :deep(.arco-layout-content) {
background-color: rgb(var(--arcoblue-6));
}
</style>
```
## API
### `<layout>` 属性
|参数名|描述|类型|默认值|
|---|---|---|:---:|
|has-sider|表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动|`boolean`|`false`|
### `<layout-header>` 插槽
|插槽名|描述|参数|
|---|:---:|---|
|default|内容|-|
### `<layout-content>` 插槽
|插槽名|描述|参数|
|---|:---:|---|
|default|内容|-|
### `<layout-footer>` 插槽
|插槽名|描述|参数|
|---|:---:|---|
|default|内容|-|
### `<layout-sider>` 属性
|参数名|描述|类型|默认值|
|---|---|---|:---:|
|theme|主题颜色|`'dark' \| 'light'`|`'light'`|
|collapsed|当前收起状态|`boolean`|`-`|
|default-collapsed|默认的收起状态|`boolean`|`false`|
|collapsible|是否可收起|`boolean`|`false`|
|width|宽度|`number`|`200`|
|collapsed-width|收缩宽度|`number`|`48`|
|reverse-arrow|翻转折叠提示箭头的方向，当 Sider 在右边时可以使用|`boolean`|`false`|
|breakpoint|触发响应式布局的断点, 详见[响应式栅格](grid.md)|`'xxl' \| 'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'`|`-`|
|resize-directions|可以用 ResizeBox 替换原生的 `aside` 标签，这个参数即 ResizeBox的 `directions` 参数。详情请看 [ResizeBox](../other/resize-box.md)。|`Array<'left' \| 'right' \| 'top' \| 'bottom'>`|`-`|
|hide-trigger|隐藏底部折叠触发器|`boolean`|`false`|
### `<layout-sider>` 事件
|事件名|描述|参数|
|---|---|---|
|collapse|展开-收起时的事件，有点击 trigger 以及响应式反馈两种方式可以触发|collapsed: `boolean`<br>type: `'clickTrigger'\|'responsive'`|
|breakpoint|触发响应式布局断点时的事件|collapsed: `boolean`|
### `<layout-sider>` 插槽
|插槽名|描述|参数|
|---|:---:|---|
|trigger|自定义底部折叠触发器|collapsed: `boolean`|
## 常用模式
- **自定义按钮 Icon**：通过设置 `Menu.Sider` 的 `trigger` 属性，实现自定义收起按钮的图标。
- **自定义收起按钮**：设置`Menu.Sider` 的`hide-trigger`属性为`true`后，`Sider` 内置的缩起按钮不会显示。此时可自定义收起按钮。
- **响应式侧边栏**：左侧 Slider 可以结合 Menu 设置为展开/收起状态, 设置`breakpoint`可触发响应式收缩。
- **可伸缩侧边栏**：可以用鼠标进行拖拽放大缩小的侧边栏，需要用到的参数：`resizeDirections`。
## 最佳实践
- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
- 布局组件只处理结构和间距，不在其中承载业务状态。
- 响应式页面优先组合 `a-grid`、`a-row`、`a-col` 和 `a-space`。

64
.agents/skills/arco-design-vue/references/components/layout/space.md Normal file
View File

@@ -0,0 +1,64 @@
---
name: arco-vue-space
description: "Arco Design Vue 间距 Space 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-space>`、属性、事件、插槽、示例和实现细节。"
user-invocable: false
---
# 间距 Space
## 简介
间距组件的基本用法。
## 基本用法
```vue
<template>
<a-space>
<a-typography-text>Space:</a-typography-text>
<a-tag v-if="false" color='arcoblue'>Tag</a-tag>
<a-button type="primary">Item1</a-button>
<a-button type="primary">Item2</a-button>
<a-switch defaultChecked />
</a-space>
</template>
```
## API
### `<space>` 属性
|参数名|描述|类型|默认值|版本|
|---|---|---|:---:|:---|
|align|对齐方式|`'start' \| 'end' \| 'center' \| 'baseline'`|`-`||
|direction|间距方向|`'vertical' \| 'horizontal'`|`'horizontal'`||
|size|间距大小，支持分别制定横向和竖向的间距|`number \| 'mini' \| 'small' \| 'medium' \| 'large' \| [SpaceSize, SpaceSize]`|`'small'`||
|wrap|环绕类型的间距，用于折行的场景。|`boolean`|`false`||
|fill|充满整行|`boolean`|`false`|2.11.0|
### `<space>` 插槽
|插槽名|描述|参数|
|---|:---:|---|
|split|设置分隔符|-|
### 类型定义
```ts
type SpaceSize = number | 'mini' | 'small' | 'medium' | 'large';
```
## 常用模式
- **垂直间距**：可以设置垂直方向排列的间距。
- **尺寸**：内置 4 个尺寸，`mini - 4px` `small - 8px (默认)` `medium - 16px` `large - 24px`，也支持传数字来自定义尺寸。
- **对齐**：内置 4 种对齐方式，分别为 `start` `center` `end` `baseline`，在水平模式下默认为 `center`。
- **环绕间距**：环绕类型的间距，四周都有间距，一般用于换行的场景。
- **分隔符**：为相邻子元素设置分隔符。
## 最佳实践
- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
- 布局组件只处理结构和间距，不在其中承载业务状态。
- 响应式页面优先组合 `a-grid`、`a-row`、`a-col` 和 `a-space`。