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

59
.agents/skills/arco-design-vue/references/components/other/affix.md Normal file
View File

@@ -0,0 +1,59 @@
---
name: arco-vue-affix
description: "Arco Design Vue 固钉 Affix 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-affix>`、属性、事件、插槽、示例和实现细节。"
user-invocable: false
---
# 固钉 Affix
## 简介
基本用法，不设置固定位置时，当页面滚动元素不可见时，元素固定在页面最顶部。
## 基本用法
```vue
<template>
<a-affix>
<a-button type="primary">Affix Top</a-button>
</a-affix>
</template>
```
## API
### `<affix>` 属性
|参数名|描述|类型|默认值|
|---|---|---|:---:|
|offset-top|距离窗口顶部达到指定偏移量后触发|`number`|`0`|
|offset-bottom|距离窗口底部达到指定偏移量后触发|`number`|`-`|
|target|滚动容器，默认是 `window`|`string \| HTMLElement \| Window`|`-`|
|target-container|`target`的外层滚动元素，默认是 `window`。`Affix `将会监听该元素的滚动事件，并实时更新固钉的位置。主要是为了解决 `target` 属性指定为非 `window` 元素时，如果外层元素滚动，可能会导致固钉跑出容器问题|`string \| HTMLElement \| Window`|`-`|
### `<affix>` 事件
|事件名|描述|参数|
|---|---|---|
|change|固定状态发生改变时触发|fixed: `boolean`|
### `<affix>` 方法
|方法名|描述|参数|返回值|
|---|---|---|---|
|updatePosition|更新位置|-|-|
## 常用模式
- **顶部固定**：当页面滚动或浏览器窗口改变时，元素向上滚动到距顶部一定距离时固定。
- **底部固定**：当页面滚动或浏览器窗口改变时，元素向下滚动到距底部一定距离时固定。
- **固定状态改变回调**：当固定状态发生改变时，会触发事件。
- **滚动容器**：用 `target` 设置需要监听其滚动事件的元素，默认为 window。`target` 指定为非 window 容器时，可能会出现 `target`外层元素滚动，固钉元素跑出滚动容器的问题。这个时候可以通过传入`targetContainer`传入`target`外层的滚动元素。
## 最佳实践
- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
- 底层能力组件优先服务明确场景，避免为了样式效果直接暴露复杂配置。
- 涉及滚动、弹层和 DOM 容器时，先确认挂载容器和边界行为。

70
.agents/skills/arco-design-vue/references/components/other/anchor.md Normal file
View File

@@ -0,0 +1,70 @@
---
name: arco-vue-anchor
description: "Arco Design Vue 锚点 Anchor 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-anchor>`、属性、事件、插槽、示例和实现细节。"
user-invocable: false
---
# 锚点 Anchor
## 简介
锚点的基础用法
## 基本用法
```vue
<template>
<a-anchor>
<a-anchor-link href="#basic">Basic</a-anchor-link>
<a-anchor-link href="#line-less">LineLess Mode</a-anchor-link>
<a-anchor-link href="#affix">
Affix
<template #sublist>
<a-anchor-link href="#boundary">Scroll Boundary</a-anchor-link>
<a-anchor-link href="#hash">Hash mode</a-anchor-link>
</template>
</a-anchor-link>
</a-anchor>
</template>
```
## API
### `<anchor>` 属性
|参数名|描述|类型|默认值|
|---|---|---|:---:|
|boundary|滚动边界值，设置该值为数字后，将会在距离滚动容器 `boundary` 距离时停止滚动。|`'start' \| 'end' \| 'center' \| 'nearest' \| number`|`'start'`|
|line-less|是否显示左侧轴线|`boolean`|`false`|
|scroll-container|滚动容器|`string \| HTMLElement \| Window`|`-`|
|change-hash|是否改变hash。设置为 `false` 时点击锚点不会改变页面的 hash|`boolean`|`true`|
|smooth|是否使用平滑滚动|`boolean`|`true`|
### `<anchor>` 事件
|事件名|描述|参数|
|---|---|---|
|select|用户点击链接时触发|hash: ` string \| undefined `<br>preHash: `string`|
|change|链接发生改变时触发|hash: `string`|
### `<anchor-link>` 属性
|参数名|描述|类型|默认值|
|---|---|---|:---:|
|title|锚点链接的文本内容|`string`|`-`|
|href|锚点链接的地址|`string`|`-`|
## 常用模式
- **无轴线模式**：设置 `line-less` 时，可以使用无左侧轴线的锚点样式。
- **固钉位置**：使用 `affix` 组件可以让锚点固定在页面之内。
- **锚点滚动偏移量**：可以设置 `boundary` 来定制锚点滚动偏移量。
- **是否改变hash**：可以设置点击锚点而不改变浏览器历史。
## 最佳实践
- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
- 底层能力组件优先服务明确场景，避免为了样式效果直接暴露复杂配置。
- 涉及滚动、弹层和 DOM 容器时，先确认挂载容器和边界行为。

62
.agents/skills/arco-design-vue/references/components/other/back-top.md Normal file
View File

@@ -0,0 +1,62 @@
---
name: arco-vue-back-top
description: "Arco Design Vue 返回顶部 BackTop 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-back-top>`、属性、事件、插槽、示例和实现细节。"
user-invocable: false
---
# 返回顶部 BackTop
## 简介
当容器滚动到一定高度的时候，在右下角会出现一个返回顶部的按钮。
## 基本用法
```vue
<template>
<div class="wrapper">
<ul id="basic-demo">
<li v-for="(_, index) of Array(40)" :key="index">This is the content</li>
</ul>
<a-back-top target-container="#basic-demo" :style="{position:'absolute'}" />
</div>
</template>
<style scoped lang="less">
.wrapper {
position: relative;
ul {
height: 200px;
overflow-y: auto;
li {
line-height: 30px;
}
}
}
</style>
```
## API
### `<back-top>` 属性
|参数名|描述|类型|默认值|
|---|---|---|:---:|
|visible-height|显示回到顶部按钮的触发滚动高度|`number`|`200`|
|target-container|滚动事件的监听容器|`string \| HTMLElement`|`-`|
|easing|滚动动画的缓动方式，可选值参考 [BTween](https://github.com/PengJiyuan/b-tween)|`string`|`'quartOut'`|
|duration|滚动动画的持续时间|`number`|`200`|
## 常用模式
- **自定义按钮**：可以自定义返回按钮。
## 最佳实践
- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
- 底层能力组件优先服务明确场景，避免为了样式效果直接暴露复杂配置。
- 涉及滚动、弹层和 DOM 容器时，先确认挂载容器和边界行为。

73
.agents/skills/arco-design-vue/references/components/other/resize-box.md Normal file
View File

@@ -0,0 +1,73 @@
---
name: arco-vue-resize-box
description: "Arco Design Vue 伸缩框 ResizeBox 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-resize-box>`、属性、事件、插槽、示例和实现细节。"
user-invocable: false
---
# 伸缩框 ResizeBox
## 简介
`ResizeBox` 伸缩框组件的基础使用。通过设置 `directions`，可以指定四条边中的哪几条边可以进行伸缩。
## 基本用法
```vue
<template>
<div>
<a-resize-box
:directions="['right', 'bottom']"
:style="{ width: '500px', minWidth: '100px', maxWidth: '100%', height: '200px', textAlign: 'center' }"
>
<a-typography-paragraph>We are building the future of content discovery and creation.</a-typography-paragraph>
<a-divider />
<a-typography-paragraph>
ByteDance's content platforms enable people to enjoy content powered by AI technology. We
inform, entertain, and inspire people across language, culture and geography.
</a-typography-paragraph>
<a-divider>ByteDance</a-divider>
<a-typography-paragraph>Yiming Zhang is the founder and CEO of ByteDance.</a-typography-paragraph>
</a-resize-box>
</div>
</template>
```
## API
### `<resize-box>` 属性
|参数名|描述|类型|默认值|
|---|---|---|:---:|
|width **(v-model)**|宽度|`number`|`-`|
|height **(v-model)**|高度|`number`|`-`|
|component|伸缩框的 html 标签|`string`|`'div'`|
|directions|可以进行伸缩的边，有上、下、左、右可以使用|`('left' \| 'right' \| 'top' \| 'bottom')[]`|`['right']`|
### `<resize-box>` 事件
|事件名|描述|参数|
|---|---|---|
|moving-start|拖拽开始时触发|ev: `MouseEvent`|
|moving|拖拽时触发|size: `{ width: number; height: number; }`<br>ev: `MouseEvent`|
|moving-end|拖拽结束时触发|ev: `MouseEvent`|
### `<resize-box>` 插槽
|插槽名|描述|参数|
|---|:---:|---|
|resize-trigger|伸缩杆的内容|direction: `'left' \| 'right' \| 'top' \| 'bottom'`|
|resize-trigger-icon|伸缩杆的图标|direction: `'left' \| 'right' \| 'top' \| 'bottom'`|
## 常用模式
- **受控的高宽**：`ResizeBox` 的 `width` 和 `height` 都支持 `v-model`。
- **在布局中使用**：[Layout](resize-box.md) 组件中集成了 `ResizeBox` 组件，可以在 Layout 中使用可伸缩的侧边栏。
- **定制伸缩杆内容**：可通过插槽 `resize-trigger` 定制各个方向的伸缩杆的内容。
## 最佳实践
- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
- 底层能力组件优先服务明确场景，避免为了样式效果直接暴露复杂配置。
- 涉及滚动、弹层和 DOM 容器时，先确认挂载容器和边界行为。

57
.agents/skills/arco-design-vue/references/components/other/scrollbar.md Normal file
View File

@@ -0,0 +1,57 @@
---
name: arco-vue-scrollbar
description: "Arco Design Vue 滚动条 Scrollbar 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-scrollbar>`、属性、事件、插槽、示例和实现细节。"
user-invocable: false
---
# 滚动条 Scrollbar
## 简介
滚动条组件基本用法。scrollbar 的默认插槽需要唯一的子元素。
## 基本用法
```vue
<template>
<a-scrollbar style="height:200px;overflow: auto;">
<div style="height: 2000px;width: 2000px; background-color: var(--color-primary-light-4);">Content</div>
</a-scrollbar>
</template>
```
## API
### `<scrollbar>` 属性
|参数名|描述|类型|默认值|
|---|---|---|:---:|
|type|类型|`'track' \| 'embed'`|`'embed'`|
|outer-class|外层的类名|`string\|object\|array`|`-`|
|outer-style|外层的样式|`StyleValue`|`-`|
### `<scrollbar>` 事件
|事件名|描述|参数|
|---|---|---|
|scroll|滚动时触发|-|
### `<scrollbar>` 方法
|方法名|描述|参数|返回值|版本|
|---|---|---|---|:---|
|scrollTo|滚动|options: `number \| {left?: number;top?: number}`<br>y: `number`|-||
|scrollTop|纵向滚动|top: `number`|-|2.40.0|
|scrollLeft|横向滚动|left: `number`|-|2.40.0|
## 常用模式
- **滚动条类型**：设置 `type` 属性改变滚动条类型，`track` 类型会显示滚动条轨道。
## 最佳实践
- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
- 底层能力组件优先服务明确场景，避免为了样式效果直接暴露复杂配置。
- 涉及滚动、弹层和 DOM 容器时，先确认挂载容器和边界行为。

88
.agents/skills/arco-design-vue/references/components/other/split.md Normal file
View File

@@ -0,0 +1,88 @@
---
name: arco-vue-split
description: "Arco Design Vue 面板分割 Split 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-split>`、属性、事件、插槽、示例和实现细节。"
user-invocable: false
---
# 面板分割 Split
## 简介
将一个面板分割成两个可以调整宽度或高度的两部分。用`direction`控制分割方向。
## 基本用法
```vue
<template>
<div>
<a-split :style="{
height: '200px',
width: '100%',
minWidth: '500px',
border: '1px solid var(--color-border)'
}"
v-model:size="size"
min="80px"
>
<template #first>
<a-typography-paragraph>Left</a-typography-paragraph>
</template>
<template #second>
<a-typography-paragraph>Right</a-typography-paragraph>
</template>
</a-split>
</div>
</template>
<script>
export default {
data() {
return {
size: 0.5
}
}
}
</script>
```
## API
### `<split>` 属性
|参数名|描述|类型|默认值|
|---|---|---|:---:|
|component|分割框的 html 标签|`string`|`'div'`|
|direction|分割的方向|`'horizontal' \| 'vertical'`|`'horizontal'`|
|size **(v-model)**|分割的大小，可以是 0~1 代表百分比，或具体数值的像素，如 300px|`number\|string`|`-`|
|default-size|默认分割的大小，可以是 0~1 代表百分比，或具体数值的像素，如 300px|`number\|string`|`0.5`|
|min|最小阈值，可以是 0~1 代表百分比，或具体数值的像素，如 300px|`number\|string`|`-`|
|max|最大阈值，可以是 0~1 代表百分比，或具体数值的像素，如 300px|`number\|string`|`-`|
|disabled|是否禁用|`boolean`|`false`|
### `<split>` 事件
|事件名|描述|参数|
|---|---|---|
|move-start|开始拖拽之前触发|-|
|moving|拖拽时触发|-|
|move-end|拖拽结束之后触发|-|
### `<split>` 插槽
|插槽名|描述|参数|
|---|:---:|---|
|first|第一个面板的内容|-|
|resize-trigger|伸缩杆的内容|-|
|resize-trigger-icon|伸缩杆的图标|-|
|second|第二个面板的内容|-|
## 常用模式
- **面板分割嵌套**：面板分割可以嵌套使用。
## 最佳实践
- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
- 底层能力组件优先服务明确场景，避免为了样式效果直接暴露复杂配置。
- 涉及滚动、弹层和 DOM 容器时，先确认挂载容器和边界行为。

114
.agents/skills/arco-design-vue/references/components/other/trigger.md Normal file
View File

@@ -0,0 +1,114 @@
---
name: arco-vue-trigger
description: "Arco Design Vue 触发器 Trigger 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-trigger>`、属性、事件、插槽、示例和实现细节。"
user-invocable: false
---
# 触发器 Trigger
## 简介
这个例子展示了触发器的最基础的使用。触发器默认是没有弹出框的样式的。以下示例均为官网添加的样式。
## 基本用法
```vue
<template>
<a-space>
<a-trigger position="top" auto-fit-position :unmount-on-close="false">
<span>Hover Me</span>
<template #content>
<div class="demo-basic">
<a-empty />
</div>
</template>
</a-trigger>
<a-trigger trigger="click" :unmount-on-close="false">
<a-button>Click Me</a-button>
<template #content>
<div class="demo-basic">
<a-empty />
</div>
</template>
</a-trigger>
<a-trigger trigger="focus">
<a-input placeholder="Focus on me" />
<template #content>
<div class="demo-basic">
<a-empty />
</div>
</template>
</a-trigger>
</a-space>
</template>
<style scoped>
.demo-basic {
padding: 10px;
width: 200px;
background-color: var(--color-bg-popup);
border-radius: 4px;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
}
</style>
```
## API
### `<trigger>` 属性
|参数名|描述|类型|默认值|版本|
|---|---|---|:---:|:---|
|popup-visible **(v-model)**|弹出框是否可见|`boolean`|`-`||
|default-popup-visible|弹出框默认是否可见（非受控模式）|`boolean`|`false`||
|trigger|触发方式|`'hover' \| 'click' \| 'focus' \| 'contextMenu'`|`'hover'`||
|position|弹出位置|`'top' \| 'tl' \| 'tr' \| 'bottom' \| 'bl' \| 'br' \| 'left' \| 'lt' \| 'lb' \| 'right' \| 'rt' \| 'rb'`|`'bottom'`||
|disabled|触发器是否禁用|`boolean`|`false`||
|popup-offset|弹出框的偏移量（弹出框距离触发器的偏移距离）|`number`|`0`||
|popup-translate|弹出框的移动距离|`TriggerPopupTranslate`|`-`||
|show-arrow|弹出框是否显示箭头|`boolean`|`false`||
|align-point|弹出框是否跟随鼠标|`boolean`|`false`||
|popup-hover-stay|是否在移出触发器，并移入弹出框时保持弹出框显示|`boolean`|`true`||
|blur-to-close|是否在触发器失去焦点时关闭弹出框|`boolean`|`true`||
|click-to-close|是否在点击触发器时关闭弹出框|`boolean`|`true`||
> 仅列出常用项，低频属性按需查阅官方 API。
### `<trigger>` 事件
|事件名|描述|参数|版本|
|---|---|---|:---|
|popup-visible-change|弹出框显示状态改变时触发|visible: `boolean`||
|show|弹出框显示后（动画结束）触发|-|2.18.0|
|hide|弹出框隐藏后（动画结束）触发|-|2.18.0|
### `<trigger>` 插槽
|插槽名|描述|参数|
|---|:---:|---|
|content|弹出框内容|-|
### 类型定义
```ts
type TriggerPopupTranslate =
| [number, number]
| { [key in TriggerPosition]?: [number, number] };
```
## 常用模式
- **多层嵌套**：弹出层可以嵌套在另一个弹出层内。
- **多个触发方式**：通过`trigger`传入数组，可以设置多个触发方式。
- **跟随鼠标显示弹出框**：设置`align-point`属性，可以使弹出层出现在鼠标位置。
- **滚动容器**：通过设置 `update-at-scroll` 监听容器的滚动。
- **显示箭头元素**：通过`show-arrow`属性，可以展示默认的箭头元素。也可以通过`arrow-class`或`arrow-style`进行定制。
- **弹窗偏移量**：通过`popup-translate`属性，可以设置弹窗在原本位置的基础上进行额外的位置调整。
## 最佳实践
- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
- 底层能力组件优先服务明确场景，避免为了样式效果直接暴露复杂配置。
- 涉及滚动、弹层和 DOM 容器时，先确认挂载容器和边界行为。

68
.agents/skills/arco-design-vue/references/components/other/watermark.md Normal file
View File

@@ -0,0 +1,68 @@
---
name: arco-vue-watermark
description: "Arco Design Vue 水印 Watermark 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-watermark>`、属性、事件、插槽、示例和实现细节。"
user-invocable: false
---
# 水印 Watermark
## 简介
水印的基本用法。
## 基本用法
```vue
<template>
<a-watermark content="arco.design">
<div style="width: 100%; height: 350px;" />
</a-watermark>
</template>
```
## API
### `<watermark>` 属性
|参数名|描述|类型|默认值|
|---|---|---|:---:|
|content|水印文字内容|`string \| string[]`|`-`|
|image|图片源，建议使用 2 倍或 3 倍图|`string`|`-`|
|width|水印宽度（默认为内容宽度）|`number`|`-`|
|height|水印高度（默认为内容高度）|`number`|`-`|
|gap|水印间的间距|`[number, number]`|`() => [90, 90]`|
|offset|距离容器左上角的偏移量，默认为水印间距的一半|`[number, number]`|`[gap[0]/2, gap[1]/2]`|
|rotate|旋转角度|`number`|`-22`|
|font|水印字体样式，具体参数配置看 [WatermarkFont](#WatermarkFont)|`WatermarkFont`|`-`|
|z-index|水印层级|`number`|`6`|
|alpha|透明度|`number`|`1`|
|anti-tamper|水印防篡改|`boolean`|`true`|
|grayscale|灰阶水印|`boolean`|`false`|
> 仅列出常用项，低频属性按需查阅官方 API。
### WatermarkFont
|参数名|描述|类型|默认值|
|---|---|---|:---:|
|color|字体颜色|`string`|`rgba(0, 0, 0, 0.15)`|
|fontSize|字体大小|`number`|`16`|
|fontFamily|字体类型|`string`|`sans-serif`|
|fontStyle|字体样式|`'none' \| 'normal' \| 'italic' \| 'oblique'`|`normal`|
|textAlign|字体对齐方式|`'start' \| 'end' \| 'left' \| 'right' \| 'center'`|`center`|
|fontWeight|字体粗细|`'normal' \| 'bold' \| 'bolder' \| 'lighter' \| number`|`normal`|
## 常用模式
- **基本使用**：水印的基本用法。
- **多行文本**：通过 content 设置字符串数组可指定多行文字水印内容。
- **图片水印**：通过 image 设置图片水印。建议使用 2 倍或 3 倍图（支持Base64）。
- **自定义**：通过自定义参数以实现更多的水印效果。
## 最佳实践
- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
- 底层能力组件优先服务明确场景，避免为了样式效果直接暴露复杂配置。
- 涉及滚动、弹层和 DOM 容器时，先确认挂载容器和边界行为。