docs(agents): add design references

.agents/skills/arco-design-vue/references/components/data-display/avatar.md

@@ -0,0 +1,96 @@
+---
+name: arco-vue-avatar
+description: "Arco Design Vue 头像 Avatar 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-avatar>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 头像 Avatar
+
+## 简介
+
+头像的基础使用。如果头像是文字的话，会自动调节字体大小，来适应头像框。
+
+## 基本用法
+
+```vue
+<template>
+  <a-space size="large">
+    <a-avatar>A</a-avatar>
+    <a-avatar :style="{ backgroundColor: '#3370ff' }">
+      <IconUser />
+    </a-avatar>
+    <a-avatar :style="{ backgroundColor: '#14a9f8' }">Arco</a-avatar>
+    <a-avatar :style="{ backgroundColor: '#00d0b6' }">Design</a-avatar>
+    <a-avatar>
+      <img
+        alt="avatar"
+        src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
+      />
+    </a-avatar>
+  </a-space>
+</template>
+
+<script>
+import { IconUser } from '@arco-design/web-vue/es/icon';
+
+export default {
+  components: { IconUser },
+};
+</script>
+```
+
+## API
+
+### `<avatar>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|shape|头像的形状，有圆形(circle)和正方形(square)两种|`'circle' \| 'square'`|`'circle'`||
+|image-url|自定义头像图片地址，如果传入该属性，会默认渲染img标签|`string`|`-`|2.40.0|
+|size|头像的尺寸大小，单位是 `px`。未填写时使用样式中的大小 `40px`|`number`|`-`||
+|auto-fix-font-size|是否自动根据头像尺寸调整字体大小|`boolean`|`true`||
+|trigger-type|可点击的头像交互类型|`'mask' \| 'button'`|`'button'`||
+|trigger-icon-style|交互图标的样式|`CSSProperties`|`-`||
+|object-fit|图片在容器内的的适应类型|`ObjectFit`|`-`|2.52.0|
+
+### `<avatar>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|click|点击回调|ev: `MouseEvent`|
+|error|图片加载错误|-|
+|load|图片加载成功|-|
+
+### `<avatar>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|trigger-icon|可点击的头像交互图标|-|
+
+### `<avatar-group>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|shape|头像的形状，有圆形(circle)和正方形(square)两种|`'circle' \| 'square'`|`'circle'`||
+|size|头像的尺寸大小，单位是 `px`|`number`|`-`||
+|auto-fix-font-size|是否自动根据头像尺寸调整字体大小|`boolean`|`true`||
+|max-count|头像组最多显示的头像数量，多余头像将以 `+x` 的形式展示。|`number`|`0`||
+|z-index-ascend|头像组内的头像 `z-index` 递增，默认是递减。|`boolean`|`false`||
+|max-style|多余头像样式。|`CSSProperties`|`-`|2.7.0|
+|max-popover-trigger-props|多余头像气泡的 `TriggerProps`|`TriggerProps`|`-`|2.7.0|
+
+## 常用模式
+
+- **大小和形状**：通过设置 `size` 字段，可以调节头像的大小，默认大小为 `40px`。设置 `shape` 字段，可以设置头像是圆形 (circle) 还是正方形 (square)。
+- **头像组**：使用 `Avatar.Group` 可以使用头像组功能，可通过 `size` 指定头像的大小。
+- **交互按钮**：可以通过 `trigger-icon` `trigger-type` 来定制交互按钮，类型有 `mask (遮罩)` 和 `button (按钮)` 两种。
+- **自动调整字体大小**：如果头像是文字的话，会自动调节字体大小，来适应头像框。
+- **自定义头像路径**：自定义头像图片路径
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
+- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。

.agents/skills/arco-design-vue/references/components/data-display/badge.md

@@ -0,0 +1,74 @@
+---
+name: arco-vue-badge
+description: "Arco Design Vue 徽标数 Badge 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-badge>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 徽标数 Badge
+
+## 简介
+
+基本用法。只需指定 `count`或者 `content slot`，即可显示徽标。
+
+## 基本用法
+
+```vue
+<template>
+  <a-space :size="40">
+    <a-badge :count="9">
+      <a-avatar shape="square" />
+    </a-badge>
+    <a-badge :count="9" dot :dotStyle="{ width: '10px', height: '10px' }">
+      <a-avatar shape="square" />
+    </a-badge>
+    <a-badge :dotStyle="{ height: '16px', width: '16px', fontSize: '14px' }">
+      <template #content>
+        <IconClockCircle
+          :style="{ verticalAlign: 'middle', color: 'var(--color-text-2)' }"
+        />
+      </template>
+      <a-avatar shape="square" />
+    </a-badge>
+  </a-space>
+</template>
+
+<script>
+import { IconClockCircle } from '@arco-design/web-vue/es/icon';
+
+export default {
+  components: { IconClockCircle },
+};
+</script>
+```
+
+## API
+
+### `<badge>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|text|自定义提示内容|`string`|`-`|
+|dot|显示为小红点|`boolean`|`false`|
+|dot-style|徽标的样式|`object`|`-`|
+|max-count|徽标最大显示数值，如果count超过这个数值会显示为maxCount|`number`|`99`|
+|offset|设置徽标位置的偏移|`number[]`|`[]`|
+|color|内置的一些颜色|`ColorType \| string`|`-`|
+|status|徽标的状态类型|`'normal' \| 'processing' \| 'success' \| 'warning' \| 'danger'`|`-`|
+|count|徽标显示的数字|`number`|`-`|
+
+## 常用模式
+
+- **独立使用**：`default slot` 为空时，将会独立展示徽标。
+- **小红点**：设置 `dot`，即可只显示小红点而不显示数字。`count > 0` 时才显示。
+- **文本内容**：设置 `text`，可设置自定义提示内容。
+- **最大值**：设置 `max-count`，可以限制最大显示的徽标数值，超过将会加 `+` 后缀。`max-count` 默认为 `99`。
+- **状态点**：设置 `status`，可以得到不同的状态点。`normal - 正常` `processing - 进行中` `success - 成功` `warning - 提醒` `danger - 危险`。
+- **颜色**：我们提供多种预设色彩的徽标样式。如果预设值不能满足你的需求，`color` 字段也可以设置自定义色值。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
+- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。

.agents/skills/arco-design-vue/references/components/data-display/calendar.md

@@ -0,0 +1,74 @@
+---
+name: arco-vue-calendar
+description: "Arco Design Vue 日历 Calendar 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-calendar>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 日历 Calendar
+
+## 简介
+
+展示和选择日历
+
+## 基本用法
+
+```vue
+
+<template>
+  <a-calendar v-model="value" />
+  select: {{value}}
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const value = ref(new Date('2023-01-01'));
+
+    return {
+      value
+    }
+  },
+}
+</script>
+```
+
+## API
+
+### `<calendar>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|model-value **(v-model)**|绑定值|`date`|`-`|
+|default-value|默认值（非受控状态）|`date`|`-`|
+|mode|模式|`'month' \| 'year'`|`-`|
+|default-mode|默认模式|`'month' \| 'year'`|`'month'`|
+|modes|显示的模式|`('month' \| 'year')[]`|`['month', 'year']`|
+
+### `<calendar>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|选择的日期改变时触发|date: `Date`|
+|panel-change|日期面板改变时触发|date: `Date`|
+
+### `<calendar>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|header|自定义头部内容|year: `number`<br>month: `number`|2.53.0|
+|default|自定义单元格内容|year: `number`<br>month: `number`<br>date: `number`|2.53.0|
+
+## 常用模式
+
+- **基础使用**：直接使用全局 `a-` 前缀组件，按需绑定属性、事件和插槽。
+- **受控状态**：涉及值或显隐时优先使用 `v-model` 或命名 `v-model:*`。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
+- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。

.agents/skills/arco-design-vue/references/components/data-display/card.md

@@ -0,0 +1,93 @@
+---
+name: arco-vue-card
+description: "Arco Design Vue 卡片 Card 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-card>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 卡片 Card
+
+## 简介
+
+常规的内容容器，可承载文字、列表、图片、段落，常用于模块划分和内容概览。
+
+## 基本用法
+
+```vue
+<template>
+  <div :style="{ display: 'flex' }">
+    <a-card :style="{ width: '360px' }" title="Arco Card">
+      <template #extra>
+        <a-link>More</a-link>
+      </template>
+      ByteDance's core product, Toutiao ("Headlines"), is a content platform in
+      China and around the world. Toutiao started out as a news recommendation
+      engine and gradually evolved into a platform delivering content in various
+      formats.
+    </a-card>
+  </div>
+</template>
+```
+
+## API
+
+### `<card>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|bordered|是否有边框|`boolean`|`true`|
+|loading|是否为加载中|`boolean`|`false`|
+|hoverable|是否可悬浮|`boolean`|`false`|
+|size|卡片尺寸|`'medium' \| 'small'`|`'medium'`|
+|header-style|自定义标题区域样式|`CSSProperties`|`() => ({})`|
+|body-style|内容区域自定义样式|`CSSProperties`|`() => ({})`|
+|title|卡片标题|`string`|`-`|
+|extra|卡片右上角的操作区域|`string`|`-`|
+
+### `<card>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|actions|卡片底部的操作组|-|
+|cover|卡片封面|-|
+|extra|卡片右上角的操作区域|-|
+|title|卡片标题|-|
+
+### `<card-meta>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|title|标题|`string`|`-`|
+|description|描述|`string`|`-`|
+
+### `<card-meta>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|description|描述|-|
+|title|标题|-|
+|avatar|头像|-|
+
+### `<card-grid>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|hoverable|是否可以悬浮|`boolean`|`false`|
+
+## 常用模式
+
+- **鼠标悬浮样式**：指定 `hoverable` 来为卡片添加鼠标悬浮样式，同时你可以通过样式覆盖来自定义悬浮样式。
+- **无边框卡片**：设置 `bordered` 为 `false` 来使用无边框卡片。
+- **简洁卡片**：卡片可以只有内容区域。
+- **更灵活的内容展示**：使用 `Card.Meta` 支持更加灵活的内容（封面、头像、 标题、描述信息）
+- **栅格卡片**：在系统概览页面常常和栅格进行配合。
+- **网络型内嵌卡片**：通过 `Card.Grid` 来使用卡片内容区隔模式。
+- **内部卡片**：卡片中可以嵌套其他卡片组件。
+- **支持更多内容配置**：`actions` slot 可以用于展示底部按钮组。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
+- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。

.agents/skills/arco-design-vue/references/components/data-display/carousel.md

@@ -0,0 +1,97 @@
+---
+name: arco-vue-carousel
+description: "Arco Design Vue 图片轮播 Carousel 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-carousel>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 图片轮播 Carousel
+
+## 简介
+
+基本用法
+
+## 基本用法
+
+```vue
+<template>
+  <a-carousel
+    :style="{
+      width: '600px',
+      height: '240px',
+    }"
+    :default-current="2"
+    @change="handleChange"
+  >
+    <a-carousel-item v-for="image in images">
+      <img
+        :src="image"
+        :style="{
+          width: '100%',
+        }"
+      />
+    </a-carousel-item>
+  </a-carousel>
+</template>
+
+<script>
+export default {
+  setup() {
+    const images = [
+      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',
+      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',
+      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',
+    ];
+    const handleChange=(value)=>{
+      console.log(value)
+    }
+    return {
+      images,
+      handleChange
+    }
+  },
+};
+</script>
+```
+
+## API
+
+### `<carousel>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|current **(v-model)**|当前展示索引|`number`|`-`|
+|default-current|当前展示索引|`number`|`1`|
+|auto-play|是否自动循环展示，或者传入 `{ interval: 自动切换的时间间隔(默认: 3000), hoverToPause: 鼠标悬浮时是否暂停自动切换(默认: true) }` 进行高级配置|`boolean \| CarouselAutoPlayConfig`|`false`|
+|move-speed|幻灯片移动速率(ms)|`number`|`500`|
+|animation-name|切换动画|`'slide' \| 'fade' \| 'card'`|`'slide'`|
+|trigger|幻灯片切换触发方式, click/hover 指示器|`'click' \| 'hover'`|`'click'`|
+|direction|幻灯片移动方向|`'horizontal' \| 'vertical'`|`'horizontal'`|
+|show-arrow|切换箭头显示时机|`'always' \| 'hover' \| 'never'`|`'always'`|
+|arrow-class|切换箭头样式|`string`|`''`|
+|indicator-type|指示器类型，可为小方块和小圆点或不显示|`'line' \| 'dot' \| 'slider' \| 'never'`|`'dot'`|
+|indicator-position|指示器位置|`'bottom' \| 'top' \| 'left' \| 'right' \| 'outer'`|`'bottom'`|
+|indicator-class|指示器的样式|`string`|`''`|
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<carousel>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|幻灯片发生切换时的回调函数|index: `number`<br>prevIndex: `number`<br>isManual: `boolean`|
+
+## 常用模式
+
+- **自动切换**：可以通过 `autoPlay` 设置是否自动切换。可设置 `moveSpeed`, `timingFunc` 实现不同切换幻灯片效果。
+- **指示器**：可以指定指示器类型：`dot` | `line` | `slider` 和位置 `left` | `right` | `top` | `bottom` | `outer`。
+- **切换方向**：默认情况下，`direction` 为 `horizontal`。通过设置 `direction` 为 `vertical` 来使用垂直方向切换。
+- **卡片化**：当页面宽度方向空间空余，但高度方向空间多余时，可指定 `animation` 为 `card` 使用卡片化风格。
+- **渐隐切换**：指定 `animation` 为 `fade` 使用渐隐切换效果。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
+- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。

.agents/skills/arco-design-vue/references/components/data-display/collapse.md

@@ -0,0 +1,91 @@
+---
+name: arco-vue-collapse
+description: "Arco Design Vue 折叠面板 Collapse 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-collapse>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 折叠面板 Collapse
+
+## 简介
+
+用于将复杂的内容区域分组和隐藏，可折叠或展开。默认可以展开多个面板。
+
+## 基本用法
+
+```vue
+<template>
+  <a-collapse :default-active-key="['1', 2]">
+    <a-collapse-item header="Beijing Toutiao Technology Co., Ltd." key="1">
+      <div>Beijing Toutiao Technology Co., Ltd.</div>
+      <div>Beijing Toutiao Technology Co., Ltd.</div>
+      <div>Beijing Toutiao Technology Co., Ltd.</div>
+    </a-collapse-item>
+    <a-collapse-item header="Beijing Toutiao Technology Co., Ltd." :key="2" disabled>
+      <div>Beijing Toutiao Technology Co., Ltd.</div>
+      <div>Beijing Toutiao Technology Co., Ltd.</div>
+      <div>Beijing Toutiao Technology Co., Ltd.</div>
+    </a-collapse-item>
+    <a-collapse-item header="Beijing Toutiao Technology Co., Ltd." key="3">
+      <div>Beijing Toutiao Technology Co., Ltd.</div>
+      <div>Beijing Toutiao Technology Co., Ltd.</div>
+      <div>Beijing Toutiao Technology Co., Ltd.</div>
+    </a-collapse-item>
+  </a-collapse>
+</template>
+```
+
+## API
+
+### `<collapse>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|active-key **(v-model)**|当前展开的面板的 `key`|`(string \| number)[]`|`-`||
+|default-active-key|默认展开的面板的 `key` （非受控模式）|`(string \| number)[]`|`[]`||
+|accordion|是否开启手风琴模式|`boolean`|`false`||
+|show-expand-icon|是否显示展开图标|`boolean`|`-`|2.33.0|
+|expand-icon-position|展开图标显示的位置|`'left' \| 'right'`|`'left'`||
+|bordered|是否显示边框|`boolean`|`true`||
+|destroy-on-hide|是否在隐藏时销毁内容|`boolean`|`false`|2.27.0|
+
+### `<collapse>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|展开的面板发生改变时触发|activeKey: `(string \| number)[]`<br>ev: `Event`|
+
+### `<collapse-item>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|header|面板的标题|`string`|`-`||
+|disabled|是否禁用|`boolean`|`false`||
+|show-expand-icon|是否显示展开图标|`boolean`|`true`||
+|destroy-on-hide|是否在隐藏时销毁内容|`boolean`|`false`|2.27.0|
+
+### `<collapse-item>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|extra|额外内容|-||
+|expand-icon|展开图标|active: `boolean`<br>disabled: `boolean`<br>position: `'left' \| 'right'`|2.33.0|
+|header|面板的标题|-||
+
+## 常用模式
+
+- **手风琴模式**：通过 `accordion` 开启手风琴模式，同时只能打开一个面板。
+- **嵌套面板**：面板多层嵌套。
+- **无边框模式**：通过设置 `bordered="false"` 隐藏边框。
+- **额外节点**：通过 `extra` 可以设置额外节点。`extra` 单击可以以设置 `stop` 修饰符，以阻止当前项目展开。
+- **展开图标**：为展开项自定义展开图标
+- **自定义样式**：自定义面板样式。
+- **展开图标位置**：通过 `expand-icon-position` 属性设置展开图标的位置。
+- **隐藏时销毁**：通过设置 `destroy-on-hide` 可以让面板内容在隐藏时销毁。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
+- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。

.agents/skills/arco-design-vue/references/components/data-display/comment.md

@@ -0,0 +1,144 @@
+---
+name: arco-vue-comment
+description: "Arco Design Vue 评论 Comment 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-comment>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 评论 Comment
+
+## 简介
+
+一个基本的评论组件，带有作者、头像、时间和操作。
+
+## 基本用法
+
+```vue
+<template>
+  <a-comment
+    author="Socrates"
+    content="Comment body content."
+    datetime="1 hour"
+  >
+    <template #actions>
+      <span class="action" key="heart" @click="onLikeChange">
+        <span v-if="like">
+          <IconHeartFill :style="{ color: '#f53f3f' }" />
+        </span>
+        <span v-else>
+          <IconHeart />
+        </span>
+        {{ 83 + (like ? 1 : 0) }}
+      </span>
+      <span class="action" key="star" @click="onStarChange">
+        <span v-if="star">
+          <IconStarFill style="{ color: '#ffb400' }" />
+        </span>
+        <span v-else>
+          <IconStar />
+        </span>
+        {{ 3 + (star ? 1 : 0) }}
+      </span>
+      <span class="action" key="reply">
+        <IconMessage /> Reply
+      </span>
+    </template>
+    <template #avatar>
+      <a-avatar>
+        <img
+          alt="avatar"
+          src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
+        />
+      </a-avatar>
+    </template>
+  </a-comment>
+</template>
+
+<script>
+import { ref } from 'vue';
+import {
+  IconHeart,
+  IconMessage,
+  IconStar,
+  IconStarFill,
+  IconHeartFill,
+} from '@arco-design/web-vue/es/icon';
+
+export default {
+  components: {
+    IconHeart,
+    IconMessage,
+    IconStar,
+    IconStarFill,
+    IconHeartFill,
+  },
+  setup() {
+    const like = ref(false);
+    const star = ref(false);
+    const onLikeChange = () => {
+      like.value = !like.value;
+    };
+    const onStarChange = () => {
+      star.value = !star.value;
+    };
+
+    return {
+      like,
+      star,
+      onLikeChange,
+      onStarChange
+    }
+  },
+};
+</script>
+<style scoped>
+.action {
+  display: inline-block;
+  padding: 0 4px;
+  color: var(--color-text-1);
+  line-height: 24px;
+  background: transparent;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: all 0.1s ease;
+}
+.action:hover {
+  background: var(--color-fill-3);
+}
+</style>
+```
+
+## API
+
+### `<comment>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|author|作者名|`string`|`-`|
+|avatar|头像|`string`|`-`|
+|content|评论内容|`string`|`-`|
+|datetime|时间描述|`string`|`-`|
+|align|靠左/靠右 展示 datetime 和 actions|`'left' \| 'right' \| { datetime?: "left" \| "right"; actions?: "left" \| "right" }`|`'left'`|
+
+### `<comment>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|avatar|头像|-|
+|author|作者|-|
+|datetime|时间描述|-|
+|content|评论内容|-|
+|actions|操作列表|-|
+
+## 常用模式
+
+- **对齐**：通过 `align` 属性可以设置 `datetime` 和 `actions` 的对齐方式.
+- **嵌套评论**：评论可以嵌套使用
+- **回复框**：评论框配合回复框使用
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
+- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。

.agents/skills/arco-design-vue/references/components/data-display/descriptions.md

@@ -0,0 +1,116 @@
+---
+name: arco-vue-descriptions
+description: "Arco Design Vue 描述列表 Descriptions 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-descriptions>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 描述列表 Descriptions
+
+## 简介
+
+简单地成组展示多个只读字段，一般用于详情页的信息。
+
+## 基本用法
+
+```vue
+<template>
+  <a-space direction="vertical" size="large" fill>
+    <a-descriptions :data="data" title="User Info" layout="inline-horizontal" />
+    <a-descriptions title="User Info" :column="{xs:1, md:3, lg:4}">
+      <a-descriptions-item v-for="item of data" :label="item.label" :span="item.span ?? 1">
+        <a-tag>{{ item.value }}</a-tag>
+      </a-descriptions-item>
+    </a-descriptions>
+  </a-space>
+</template>
+
+<script>
+export default {
+  setup() {
+    const data = [{
+      label: 'Name',
+      value: 'Socrates',
+      span: 3,
+    }, {
+      label: 'Mobile',
+      value: '123-1234-1234',
+    }, {
+      label: 'Residence',
+      value: 'Beijing'
+    }, {
+      label: 'Hometown',
+      value: 'Beijing',
+    }, {
+      label: 'Address',
+      value: 'Yingdu Building, Zhichun Road, Beijing'
+    }];
+
+    return {
+      data
+    }
+  },
+}
+</script>
+```
+
+## API
+
+### `<descriptions>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|data|描述列表的数据|`DescData[]`|`[]`||
+|column|每行放置的数据个数。2.20.0 版本支持响应式配置，配置可参考 Grid|`number \| ResponsiveValue`|`3`||
+|title|描述列表的标题|`string`|`-`||
+|layout|描述列表的排列方式|`'horizontal' \| 'vertical' \| 'inline-horizontal' \| 'inline-vertical'`|`'horizontal'`||
+|align|文字的对齐位置|`TextAlign \| { label?: TextAlign; value?: TextAlign }`|`'left'`||
+|size|描述列表的大小|`'mini' \| 'small' \| 'medium' \| 'large'`|`-`||
+|bordered|是否显示边框|`boolean`|`false`||
+|label-style|数据标签的样式|`CSSProperties`|`-`||
+|value-style|数据内容的样式|`CSSProperties`|`-`||
+|table-layout|描述中表格样式的 `layout-fixed`，当设置成 `fixed` 时，宽度会均分。|`'auto' \| 'fixed'`|`'auto'`|2.38.0|
+
+### `<descriptions>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|value|数据内容|value: `string`<br>index: `number`<br>data: `DescData`|
+|label|数据标签|label: `string`<br>index: `number`<br>data: `DescData`|
+|title|标题|-|
+
+### `<descriptions-item>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|span|所占列数|`number`|`1`|2.18.0|
+|label|标签|`string`|`-`|2.18.0|
+
+### `<descriptions-item>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|label|标签|-|2.18.0|
+
+### DescData
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|label|标签|`string \| RenderFunction`|`-`|
+|value|数据|`string \| RenderFunction`|`-`|
+|span|所占列数|`number`|`1`|
+
+## 常用模式
+
+- **单列样式**：单列的描述列表样式。
+- **标签文本对齐**：标签文本可以设置左对齐右对齐，也可以设置垂直的排列方式。
+- **带边框样式**：带边框和背景颜色的列表。
+- **布局模式**：有水平排列、垂直排列、行内水平排列、行内垂直排列四种布局模式。
+- **布局示例**：`span` 所占列数大于 `column` 可放置的数据个数时，`span` 会被设置为 `column` 的值，当行剩余列数不够放置下一列时将自动换行，每行末尾列会自动填充剩余量。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
+- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。

.agents/skills/arco-design-vue/references/components/data-display/empty.md

@@ -0,0 +1,47 @@
+---
+name: arco-vue-empty
+description: "Arco Design Vue 空状态 Empty 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-empty>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 空状态 Empty
+
+## 简介
+
+空状态组件的基本用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-empty />
+</template>
+```
+
+## API
+
+### `<empty>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|description|描述内容|`string`|`-`||
+|img-src|自定义图片的地址|`string`|`-`||
+|in-config-provider|是否在 ConfigProvider 中使用|`boolean`|`false`|2.47.0|
+
+### `<empty>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|image|图片/图标|-|
+
+## 常用模式
+
+- **自定义图片和文案**：通过 `image` 插槽自定义图标、图片，或通过内容修改文案。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
+- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。

.agents/skills/arco-design-vue/references/components/data-display/image.md

@@ -0,0 +1,141 @@
+---
+name: arco-vue-image
+description: "Arco Design Vue 图片 Image 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-image>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 图片 Image
+
+## 简介
+
+需要查看图片的时候，简单的设置 `src` 属性，就能获得一个有预览图片功能的组件。
+
+## 基本用法
+
+```vue
+<template>
+  <a-image
+    width="200"
+    src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
+  />
+</template>
+```
+
+## API
+
+### `<image>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|src|图片获取地址|`string`|`-`||
+|width|图片显示宽度|`string \| number`|`-`||
+|height|图片显示高度|`string \| number`|`-`||
+|title|标题|`string`|`-`||
+|description|描述，将显示在底部，如果 alt 没有值，则会将其设置给 alt|`string`|`-`||
+|fit|确定图片如何适应容器框|`'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'`|`-`||
+|alt|图片的文字描述|`string`|`-`||
+|hide-footer|是否隐藏 footer（2.36.0 版本支持 'never' 参数，支持在加载错误时显示底部内容）|`boolean \| 'never'`|`false`||
+|footer-position|底部显示的位置|`'inner' \| 'outer'`|`'inner'`||
+|show-loader|是否显示加载中效果|`boolean`|`false`||
+|preview|是否开启预览|`boolean`|`true`||
+|preview-visible **(v-model)**|控制预览的打开状态，可与 previewVisibleChange 配合使用|`boolean`|`-`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<image>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|preview-visible-change|预览的打开和关闭事件|visible: `boolean`|
+
+### `<image>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|error|自定义错误状态内容|-|
+|error-icon|自定义错误状态的图标|-|
+|loader|自定义加载状态效果|-|
+|extra|底部额外内容|-|
+
+### `<image-preview>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|src|图片获取地址|`string`|`-`|
+|visible **(v-model)**|是否可见|`boolean`|`-`|
+|default-visible|默认是否可见，非受控|`boolean`|`false`|
+|mask-closable|点击 mask 是否触发关闭|`boolean`|`true`|
+|closable|是否显示关闭按钮|`boolean`|`true`|
+|actions-layout|操作项的布局|`string[]`|`[  'fullScreen',  'rotateRight',  'rotateLeft',  'zoomIn',  'zoomOut',  'originalSize',]`|
+|popup-container|设置弹出框的挂载点，同 `teleport` 的 `to`，缺省值是 document.body|`HTMLElement \| string`|`-`|
+|esc-to-close|是否支持 ESC 键关闭预览|`boolean`|`true`|
+|wheel-zoom|是否开启滚轮缩放|`boolean`|`true`|
+|keyboard|是否开启键盘控制|`boolean`|`true`|
+|default-scale|默认缩放比|`number`|`1`|
+|zoom-rate|缩放速率，仅对滚动缩放生效|`number`|`1.1`|
+
+### `<image-preview>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|close|关闭事件|-|
+
+### `<image-preview>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|actions|自定义额外的操作项|-|2.17.0|
+
+### `<image-preview-group>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|src-list|图片列表（设置了本属性之后，将不再收集 a-image 子组件的图片信息）|`string[]`|`-`|
+|current **(v-model)**|当前展示的图片的下标|`number`|`-`|
+|default-current|第一张展示的图片的下标|`number`|`0`|
+|infinite|是否无限循环|`boolean`|`false`|
+|visible **(v-model)**|是否可见，受控属性|`boolean`|`-`|
+|default-visible|默认是否可见，非受控|`boolean`|`false`|
+|mask-closable|点击 mask 是否触发关闭|`boolean`|`true`|
+|closable|是否显示关闭按钮|`boolean`|`true`|
+|actions-layout|控制条的布局|`string[]`|`[  'fullScreen',  'rotateRight',  'rotateLeft',  'zoomIn',  'zoomOut',  'originalSize',]`|
+|popup-container|设置弹出框的挂载点，同 `teleport` 的 `to`，缺省值是 document.body|`string \| HTMLElement`|`-`|
+
+### `<image-preview-group>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|切换图片|index: `number`|
+|visible-change|预览的打开和关闭|visible: `boolean`|
+
+### `<image-preview-group>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|actions|自定义额外的操作项|-|2.46.0|
+
+### `<image-preview-action>` 属性 (2.17.0)
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|name|名称|`string`|`-`|
+|disabled|是否禁用|`boolean`|`false`|
+
+## 常用模式
+
+- **显示 Caption**：通过设置 `title` 和 `description` 可以将图片的标题和描述显示在图片内部或者底部，显示的位置通过 `footerPosition` 控制。
+- **额外操作**：组件提供了具名插槽 `extra` 供用户在页脚定制额外的内容。
+- **错误状态**：当加载图片失败的时候显示的内容。
+- **加载状态**：默认情况下，加载效果是不显示的，可通过设置 `showLoader` 为 `true` 显示默认加载效果。如果默认加载效果不符合需求, 还可以通过 具名插槽 `loader` 自行设置加载样式。
+- **渐进加载**：大图可通过给 `loader` 传递一个小一些的图片，让其在原图未被加载成功时显示，以此来模拟渐进加载。
+- **自定义预览操作栏**：通过设置 `actionsLayout` 可以调整预览操作栏中功能按钮的顺序，同时可以过滤功能按钮，只有在 `actionsLayout` 中的按钮才会出现。
+- **多图预览**：用 `<a-image-preview-group>` 包裹 `<a-image>` 组件即可进行多图预览。
+- **单独使用预览组件**：`a-image-preview` 可单独使用，需要手动控制 `visible`。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
+- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。

.agents/skills/arco-design-vue/references/components/data-display/list.md

@@ -0,0 +1,131 @@
+---
+name: arco-vue-list
+description: "Arco Design Vue 列表 List 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-list>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 列表 List
+
+## 简介
+
+列表的基本使用方法。可用于承载文字、列表、图片和段落。
+
+## 基本用法
+
+```vue
+<template>
+  <a-list>
+    <template #header>
+      List title
+    </template>
+    <a-list-item>Beijing Bytedance Technology Co., Ltd.</a-list-item>
+    <a-list-item>Bytedance Technology Co., Ltd.</a-list-item>
+    <a-list-item>Beijing Toutiao Technology Co., Ltd.</a-list-item>
+    <a-list-item>Beijing Volcengine Technology Co., Ltd.</a-list-item>
+    <a-list-item>China Beijing Bytedance Technology Co., Ltd.</a-list-item>
+  </a-list>
+</template>
+```
+
+## API
+
+### `<list>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|data|列表数据，需要和 `item` 插槽同时使用|`any[]`|`-`||
+|size|列表大小|`'small' \| 'medium' \| 'large'`|`'medium'`||
+|bordered|是否显示边框|`boolean`|`true`||
+|split|是否显示分割线|`boolean`|`true`||
+|loading|是否为加载中状态|`boolean`|`false`||
+|hoverable|是否显示选中样式|`boolean`|`false`||
+|pagination-props|列表分页配置|`PaginationProps`|`-`||
+|grid-props|列表栅格配置|`object`|`-`||
+|max-height|列表的最大高度|`string \| number`|`0`||
+|bottom-offset|触发到达底部的距离阈值|`number`|`0`||
+|virtual-list-props|传递虚拟列表属性，传入此参数以开启虚拟滚动 [VirtualListProps](#VirtualListProps)|`VirtualListProps`|`-`||
+|scrollbar|是否开启虚拟滚动条|`boolean \| ScrollbarProps`|`true`|2.38.0|
+
+### `<list>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|scroll|列表滚动时触发|-|
+|reach-bottom|当列表到达底部时触发|-|
+|page-change|表格分页发生改变时触发|page: `number`|
+|page-size-change|表格每页数据数量发生改变时触发|pageSize: `number`|
+
+### `<list>` 方法
+
+|方法名|描述|参数|返回值|
+|---|---|---|---|
+|scrollIntoView|虚拟滚动到某个元素|options: `{ index?: number; key?: number \| string; align: 'auto' \| 'top' \| 'bottom'}`|-|
+
+### `<list>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|scroll-loading|滚动加载状态时，滚动到底部的提示|-|2.20.0|
+|item|列表项|index: `number`<br>item: `any`||
+|empty|空白展示|-||
+|footer|底部信息|-||
+|header|头部信息|-||
+
+### `<list-item>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|action-layout|操作组排列方向|`Direction`|`'horizontal'`|
+
+### `<list-item>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|meta|meta信息|-|
+|extra|额外内容|-|
+|actions|操作组|-|
+
+### `<list-item-meta>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|title|标题|`string`|`-`|
+|description|描述内容|`string`|`-`|
+
+### `<list-item-meta>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|avatar|头像|-|
+|title|标题|-|
+|description|描述内容|-|
+
+### VirtualListProps
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|height|可视区域高度|`number \| string`|`-`||
+|threshold|开启虚拟滚动的元素数量阈值，当数据数量小于阈值时不会开启虚拟滚动。|`number`|`-`||
+|isStaticItemHeight|（已废除）元素高度是否是固定的。2.34.1 版本废除，请使用 `fixedSize`|`boolean`|`false`||
+|fixedSize|元素高度是否是固定的。|`boolean`|`false`|2.34.1|
+|estimatedSize|元素高度不固定时的预估高度。|`number`|`-`|2.34.1|
+|buffer|视口边界外提前挂载的元素数量。|`number`|`10`|2.34.1|
+
+## 常用模式
+
+- **基本使用**：列表的基本使用方法。可用于承载文字、列表、图片和段落。
+- **不同尺寸**：列表组件提供了三种大小 `small, medium, large` ，可根据业务需求自行选择。
+- **列表元素**：使用 `list-item-meta` 组件可快速指定头像、标题、文字。
+- **增加操作项**：通过 `actions` 来为列表添加操作项。
+- **竖排列表样式**：这是一个包括分页、右侧内容、下方列表操作的示例。
+- **格栅列表**：通过 `grid` 属性来配置格栅列表。
+- **响应式栅格**：通过 `grid.sm` 等响应式参数动态设置每个单项横跨的列数，注意此时不要设置 `grid.span`。
+- **滚动**：通过设置 `max-height` 属性限制列表的最大高度。通过 `reach-bottom` 事件可以监听列表触底的事件。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
+- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。

.agents/skills/arco-design-vue/references/components/data-display/overflow-list.md

@@ -0,0 +1,85 @@
+---
+name: arco-vue-overflow-list
+description: "Arco Design Vue 折叠列表 OverflowList 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-overflow-list>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 折叠列表 OverflowList
+
+## 简介
+
+折叠列表的基本使用方法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-form auto-label-width>
+    <a-form-item label="Tag Number">
+      <a-input-number v-model="number" :min="0" :max="20" style="width: 200px"/>
+    </a-form-item>
+    <a-form-item label="List Width">
+      <a-slider v-model="width" :min="0" :max="800" />
+    </a-form-item>
+  </a-form>
+  <div :style="{width:`${width}px`,marginTop:'20px'}">
+    <a-overflow-list>
+      <div>DIV Element</div>
+      <a-tag v-for="item of tags" :key="item">Tag{{item}}</a-tag>
+    </a-overflow-list>
+  </div>
+</template>
+
+<script>
+import { computed, ref } from 'vue';
+
+export default {
+  setup() {
+    const width = ref(500);
+    const number = ref(10);
+    const tags = computed(() => Array.from({length: number.value}, (_, idx) => idx + 1));
+
+    return {
+      width,
+      number,
+      tags
+    }
+  }
+}
+</script>
+```
+
+## API
+
+### `<overflow-list>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|min|最少展示的元素个数|`number`|`0`|
+|margin|项目间隔|`number`|`8`|
+|from|折叠方向|`'start' \| 'end'`|`'end'`|
+
+### `<overflow-list>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|溢出数量改变时触发|value: `number`|
+
+### `<overflow-list>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|overflow|折叠元素|number: `number`|
+
+## 常用模式
+
+- **基本使用**：折叠列表的基本使用方法。
+- **折叠方向**：通过 `from` 属性可以设置折叠的方向。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
+- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。

.agents/skills/arco-design-vue/references/components/data-display/popover.md

@@ -0,0 +1,69 @@
+---
+name: arco-vue-popover
+description: "Arco Design Vue 气泡卡片 Popover 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-popover>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 气泡卡片 Popover
+
+## 简介
+
+鼠标移入或点击，弹出气泡，可对浮层上元素进行操作，承载复杂内容和操作。
+
+## 基本用法
+
+```vue
+<template>
+  <a-popover title="Title">
+    <a-button>Hover</a-button>
+    <template #content>
+      <p>Here is the text content</p>
+      <p>Here is the text content</p>
+    </template>
+  </a-popover>
+</template>
+```
+
+## API
+
+### `<popover>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|popup-visible **(v-model)**|文字气泡是否可见|`boolean`|`-`|
+|default-popup-visible|文字气泡默认是否可见（非受控模式）|`boolean`|`false`|
+|title|标题|`string`|`-`|
+|content|内容|`string`|`-`|
+|trigger|触发方式|`'hover' \| 'click' \| 'focus' \| 'contextMenu'`|`'hover'`|
+|position|弹出位置|`'top' \| 'tl' \| 'tr' \| 'bottom' \| 'bl' \| 'br' \| 'left' \| 'lt' \| 'lb' \| 'right' \| 'rt' \| 'rb'`|`'top'`|
+|content-class|弹出框内容的类名|`ClassName`|`-`|
+|content-style|弹出框内容的样式|`CSSProperties`|`-`|
+|arrow-class|弹出框箭头的类名|`ClassName`|`-`|
+|arrow-style|弹出框箭头的样式|`CSSProperties`|`-`|
+|popup-container|弹出框的挂载容器|`string \| HTMLElement`|`-`|
+
+### `<popover>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|popup-visible-change|文字气泡显示状态改变时触发|visible: `boolean`|
+
+### `<popover>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|title|标题|-|
+|content|内容|-|
+
+## 常用模式
+
+- **触发方式**：通过设置 `trigger`，可以指定不同的触发方式。
+- **弹出位置**：`Popover`支持 12 个不同的方位。分别为：`上左` `上` `上右` `下左` `下` `下右` `左上` `左` `左下` `右上` `右` `右下`。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
+- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。

.agents/skills/arco-design-vue/references/components/data-display/statistic.md

@@ -0,0 +1,89 @@
+---
+name: arco-vue-statistic
+description: "Arco Design Vue 数值显示 Statistic 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-statistic>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 数值显示 Statistic
+
+## 简介
+
+当需要突出某个或某组数字或展示带描述的统计类数据时使用。
+
+## 基本用法
+
+```vue
+<template>
+  <a-space size="large">
+    <a-statistic title="Downloads" :value="125670" show-group-separator />
+    <a-statistic extra="Comments" :value="40509" :precision="2" />
+  </a-space>
+</template>
+```
+
+## API
+
+### `<statistic>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|title|数值显示的标题|`string`|`-`||
+|value|数值显示的值|`number \| Date`|`-`||
+|format|数值显示的格式 [dayjs](https://day.js.org/docs/en/display/format)（日期模式使用）|`string`|`'HH:mm:ss'`||
+|extra|额外的显示内容|`string`|`-`||
+|start|是否开始动画|`boolean`|`true`||
+|precision|小数保留位数（数字模式使用）|`number`|`0`||
+|separator|进位分隔符（数字模式使用）|`string`|`-`||
+|show-group-separator|是否展示进位分隔符（数字模式使用）|`boolean`|`false`||
+|animation|是否开启动画|`boolean`|`false`||
+|animation-duration|动画的过度时间|`number`|`2000`||
+|value-from|动画的起始值|`number`|`-`||
+|placeholder|提示文字（当 value 为 undefined 时显示）|`string`|`-`|2.28.0|
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<statistic>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|title|标题|-|
+|prefix|前缀|-|
+|suffix|后缀|-|
+|extra|额外内容|-|
+
+### `<countdown>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|title|倒计时的标题|`string`|`-`||
+|value|倒计时的值|`number`|`() => Date.now() + 300000`||
+|now|用于修正初始化时间显示不正确|`number`|`() => Date.now()`||
+|format|倒计时的展示格式 [dayjs](https://day.js.org/docs/en/display/format)|`string`|`'HH:mm:ss'`||
+|start|是否开始倒计时|`boolean`|`true`||
+|value-style|自定义显示值的样式|`CSSProperties`|`-`|2.32.0|
+
+### `<countdown>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|finish|倒计时完成后触发的回调|-|
+
+### `<countdown>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|title|标题|-|
+
+## 常用模式
+
+- **自定义前缀&后缀**：通过 `prefix` 和 `suffix` 插槽可以添加前后缀。
+- **数值动画**：通过 `animation` 可以开启数值动画。
+- **倒计时组件**：倒计时组件 `countdown` 的基本使用方法。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
+- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。

.agents/skills/arco-design-vue/references/components/data-display/table.md

@@ -0,0 +1,335 @@
+---
+name: arco-vue-table
+description: "Arco Design Vue 表格 Table 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-table>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 表格 Table
+
+## 简介
+
+表格的基本用法，需要传递 `columns` 和 `data`。
+
+## 基本用法
+
+```vue
+<template>
+  <a-table :columns="columns" :data="data" />
+</template>
+
+<script>
+import { reactive } from 'vue';
+
+export default {
+  setup() {
+    const columns = [
+      {
+        title: 'Name',
+        dataIndex: 'name',
+      },
+      {
+        title: 'Salary',
+        dataIndex: 'salary',
+      },
+      {
+        title: 'Address',
+        dataIndex: 'address',
+      },
+      {
+        title: 'Email',
+        dataIndex: 'email',
+      },
+    ];
+    const data = reactive([{
+      key: '1',
+      name: 'Jane Doe',
+      salary: 23000,
+      address: '32 Park Road, London',
+      email: 'jane.doe@example.com'
+    }, {
+      key: '2',
+      name: 'Alisa Ross',
+      salary: 25000,
+      address: '35 Park Road, London',
+      email: 'alisa.ross@example.com'
+    }, {
+      key: '3',
+      name: 'Kevin Sandra',
+      salary: 22000,
+      address: '31 Park Road, London',
+      email: 'kevin.sandra@example.com'
+    }, {
+      key: '4',
+      name: 'Ed Hellen',
+      salary: 17000,
+      address: '42 Park Road, London',
+      email: 'ed.hellen@example.com'
+    }, {
+      key: '5',
+      name: 'William Smith',
+      salary: 27000,
+      address: '62 Park Road, London',
+      email: 'william.smith@example.com'
+    }]);
+
+    return {
+      columns,
+      data
+    }
+  },
+}
+</script>
+```
+
+## API
+
+### `<table>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|columns|表格的列描述信息|`TableColumnData[]`|`[]`||
+|data|表格的数据|`TableData[]`|`[]`||
+|bordered|是否显示边框|`boolean \| TableBorder`|`true`||
+|hoverable|是否显示选中效果|`boolean`|`true`||
+|stripe|是否开启斑马纹效果|`boolean`|`false`||
+|size|表格的大小|`'mini' \| 'small' \| 'medium' \| 'large'`|`'large'`||
+|table-layout-fixed|表格的 table-layout 属性设置为 fixed，设置为 fixed 后，表格的宽度不会被内容撑开超出 100%。|`boolean`|`false`||
+|loading|是否为加载中状态|`boolean\|object`|`false`||
+|row-selection|表格的行选择器配置|`TableRowSelection`|`-`||
+|expandable|表格的展开行配置|`TableExpandable`|`-`||
+|scroll|表格的滚动属性配置。`2.13.0` 版本增加字符型值的支持。`2.20.0` 版本增加 `minWidth`,`maxHeight` 的支持。|`{  x?: number \| string;  y?: number \| string;  minWidth?: number \| string;  maxHeight?: number \| string;}`|`-`||
+|pagination|分页的属性配置|`boolean \| PaginationProps`|`true`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<table>` 事件
+
+|事件名|描述|参数|版本|
+|---|---|---|:---|
+|expand|点击展开行时触发|rowKey: `string \| number`<br>record: `TableData`||
+|expanded-change|已展开的数据行发生改变时触发|rowKeys: `(string \| number)[]`||
+|select|点击行选择器时触发|rowKeys: `string \| number[]`<br>rowKey: `string \| number`<br>record: `TableData`||
+|select-all|点击全选选择器时触发|checked: `boolean`||
+|selection-change|已选择的数据行发生改变时触发|rowKeys: `(string \| number)[]`||
+|sorter-change|排序规则发生改变时触发|dataIndex: `string`<br>direction: `string`||
+|filter-change|过滤选项发生改变时触发|dataIndex: `string`<br>filteredValues: `string[]`||
+|page-change|表格分页发生改变时触发|page: `number`||
+|page-size-change|表格每页数据数量发生改变时触发|pageSize: `number`||
+|change|表格数据发生变化时触发|data: `TableData[]`<br>extra: `TableChangeExtra`<br>currentData: `TableData[]`|2.40.0 增加 currentData|
+|cell-mouse-enter|单元格 hover 进入时触发|record: `TableData`<br>column: `TableColumnData`<br>ev: `Event`||
+|cell-mouse-leave|单元格 hover 退出时触发|record: `TableData`<br>column: `TableColumnData`<br>ev: `Event`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<table>` 方法
+
+|方法名|描述|参数|返回值|版本|
+|---|---|---|---|:---|
+|selectAll|设置全选状态|checked: ` boolean `|-|2.22.0|
+|select|设置行选择器状态|rowKey: ` string \| number \| (string \| number)[] `<br>checked: ` boolean `|-|2.31.0|
+|expandAll|设置全部展开状态|checked: ` boolean `|-|2.31.0|
+|expand|设置展开状态|rowKey: ` string \| number \| (string \| number)[] `<br>checked: ` boolean `|-|2.31.0|
+|resetFilters|重置列的筛选器|dataIndex: ` string \| string[] `|-|2.31.0|
+|clearFilters|清空列的筛选器|dataIndex: ` string \| string[] `|-|2.31.0|
+|resetSorters|重置列的排序|-|-|2.31.0|
+|clearSorters|清空列的排序|-|-|2.31.0|
+
+### `<table>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|th|自定义 th 元素|column: `TableColumnData`|2.26.0|
+|thead|自定义 thead 元素|-|2.26.0|
+|empty|空白展示|-||
+|summary-cell|总结行|column: `TableColumnData`<br>record: `TableData`<br>rowIndex: `number`|2.23.0|
+|pagination-right|分页器右侧内容|-|2.18.0|
+|pagination-left|分页器左侧内容|-|2.18.0|
+|td|自定义 td 元素|column: `TableColumnData`<br>record: `TableData`<br>rowIndex: `number`|2.16.0|
+|tr|自定义 tr 元素|record: `TableData`<br>rowIndex: `number`|2.16.0|
+|tbody|自定义 tbody 元素|-|2.16.0|
+|drag-handle-icon|拖拽锚点图标|-|2.16.0|
+|footer|表格底部|-||
+|expand-row|展开行内容|record: `TableData`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<table-column>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|data-index|列信息的标识，对应TableData中的数据|`string`|`-`||
+|title|列标题|`string`|`-`||
+|width|列宽度|`number`|`-`||
+|min-width|最小列宽|`number`|`-`||
+|align|对齐方向|`TableColumnData['align']`|`-`||
+|fixed|固定位置|`TableColumnData['fixed']`|`-`||
+|ellipsis|是否显示为省略|`boolean`|`false`||
+|sortable|排序相关选项|`TableSortable`|`-`||
+|filterable|过滤相关选项|`TableFilterable`|`-`||
+|cell-class|自定义单元格类名|`ClassName`|`-`|2.36.0|
+|header-cell-class|自定义表头单元格类名|`ClassName`|`-`|2.36.0|
+|body-cell-class|自定义内容单元格类名|`ClassName \| ((record: TableData) => ClassName)`|`-`|2.36.0|
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<table-column>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|filter-icon|筛选按钮图标|-|2.23.0|
+|filter-content|自定义筛选弹出框内容|filterValue: `string[]`<br>setFilterValue: `(filterValue: string[]) => void`<br>handleFilterConfirm: `(event: Event) => void`<br>handleFilterReset: `(event: Event) => void`|2.23.0|
+|title|标题|-||
+|cell|单元格|record: `TableData`<br>column: `TableColumnData`<br>rowIndex: `number`||
+
+### 类型定义
+
+```ts
+type Filters = Record<string, string[]>;
+
+type Sorter = { filed: string; direction: 'ascend' | 'descend' } | Record<string, never>;
+```
+
+### TableData
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|key|数据行的key|`string`|`-`||
+|expand|扩展行内容|`string \| RenderFunction`|`-`||
+|children|子数据|`TableData[]`|`-`||
+|disabled|是否禁用行选择器|`boolean`|`false`||
+|isLeaf|是否是叶子节点|`boolean`|`false`|2.13.0|
+
+### TableSortable
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|sortDirections|支持的排序方向|`('ascend' \| 'descend')[]`|`-`|
+|sorter|排序函数。设置为 `true` 可关闭内部排序。2.19.0 版本修改传出数据。|`((        a: TableData,        b: TableData,        extra: { dataIndex: string; direction: 'ascend' \| 'descend' }      ) => number)    \| boolean`|`-`|
+|sortOrder|排序方向|`'ascend' \| 'descend' \| ''`|`-`|
+|defaultSortOrder|默认排序方向（非受控模式）|`'ascend' \| 'descend' \| ''`|`-`|
+
+### TableFilterData
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|text|筛选数据选项的内容|`string \| RenderFunction`|`-`|
+|value|筛选数据选项的值|`string`|`-`|
+
+### TableFilterable
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|filters|筛选数据|`TableFilterData[]`|`-`||
+|filter|筛选函数|`(filteredValue: string[], record: TableData) => boolean`|`-`||
+|multiple|是否支持多选|`boolean`|`false`||
+|filteredValue|筛选项|`string[]`|`-`||
+|defaultFilteredValue|默认筛选项|`string[]`|`-`||
+|renderContent|筛选框的内容|`(data: {    filterValue: string[];    setFilterValue: (filterValue: string[]) => void;    handleFilterConfirm: (event: Event) => void;    handleFilterReset: (event: Event) => void;  }) => VNodeChild`|`-`||
+|icon|筛选按钮的图标|`RenderFunction`|`-`||
+|triggerProps|筛选框的弹出框配置|`TriggerProps`|`-`||
+|alignLeft|筛选图标是否左对齐|`boolean`|`false`|2.13.0|
+
+### TableColumnData
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|dataIndex|列信息的标识，对应 `TableData` 中的数据|`string`|`-`||
+|title|列标题|`string \| RenderFunction`|`-`||
+|width|列宽度|`number`|`-`||
+|minWidth|最小列宽|`number`|`-`||
+|align|对齐方向|`'left' \| 'center' \| 'right'`|`-`||
+|fixed|固定位置|`'left' \| 'right'`|`-`||
+|ellipsis|是否显示省略号|`boolean`|`false`||
+|tooltip|是否在显示省略号时显示文本提示。可填入 tooltip 组件属性|`boolean \| Record<string, any>`|`-`|2.26.0|
+|sortable|排序相关选项|`TableSortable`|`-`||
+|filterable|过滤相关选项|`TableFilterable`|`-`||
+|children|表头子数据，用于表头分组|`TableColumnData[]`|`-`||
+|cellClass|自定义单元格类名|`ClassName`|`-`|2.36.0|
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### TableBorder
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|wrapper|是否展示外边框|`boolean`|`false`|
+|cell|是否展示单元格边框（表头+主体）|`boolean`|`false`|
+|headerCell|是否展示表头单元格边框|`boolean`|`false`|
+|bodyCell|是否展示主体单元格边框|`boolean`|`false`|
+
+### TableRowSelection
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|type|行选择器的类型|`'checkbox' \| 'radio'`|`-`||
+|selectedRowKeys|已选择的行（受控模式）|`BaseType[]`|`-`||
+|defaultSelectedRowKeys|默认已选择的行（非受控模式）|`BaseType[]`|`-`||
+|showCheckedAll|是否显示全选选择器|`boolean`|`false`||
+|title|列标题|`string`|`-`||
+|width|列宽度|`number`|`-`||
+|fixed|是否固定|`boolean`|`false`||
+|checkStrictly|是否开启严格选择模式|`boolean`|`true`|2.29.0|
+|onlyCurrent|是否仅展示当前页的 keys（切换分页时清空 keys）|`boolean`|`false`|2.32.0|
+
+### TableExpandable
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|expandedRowKeys|显示的展开行（受控模式）|`BaseType[]`|`-`|
+|defaultExpandedRowKeys|默认显示的展开行（非受控模式）|`BaseType[]`|`-`|
+|defaultExpandAllRows|是否默认展开所有的行|`boolean`|`false`|
+|expandedRowRender|自定义展开行内容|`(record: TableData) => VNodeChild`|`-`|
+|icon|展开图标|`(expanded: boolean, record: TableData) => VNodeChild`|`-`|
+|title|列标题|`string`|`-`|
+|width|列宽度|`number`|`-`|
+|fixed|是否固定|`boolean`|`false`|
+
+### TableDraggable
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|type|拖拽类型|`'row' \| 'handle'`|`-`|
+|title|列标题|`string`|`-`|
+|width|列宽度|`number`|`-`|
+|fixed|是否固定|`boolean`|`false`|
+
+### TableChangeExtra
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|type|触发类型|`'pagination' \| 'sorter' \| 'filter' \| 'drag'`|`-`|
+|page|页码|`number`|`-`|
+|pageSize|每页数据数|`number`|`-`|
+|sorter|排序信息|`Sorter`|`-`|
+|filters|筛选信息|`Filters`|`-`|
+|dragTarget|拖拽信息|`TableData`|`-`|
+
+### VirtualListProps
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|height|可视区域高度|`number \| string`|`-`||
+|threshold|开启虚拟滚动的元素数量阈值，当数据数量小于阈值时不会开启虚拟滚动。|`number`|`-`||
+|isStaticItemHeight|（已废除）元素高度是否是固定的。2.34.1 版本废除，请使用 `fixedSize`|`boolean`|`false`||
+|fixedSize|元素高度是否是固定的。|`boolean`|`false`|2.34.1|
+|estimatedSize|元素高度不固定时的预估高度。|`number`|`-`|2.34.1|
+|buffer|视口边界外提前挂载的元素数量。|`number`|`10`|2.34.1|
+
+## 常用模式
+
+- **行选择器**：通过设置 `row-selection` 开启行选择器。
+- **行选择器（单选框）**：通过设置 `rowSelection.type='radio'` 开启单选模式。
+- **展开行**：通过设置 `expandable` 开启展开行功能。可以在 `data` 中添加 `expand` 属性，设置展开行显示内容。
+- **文本省略和提示**：开启 `ellipsis` 属性可以显示省略号，如果同时开启 `tooltip` 会在显示省略号时使用文本提示。注意：开启 `tooltip` 后会修改 `table-cell` 中的 DOM 结构。
+- **树形数据展示**：树形数据展示的例子，`data` 里有 `children` 字段时会展示为树形表格。
+- **子树懒加载**：通过 `load-more` 属性可以开启子树懒加载功能。开启子树懒加载功能后，需要在无子树节点标注 `isLeaf: true`，没有标注且没有 `children` 属性的节点会认为需要子树懒加载处理。`load-more` 属性有提供 `done` 函数进行回调，可以在回调中传入懒加载的子树。
+- **表格属性**：这里罗列了一些表格的属性，你可以方便的打开或关闭一些属性，查看它的效果。
+- **排序和筛选**：通过设置 `columns` 中的 `sortable` 和 `filterable` 属性，可以配置排序和筛选功能。通过 `filter-icon-align-left` 属性可以让筛选按钮左对齐。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
+- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。

.agents/skills/arco-design-vue/references/components/data-display/tabs.md

@@ -0,0 +1,100 @@
+---
+name: arco-vue-tabs
+description: "Arco Design Vue 标签页 Tabs 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-tabs>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 标签页 Tabs
+
+## 简介
+
+标签页的基本使用方法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-tabs default-active-key="2">
+    <a-tab-pane key="1" title="Tab 1">
+      Content of Tab Panel 1
+    </a-tab-pane>
+    <a-tab-pane key="2" title="Tab 2">
+      Content of Tab Panel 2
+    </a-tab-pane>
+    <a-tab-pane key="3">
+      <template #title>Tab 3</template>
+      Content of Tab Panel 3
+    </a-tab-pane>
+  </a-tabs>
+</template>
+```
+
+## API
+
+### `<tabs>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|active-key **(v-model)**|当前选中的标签的 `key`|`string\|number`|`-`||
+|default-active-key|默认选中的标签的`key`（非受控状态，为空时选中第一个标签页）|`string\|number`|`-`||
+|position|选项卡的位置|`'left' \| 'right' \| 'top' \| 'bottom'`|`'top'`||
+|size|选项卡的大小|`'mini' \| 'small' \| 'medium' \| 'large'`|`-`||
+|type|选项卡的类型|`'line' \| 'card' \| 'card-gutter' \| 'text' \| 'rounded' \| 'capsule'`|`'line'`||
+|direction|选项卡的方向|`'horizontal' \| 'vertical'`|`'horizontal'`||
+|editable|是否开启可编辑模式|`boolean`|`false`||
+|show-add-button|是否显示增加按钮（仅在可编辑模式可用）|`boolean`|`false`||
+|destroy-on-hide|是否在不显示标签时销毁内容|`boolean`|`false`|2.27.0|
+|lazy-load|是否在首次展示标签时挂载内容|`boolean`|`false`||
+|justify|高度撑满容器，只在水平模式下生效。|`boolean`|`false`||
+|animation|是否开启选项内容过渡动画|`boolean`|`false`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<tabs>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|当前标签值改变时触发|key: ` string \| number `|
+|tab-click|用户点击标签时触发|key: ` string \| number `|
+|add|用户点击增加按钮时触发|-|
+|delete|用户点击删除按钮时触发|key: ` string \| number `|
+
+### `<tabs>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|extra|选项卡额外内容|-|
+
+### `<tab-pane>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|title|选项卡的标题|`string`|`-`||
+|disabled|是否禁用|`boolean`|`false`||
+|closable|是否允许关闭此选项卡（仅在可编辑模式生效）|`boolean`|`true`||
+|destroy-on-hide|是否在不显示标签时销毁内容|`boolean`|`false`|2.27.0|
+
+### `<tab-pane>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|title|选项卡标题|-|
+
+## 常用模式
+
+- **带图标的页签**：带有图标的标签页。
+- **位置**：通过 `position` 属性可以自定义标签栏的位置。
+- **不同类型**：通过 `type` 可以设置标签的类型。
+- **懒加载**：通过设置 lazy-load 属性，可以让面板在首次激活时渲染。
+- **附加内容**：通过 `extra` 插槽可以自定义额外显示内容。
+- **动态增减标签页**：通过设置 `:editable="true"` 可以开启动态增减标签页。仅在 `line` | `card` | `card-gutter` 生效
+- **触发方式**：通过 `trigger` 指定触发方式。
+- **滚动**：支持通过滚轮或者触摸板进行滚动操作，且可以通过 `scrollPosition` 属性设置滚动位置。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
+- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。

.agents/skills/arco-design-vue/references/components/data-display/tag.md

@@ -0,0 +1,80 @@
+---
+name: arco-vue-tag
+description: "Arco Design Vue 标签 Tag 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-tag>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 标签 Tag
+
+## 简介
+
+标签的基本用法
+
+## 基本用法
+
+```vue
+<template>
+  <a-space>
+    <a-tag>Default</a-tag>
+    <a-tag>Tag 1</a-tag>
+    <a-tag>Tag 2</a-tag>
+    <a-tag>
+      <template #icon>
+        <icon-check-circle-fill />
+      </template>
+      Complete
+    </a-tag>
+  </a-space>
+</template>
+```
+
+## API
+
+### `<tag>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|color|标签的颜色|`'red' \| 'orangered' \| 'orange' \| 'gold' \| 'lime' \| 'green' \| 'cyan' \| 'blue' \| 'arcoblue' \| 'purple' \| 'pinkpurple' \| 'magenta' \| 'gray'`|`-`||
+|size|标签的大小|`'small' \| 'medium' \| 'large'`|`'medium'`||
+|bordered|是否显示边框|`boolean`|`false`|2.33.0|
+|visible **(v-model)**|标签是否可见|`boolean`|`-`||
+|default-visible|标签默认是否可见|`boolean`|`true`||
+|loading|标签是否为加载中状态|`boolean`|`false`||
+|closable|标签是否可关闭|`boolean`|`false`||
+|checkable|标签是否可选中|`boolean`|`false`||
+|checked **(v-model)**|标签是否选中（标签可选中时可用）|`boolean`|`-`||
+|default-checked|标签默认选中状态（标签可选中时可用）|`boolean`|`true`||
+|nowrap|标签内容不换行|`boolean`|`false`|2.56.1|
+
+### `<tag>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|close|点击关闭按钮时触发|ev: `MouseEvent`|
+|check|用户选中时触发（仅在可选中模式下触发）|checked: `boolean`<br>ev: `MouseEvent`|
+
+### `<tag>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|icon|图标|-|
+|close-icon|关闭按钮的图标|-|
+
+## 常用模式
+
+- **可关闭标签**：通过 `closable` 属性控制标签是否可关闭。可关闭标签可通过 `close` 事件执行一些关闭后操作，也可通过 `visible` 属性控制标签的显示或隐藏。
+- **动态编辑标签**：可动态添加和删除标签。
+- **可选中**：通过设置 `checkable` ，可以实现点击选中的效果。
+- **标签的颜色**：我们提供多种预设色彩的标签样式，通过 `color` 设置不同颜色。如果预设值不能满足你的需求，`color` 字段也可以设置自定义色值。
+- **标签的尺寸**：标签的大小分为：`small`、`medium`、`large` 三种，可以在不同场景下选择合适按钮尺寸。推荐及默认尺寸为 `medium`。
+- **加载中状态**：标签的加载中状态。
+- **带图标的标签**：可通过 `icon` 插槽在标签中加入图标。
+- **带边框的标签**：通过参数 `bordered`，可以显示带边框的标签。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
+- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。

.agents/skills/arco-design-vue/references/components/data-display/timeline.md

@@ -0,0 +1,110 @@
+---
+name: arco-vue-timeline
+description: "Arco Design Vue 时间轴 Timeline 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-timeline>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 时间轴 Timeline
+
+## 简介
+
+基本使用
+
+## 基本用法
+
+```vue
+<template>
+  <div :style="{ marginBottom: '40px' }">
+    <a-typography-text :style="{ verticalAlign: 'middle', marginRight: '8px' }">
+      Reverse
+    </a-typography-text>
+    <a-radio-group
+      @change="onChange"
+      style="{ marginBottom: '30px' }"
+      :modelValue="isReverse"
+    >
+      <a-radio :value="false">No Reverse</a-radio>
+      <a-radio :value="true">Reverse</a-radio>
+    </a-radio-group>
+  </div>
+  <a-timeline :reverse="isReverse">
+    <a-timeline-item label="2017-03-10">The first milestone</a-timeline-item>
+    <a-timeline-item label="2018-05-12">The second milestone</a-timeline-item>
+    <a-timeline-item label="2020-09-30">The third milestone</a-timeline-item>
+  </a-timeline>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const isReverse = ref(false);
+
+    const onChange = (bool) => {
+      isReverse.value = bool;
+    };
+
+    return {
+      isReverse,
+      onChange
+    }
+  },
+};
+</script>
+```
+
+## API
+
+### `<timeline>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|reverse|是否倒序|`boolean`|`false`|
+|direction|时间轴方向|`'horizontal' \| 'vertical'`|`'vertical'`|
+|mode|时间轴的展示类型：时间轴在左侧，时间轴在右侧, 交替出现。|`'left' \| 'right' \| 'top' \| 'bottom' \| 'alternate'`|`'left'`|
+|pending|是否展示幽灵节点，设置为 true 时候只展示幽灵节点。传入字符串时，会作为节点内容展示。|`boolean\|string`|`-`|
+|label-position|设置标签文本的位置|`'relative' \| 'same'`|`'same'`|
+
+### `<timeline>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|dot|幽灵节点|-|
+
+### `<timeline-item>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|dot-color|节点颜色|`string`|`-`|
+|dot-type|节点类型：空心圆/实心圆|`'hollow' \| 'solid'`|`'solid'`|
+|line-type|时间轴类型：实线/虚线/点状线|`'solid' \| 'dashed' \| 'dotted'`|`'solid'`|
+|line-color|时间轴颜色|`string`|`-`|
+|label|标签文本|`string`|`-`|
+|position|Item 位置|`PositionType`|`-`|
+
+### `<timeline-item>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|dot|自定义节点|-||
+|label|自定义标签|-|2.50.0|
+
+## 常用模式
+
+- **自定义节点内容**：自定义节点内容
+- **自定义节点**：可以通过属性 `dotColor`, `dotType` 设置节点的颜色以及节点类型。同时可通过 `dot` 直接传入 DOM 自定义节点样式。优先级高于 `dotColor` 和 `dotType`
+- **自定义轴线样式**：自定义轴线的示例。
+- **幽灵节点**：当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点，通过`slot#pending-dot`定制其轴点。
+- **时间轴展示类型**：设置 `mode=alternate`时将会交替展示内容。同时可以通过设置 `TimelineItem` 的 `positon`属性控制时间轴节点的位置.
+- **纵向时间轴**：竖直方向的时间轴。
+- **横向时间轴**：可以通过 `direction` 设置展示横向时间轴
+- **标签文本位置**：通过 `labelPosition` 可以设置标签文本的位置。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
+- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。

.agents/skills/arco-design-vue/references/components/data-display/tooltip.md

@@ -0,0 +1,71 @@
+---
+name: arco-vue-tooltip
+description: "Arco Design Vue 文字气泡 Tooltip 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-tooltip>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 文字气泡 Tooltip
+
+## 简介
+
+鼠标移入，气泡出现，鼠标移出，气泡消失。
+
+## 基本用法
+
+```vue
+<template>
+  <a-space>
+    <a-tooltip content="This is tooltip content">
+      <a-button>Mouse over to display tooltip</a-button>
+    </a-tooltip>
+    <a-tooltip content="This is a two-line tooltip content.This is a two-line tooltip content.">
+      <a-button>Mouse over to display tooltip</a-button>
+    </a-tooltip>
+  </a-space>
+</template>
+```
+
+## API
+
+### `<tooltip>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|popup-visible **(v-model)**|文字气泡是否可见|`boolean`|`-`|
+|default-popup-visible|文字气泡默认是否可见（非受控模式）|`boolean`|`false`|
+|disabled|文字气泡是否禁用|`boolean`|`false`|
+|content|文字气泡内容|`string`|`-`|
+|position|弹出位置|`'top' \| 'tl' \| 'tr' \| 'bottom' \| 'bl' \| 'br' \| 'left' \| 'lt' \| 'lb' \| 'right' \| 'rt' \| 'rb'`|`'top'`|
+|mini|是否展示为迷你尺寸|`boolean`|`false`|
+|background-color|弹出框的背景颜色|`string`|`-`|
+|content-class|弹出框内容的类名|`ClassName`|`-`|
+|content-style|弹出框内容的样式|`CSSProperties`|`-`|
+|arrow-class|弹出框箭头的类名|`ClassName`|`-`|
+|arrow-style|弹出框箭头的样式|`CSSProperties`|`-`|
+|popup-container|弹出框的挂载容器|`string \| HTMLElement`|`-`|
+
+### `<tooltip>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|popup-visible-change|文字气泡显示状态改变时触发|visible: `boolean`|
+
+### `<tooltip>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|content|内容|-|
+
+## 常用模式
+
+- **迷你尺寸**：适用于小场景或数字气泡样式。
+- **位置**：文字气泡支持 12 个不同的方位。分别为：`上左`、`上`、`上右`、`下左`、`下`、`下右`、`左上`、`左`、`左下`、`右上`、`右`、`右下`。
+- **自定义背景颜色**：通过 `background-color` 属性自定义背景颜色。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
+- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。

.agents/skills/arco-design-vue/references/components/data-display/tree.md

@@ -0,0 +1,189 @@
+---
+name: arco-vue-tree
+description: "Arco Design Vue 树 Tree 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-tree>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 树 Tree
+
+## 简介
+
+为每个节点赋予全局唯一的 `key`（必填项），`title` 为该节点显示的内容。
+
+## 基本用法
+
+```vue
+<template>
+  <a-tree
+    :data="treeData"
+    :default-expanded-keys="['0-0-0']"
+    :default-selected-keys="['0-0-0', '0-0-1']"
+  />
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        treeData,
+      };
+    },
+  };
+
+  const treeData = [
+    {
+      title: 'Trunk 0-0',
+      key: '0-0',
+      children: [
+        {
+          title: 'Branch 0-0-0',
+          key: '0-0-0',
+          disabled: true,
+          children: [
+            {
+              title: 'Leaf',
+              key: '0-0-0-0',
+            },
+            {
+              title: 'Leaf',
+              key: '0-0-0-1',
+            }
+          ]
+        },
+        {
+          title: 'Branch 0-0-1',
+          key: '0-0-1',
+          children: [
+            {
+              title: 'Leaf',
+              key: '0-0-1-0',
+            },
+          ]
+        },
+      ],
+    },
+  ];
+</script>
+```
+
+## API
+
+### `<tree>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|size|尺寸|`'mini' \| 'small' \| 'medium' \| 'large'`|`'medium'`||
+|block-node|节点是否占据一行|`boolean`|`false`||
+|default-expand-all|是否默认展开父节点|`boolean`|`true`||
+|multiple|是否支持多选|`boolean`|`false`||
+|checkable|是否在节点前添加复选框，从 `2.27.0` 开始支持函数格式|`boolean\| ((    node: TreeNodeData,    info: {      level: number;      isLeaf: boolean;    }  ) => boolean)`|`false`||
+|selectable|是否支持选择，从 `2.27.0` 开始支持函数格式|`boolean\| ((    node: TreeNodeData,    info: {      level: number;      isLeaf: boolean;    }  ) => boolean)`|`true`||
+|check-strictly|是否取消父子节点关联|`boolean`|`false`||
+|checked-strategy|定制回填方式 <br/> all: 返回所有选中的节点  <br/> parent: 父子节点都选中时只返回父节点 <br/> child: 只返回子节点|`'all' \| 'parent' \| 'child'`|`'all'`||
+|default-selected-keys|默认选中的树节点|`Array<string \| number>`|`-`||
+|selected-keys **(v-model)**|选中的树节点|`Array<string \| number>`|`-`||
+|default-checked-keys|默认选中复选框的树节点|`Array<string \| number>`|`-`||
+|checked-keys **(v-model)**|选中复选框的树节点|`Array<string \| number>`|`-`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<tree>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|select|点击树节点时触发|selectedKeys: `Array<string \| number>`<br>data: `{ selected?: boolean; selectedNodes: TreeNodeData[]; node?: TreeNodeData; e?: Event; }`|
+|check|点击树节点复选框时触发。`halfCheckedKeys` 和 `halfCheckedNodes` 从 `2.19.0` 开始支持。|checkedKeys: `Array<string \| number>`<br>data: `{ checked?: boolean; checkedNodes: TreeNodeData[]; node?: TreeNodeData; e?: Event; halfCheckedKeys: (string \| number)[]; halfCheckedNodes: TreeNodeData[]; }`|
+|expand|展开/关闭|expandKeys: `Array<string \| number>`<br>data: `{ expanded?: boolean; expandNodes: TreeNodeData[]; node?: TreeNodeData; e?: Event; }`|
+|drag-start|节点开始拖拽|ev: `DragEvent`<br>node: `TreeNodeData`|
+|drag-end|节点结束拖拽|ev: `DragEvent`<br>node: `TreeNodeData`|
+|drag-over|节点被拖拽至可释放目标|ev: `DragEvent`<br>node: `TreeNodeData`|
+|drag-leave|节点离开可释放目标|ev: `DragEvent`<br>node: `TreeNodeData`|
+|drop|节点在可释放目标上释放|data: `{ e: DragEvent; dragNode: TreeNodeData; dropNode: TreeNodeData; dropPosition: number; }`|
+
+### `<tree>` 方法
+
+|方法名|描述|参数|返回值|版本|
+|---|---|---|---|:---|
+|scrollIntoView|虚拟列表滚动某个元素|options: `{ index?: number; key?: number \| string; align: 'auto' \| 'top' \| 'bottom'}`|-||
+|getSelectedNodes|获取选中的节点|-|TreeNodeData[]|2.19.0|
+|getCheckedNodes|获取选中复选框的节点。支持传入 `checkedStrategy`，没有传则取组件的配置。|options: ` checkedStrategy?: 'all' \| 'parent' \| 'child'; includeHalfChecked?: boolean; `|TreeNodeData[]|2.19.0|
+|getHalfCheckedNodes|获取复选框半选的节点|-|TreeNodeData[]|2.19.0|
+|getExpandedNodes|获取展开的节点|-|TreeNodeData[]|2.19.0|
+|checkAll|设置全部节点的复选框状态|checked: ` boolean `|-|2.20.0|
+|checkNode|设置指定节点的复选框状态|key: ` TreeNodeKey \| TreeNodeKey[] `<br>checked: ` boolean `<br>onlyCheckLeaf: ` boolean `|-|2.20.0，onlyCheckLeaf from 2.21.0|
+|selectAll|设置全部节点的选中状态|selected: ` boolean `|-|2.20.0|
+|selectNode|设置指定节点的选中状态|key: ` TreeNodeKey \| TreeNodeKey[] `<br>selected: ` boolean `|-|2.20.0|
+|expandAll|设置全部节点的展开状态|expanded: ` boolean `|-|2.20.0|
+|expandNode|设置指定节点的展开状态|key: ` TreeNodeKey \| TreeNodeKey[] `<br>expanded: ` boolean `|-|2.20.0|
+
+### `<tree>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|title|标题|title: `string`||
+|extra|渲染额外的节点内容|-||
+|drag-icon|定制 drag 图标|node: `TreeNodeData`||
+|loading-icon|定制 loading 图标|-||
+|switcher-icon|定制 switcher 图标|-||
+|icon|定制节点图标|node: `TreeNodeData`|2.18.0|
+
+### TreeNodeData
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|key|唯一标示|`string \| number`|`-`|
+|title|该节点显示的标题|`string`|`-`|
+|selectable|是否允许选中|`boolean`|`false`|
+|disabled|是否禁用节点|`boolean`|`false`|
+|disableCheckbox|是否禁用复选框|`boolean`|`false`|
+|checkable|是否显示多选框|`boolean`|`false`|
+|draggable|是否可以拖拽|`boolean`|`false`|
+|isLeaf|是否是叶子节点。动态加载时有效|`boolean`|`false`|
+|icon|节点的图标|`() => VNode`|`-`|
+|switcherIcon|定制 switcher 图标，优先级大于 tree|`() => VNode`|`-`|
+|loadingIcon|定制 loading 图标，优先级大于 tree|`() => VNode`|`-`|
+|dragIcon|定制 drag 图标，优先级大于 tree|`() => VNode`|`-`|
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### TreeFieldNames
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|key|指定 key 在 TreeNodeData 中的字段名|`string`|`key`|
+|title|指定 title 在 TreeNodeData 中的字段名|`string`|`title`|
+|disabled|指定 disabled 在 TreeNodeData 中的字段名|`string`|`disabled`|
+|children|指定 children 在 TreeNodeData 中的字段名|`string`|`children`|
+|isLeaf|指定 isLeaf 在 TreeNodeData 中的字段名|`string`|`isLeaf`|
+|disableCheckbox|指定 disableCheckbox 在 TreeNodeData 中的字段名|`string`|`disableCheckbox`|
+|checkable|指定 checkable 在 TreeNodeData 中的字段名|`string`|`checkable`|
+|icon|指定 icon 在 TreeNodeData 中的字段名|`string`|`checkable`|
+
+### VirtualListProps
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|height|可视区域高度|`number \| string`|`-`||
+|threshold|开启虚拟滚动的元素数量阈值，当数据数量小于阈值时不会开启虚拟滚动。|`number`|`-`||
+|isStaticItemHeight|（已废除）元素高度是否是固定的。2.34.1 版本废除，请使用 `fixedSize`|`boolean`|`false`||
+|fixedSize|元素高度是否是固定的。|`boolean`|`false`|2.34.1|
+|estimatedSize|元素高度不固定时的预估高度。|`number`|`-`|2.34.1|
+|buffer|视口边界外提前挂载的元素数量。|`number`|`10`|2.34.1|
+
+## 常用模式
+
+- **节点占一行**：节点占据一整行。
+- **多选**：`Tree` 设置 `multiple` 属性为`true`，可以启用多选。
+- **带复选框的树**：为 `Tree` 添加 `checkable` 属性即可使树具有复选框功能，可以用 `defaultCheckedKeys` 指定复选框默认选中的节点。
+- **双向绑定**：`selectedKeys` 、 `checkedKeys` 、 `expandedKeys` 属性均可受控，不仅支持 `v-model` ，还可以在对应的 `select` / `check` / `expand` 事件中自行控制如何更新属性值。
+- **动态加载**：动态加载节点。
+- **拖拽**：可拖拽的树节点。
+- **设置回填方式**：为 `Tree` 添加 `checkedStrategy` 可以设置选中时的回填方式
+- **显示连接线**：为 `Tree` 添加 `showLine` 属性即可使树具有连接线
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
+- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。

.agents/skills/arco-design-vue/references/components/data-entry/auto-complete.md

@@ -0,0 +1,94 @@
+---
+name: arco-vue-auto-complete
+description: "Arco Design Vue 自动补全 AutoComplete 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-auto-complete>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 自动补全 AutoComplete
+
+## 简介
+
+自动补全的基础用法
+
+## 基本用法
+
+```vue
+<template>
+  <a-auto-complete :data="data" @search="handleSearch" :style="{width:'360px'}" placeholder="please enter something"/>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      data: []
+    }
+  },
+  methods: {
+    handleSearch(value) {
+      if (value) {
+        this.data = [...Array(5)].map((_, index) => `${value}-${index}`)
+        console.log(this.data)
+      } else {
+        this.data = []
+      }
+    }
+  }
+}
+</script>
+```
+
+## API
+
+### `<auto-complete>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|model-value **(v-model)**|绑定值|`string`|`-`||
+|default-value|默认值（非受控模式）|`string`|`''`||
+|disabled|是否禁用|`boolean`|`false`||
+|data|用于自动提示的数据|`(string \| number \| SelectOptionData \| SelectOptionGroup)[]`|`[]`||
+|popup-container|弹出框的挂载容器|`string \| HTMLElement \| null \| undefined`|`-`||
+|strict|是否为严格校验模式|`boolean`|`false`||
+|filter-option|自定义选项过滤方法|`FilterOption`|`true`||
+|trigger-props|trigger 组件属性|`TriggerProps`|`-`|2.14.0|
+|allow-clear|是否允许清空输入框|`boolean`|`false`|2.23.0|
+|virtual-list-props|传递虚拟列表属性，传入此参数以开启虚拟滚动 [VirtualListProps](#VirtualListProps)|`VirtualListProps`|`-`|2.50.0|
+
+### `<auto-complete>` 事件
+
+|事件名|描述|参数|版本|
+|---|---|---|:---|
+|change|绑定值发生改变时触发|value: `string`||
+|search|用户搜索时触发|value: `string`||
+|select|选择选项时触发|value: `string`||
+|clear|用户点击清除按钮时触发|ev: `Event`|2.23.0|
+|dropdown-scroll|下拉菜单发生滚动时触发|ev: `Event`|2.52.0|
+|dropdown-reach-bottom|下拉菜单滚动到底部时触发|ev: `Event`|2.52.0|
+
+### `<auto-complete>` 方法
+
+|方法名|描述|参数|返回值|版本|
+|---|---|---|---|:---|
+|focus|使输入框获取焦点|-|-|2.40.0|
+|blur|使输入框失去焦点|-|-|2.40.0|
+
+### `<auto-complete>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|option|选项内容|data: `OptionInfo`|2.13.0|
+|footer|弹出框的页脚|-||
+
+## 常用模式
+
+- **区分大小写**：使用 `strict` 属性来指明在匹配时严格区分大小写。
+- **弹出框的页脚**：自定义弹出框的页脚
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
+- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/data-entry/cascader.md

@@ -0,0 +1,186 @@
+---
+name: arco-vue-cascader
+description: "Arco Design Vue 级联选择 Cascader 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-cascader>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 级联选择 Cascader
+
+## 简介
+
+级联选择器的基本用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-space direction="vertical" size="large">
+    <a-cascader :options="options" :style="{width:'320px'}" placeholder="Please select ..." />
+    <a-cascader :options="options" default-value="datunli" expand-trigger="hover" :style="{width:'320px'}" placeholder="Please select ..." />
+  </a-space>
+</template>
+
+<script>
+export default {
+  setup() {
+    const options = [
+      {
+        value: 'beijing',
+        label: 'Beijing',
+        children: [
+          {
+            value: 'chaoyang',
+            label: 'ChaoYang',
+            children: [
+              {
+                value: 'datunli',
+                label: 'Datunli',
+              },
+            ],
+          },
+          {
+            value: 'haidian',
+            label: 'Haidian',
+          },
+          {
+            value: 'dongcheng',
+            label: 'Dongcheng',
+          },
+          {
+            value: 'xicheng',
+            label: 'Xicheng',
+            children: [
+              {
+                value: 'jinrongjie',
+                label: 'Jinrongjie',
+              },
+              {
+                value: 'tianqiao',
+                label: 'Tianqiao',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        value: 'shanghai',
+        label: 'Shanghai',
+        children: [
+          {
+            value: 'huangpu',
+            label: 'Huangpu',
+          },
+        ],
+      },
+    ];
+    return {
+      options
+    }
+  },
+}
+</script>
+```
+
+## API
+
+### `<cascader>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|path-mode|绑定值是否为路径|`boolean`|`false`||
+|multiple|是否为多选状态（多选模式默认开启搜索）|`boolean`|`false`||
+|model-value **(v-model)**|绑定值|`string\| number\| Record<string, any>\| (    \| string    \| number    \| Record<string, any>    \| (string \| number \| Record<string, any>)[]  )[]\| undefined`|`-`||
+|default-value|默认值（非受控状态）|`string\| number\| Record<string, any>\| (    \| string    \| number    \| Record<string, any>    \| (string \| number \| Record<string, any>)[]  )[]\| undefined`|`'' \| undefined \| []`||
+|options|级联选择器的选项|`CascaderOption[]`|`[]`||
+|disabled|是否禁用|`boolean`|`false`||
+|error|是否为错误状态|`boolean`|`false`||
+|size|选择框的大小|`'mini' \| 'small' \| 'medium' \| 'large'`|`'medium'`||
+|allow-search|是否允许搜索|`boolean`|`false (single) \| true (multiple)`||
+|allow-clear|是否允许清除|`boolean`|`false`||
+|input-value **(v-model)**|输入框的值|`string`|`-`||
+|default-input-value|输入框的默认值（非受控状态）|`string`|`''`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<cascader>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|选中值改变时触发|value: `string \| number \| (string \| number \| (string \| number)[])[] \| undefined`|
+|input-value-change|输入值改变时触发|value: `string`|
+|clear|点击清除按钮时触发|-|
+|search|用户搜索时触发|value: `string`|
+|popup-visible-change|下拉框的显示状态改变时触发|visible: `boolean`|
+|focus|获得焦点时触发|ev: `FocusEvent`|
+|blur|失去焦点时触发|ev: `FocusEvent`|
+
+### `<cascader>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|label|选择框的显示内容|data: `CascaderOption`|2.18.0|
+|prefix|前缀元素|-|2.23.0|
+|arrow-icon|选择框的箭头图标|-|2.16.0|
+|loading-icon|选择框的加载中图标|-|2.16.0|
+|search-icon|选择框的搜索图标|-|2.16.0|
+|empty|选项为空时的显示内容|-|2.23.0|
+|option|选项内容|data: `CascaderOption`|2.18.0|
+
+### `<cascader-panel>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|path-mode|绑定值是否为路径|`boolean`|`false`||
+|multiple|是否为多选状态（多选模式默认开启搜索）|`boolean`|`false`||
+|model-value **(v-model)**|绑定值|`string\| number\| Record<string, any>\| (    \| string    \| number    \| Record<string, any>    \| (string \| number \| Record<string, any>)[]  )[]\| undefined`|`-`||
+|default-value|默认值（非受控状态）|`string\| number\| Record<string, any>\| (    \| string    \| number    \| Record<string, any>    \| (string \| number \| Record<string, any>)[]  )[]\| undefined`|`'' \| undefined \| []`||
+|options|级联选择器的选项|`CascaderOption[]`|`[]`||
+|expand-trigger|展开下一级的触发方式|`string`|`'click'`||
+|check-strictly|是否开启严格选择模式|`boolean`|`false`||
+|load-more|数据懒加载函数，传入时开启懒加载功能|`(  option: CascaderOption,  done: (children?: CascaderOption[]) => void) => void`|`-`|2.13.0|
+|field-names|自定义 `CascaderOption` 中的字段|`CascaderFieldNames`|`-`|2.22.0|
+|value-key|用于确定选项键值的属性名|`string`|`'value'`|2.29.0|
+|expand-child|是否展开子菜单|`boolean`|`false`|2.29.0|
+
+### `<cascader-panel>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|选中值改变时触发|value: `string \| number \| (string \| number \| (string \| number)[])[] \| undefined`|
+
+### `<cascader-panel>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|empty|选项为空时的显示内容|-|2.23.0|
+
+### CascaderOption
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|value|选项值，2.29.0 版本支持对象|`string \| number \| Record<string, any>`|`-`||
+|label|选项文本|`string`|`-`||
+|render|自定义渲染|`RenderFunction`|`-`||
+|disabled|是否禁用|`boolean`|`false`||
+|tagProps|展示的标签属性|`TagProps`|`-`|2.8.0|
+|children|下一级选项|`CascaderOption[]`|`-`||
+|isLeaf|是否是叶子节点|`boolean`|`false`||
+
+## 常用模式
+
+- **基本使用**：级联选择器的基本用法。
+- **允许清除**：允许清除。
+- **禁用选项**：指定 `option` 的 `disabled` 为 `true`，可以禁用该选项。
+- **自定义输入框的展示值**：利用 `formatLabel` 对显示的内容进行自定义处理。
+- **多选模式**：通过设置 `multiple` 开启多选模式。
+- **严格选择模式**：设置属性 `check-strictly`，开启严格选择模式，点击任何结点都可以选择。多选时将会解除父子节点的关联。
+- **加载中**：选择框和下拉菜单显示加载中状态。
+- **子选项懒加载**：通过 `load-more` 属性可以开启数据懒加载功能。开启数据懒加载功能后，需要在叶子节点标注 `isLeaf: true`，没有标注且没有 `children` 属性的节点会认为需要懒加载处理。`load-more` 属性有提供 `done` 函数进行回调，可以在回调中传入懒加载的子数据。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
+- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/data-entry/checkbox.md

@@ -0,0 +1,95 @@
+---
+name: arco-vue-checkbox
+description: "Arco Design Vue 复选框 Checkbox 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-checkbox>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 复选框 Checkbox
+
+## 简介
+
+复选框的基本用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-checkbox value="1">Option 1</a-checkbox>
+</template>
+```
+
+## API
+
+### `<checkbox>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|model-value **(v-model)**|绑定值|`boolean \| Array<string \| number \| boolean>`|`-`|
+|default-checked|默认是否选中（非受控状态）|`boolean`|`false`|
+|value|选项的 `value`|`string\|number\|boolean`|`-`|
+|disabled|是否禁用|`boolean`|`false`|
+|indeterminate|是否为半选状态|`boolean`|`false`|
+
+### `<checkbox>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|值改变时触发|value: ` boolean \| (string \| number \| boolean)[] `<br>ev: `Event`|
+
+### `<checkbox>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|checkbox|自定义复选框|checked: `boolean`<br>disabled: `boolean`|2.18.0|
+
+### `<checkbox-group>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|model-value **(v-model)**|绑定值|`Array<string \| number \| boolean>`|`-`||
+|default-value|默认值（非受控状态）|`Array<string \| number \| boolean>`|`[]`||
+|max|支持最多选中的数量|`number`|`-`|2.36.0|
+|options|选项|`Array<string \| number \| CheckboxOption>`|`-`|2.27.0|
+|direction|复选框的排列方向|`Direction`|`'horizontal'`||
+|disabled|是否禁用|`boolean`|`false`||
+
+### `<checkbox-group>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|值改变时触发|value: `(string \| number \| boolean)[]`<br>ev: `Event`|
+
+### `<checkbox-group>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|checkbox|自定义复选框|checked: `boolean`<br>disabled: `boolean`|2.27.0|
+|label|checkbox 文案内容|data: `CheckboxOption`|2.27.0|
+
+### CheckboxOption
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|label|文案|`RenderContent`|`-`|
+|value|选项的 `value`|`string \| number`|`-`|
+|disabled|是否禁用|`boolean`|`false`|
+|indeterminate|是否为半选状态|`boolean`|`false`|
+
+## 常用模式
+
+- **受控**：通过 `v-model` (`model-value`) 属性控制是否选中
+- **禁用状态**：禁用复选框。
+- **复选框组**：通过 `<a-checkbox-group>` 组件展示复选框组。设置 `direction="vertical"` 可以展示竖向的复选框组。
+- **复选框组选项**：`a-checkbox-group` 通过 `options` 属性设置子元素
+- **限制可勾选数量**：通过设置 `max` 限制最多可被勾选的项目数。
+- **全选**：在实现全选的功能时，可以通过 `indeterminate` 属性展示半选效果。
+- **布局**：使用 `<a-checkbox-group>` 传入 `<a-checkbox>`，配合 `<a-grid>` 组件实现灵活的布局。
+- **自定义复选框**：使用 #checkbox 插槽自定义复选框的展示
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
+- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/data-entry/color-picker.md

@@ -0,0 +1,74 @@
+---
+name: arco-vue-color-picker
+description: "Arco Design Vue 颜色选择器 ColorPicker 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-color-picker>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 颜色选择器 ColorPicker
+
+## 简介
+
+基本用法
+
+## 基本用法
+
+```vue
+<template>
+  <a-space>
+    <a-color-picker  v-model="value" />
+    <a-color-picker defaultValue="#165DFF" showText disabledAlpha/>
+  </a-space>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const value = ref('#165DFF')
+</script>
+```
+
+## API
+
+### `<color-picker>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|model-value **(v-model)**|绑定值|`string`|`-`|
+|default-value|默认值（非受控状态）|`string`|`-`|
+|format|颜色值的格式|`'hex' \| 'rgb'`|`-`|
+|size|尺寸|`'mini' \| 'small' \| 'medium' \| 'large'`|`'medium'`|
+|show-text|显示颜色值|`boolean`|`false`|
+|show-history|显示历史颜色|`boolean`|`false`|
+|show-preset|显示预设颜色|`boolean`|`false`|
+|disabled|禁用|`boolean`|`false`|
+|disabled-alpha|禁用透明通道|`boolean`|`false`|
+|hide-trigger|没有触发元素，只显示颜色面板|`boolean`|`false`|
+|trigger-props|接受所有 [Trigger](../other/trigger.md) 组件的Props|`Partial<TriggerProps>`|`-`|
+|history-colors|历史颜色的颜色数组|`string[]`|`-`|
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<color-picker>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|颜色值改变时触发|value: `string`|
+|popup-visible-change|颜色面板展开和收起时触发|visible: `boolean`<br>value: `string`|
+
+## 常用模式
+
+- **基本使用**：基本用法
+- **尺寸**：颜色选择器定义了四种尺寸（`mini`,`small`, `medium`, `large`），分别为 24px，28px，32px，36px。
+- **禁用**：设置 `disabled` 禁用选择器。
+- **颜色格式**：通过 `format` 设置颜色值的格式，支持 `hex` 和 `rgb`。
+- **预设颜色和历史颜色**：通过 `showPreset` 和 `showHistory` 开启预设颜色和历史颜色区域。历史颜色需要用户自行控制展示内容。
+- **触发器**：可以通过 `trigger-props` 设置触发器的所有属性。
+- **自定义触发元素**：自定义触发元素。
+- **只使用面板**：只用颜色选择面板。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
+- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/data-entry/date-picker.md

@@ -0,0 +1,239 @@
+---
+name: arco-vue-date-picker
+description: "Arco Design Vue 日期选择器 DatePicker 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-date-picker>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 日期选择器 DatePicker
+
+## 简介
+
+日期输入器的基础使用。
+
+## 基本用法
+
+```vue
+<template>
+  <a-date-picker style="width: 200px;" />
+</template>
+```
+
+## API
+
+### `Common` Props
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|locale|国际化配置，用于覆盖locale中的 `datePicker` 字段|`Record<string, any>`|`-`||
+|hide-trigger|没有触发元素，只显示选择面板|`boolean`|`false`||
+|allow-clear|是否允许清除|`boolean`|`true`||
+|readonly|是否为只读|`boolean`|`false`||
+|error|是否为错误状态|`boolean`|`false`||
+|size|日期选择器的尺寸|`'mini' \| 'small' \| 'medium' \| 'large'`|`'medium'`||
+|shortcuts|预设时间范围快捷选择|`ShortcutType[]`|`[]`||
+|shortcuts-position|预设范围在面板上的位置，默认放在下方，侧边一般用于大量预设时间的场景|`'left' \| 'bottom' \| 'right'`|`'bottom'`||
+|position|弹出的框的位置|`'top' \| 'tl' \| 'tr' \| 'bottom' \| 'bl' \| 'br'`|`'bl'`||
+|popup-visible|控制弹出框的打开或者关闭状态|`boolean`|`-`||
+|default-popup-visible|默认弹出框是打开或者关闭|`boolean`|`false`||
+|trigger-props|可以传入 `Trigger` 组件的参数|`TriggerProps`|`-`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `Common` Events
+
+|事件名|描述|参数|
+|---|---|---|
+|change|组件值发生改变|value: `Date \| string \| number \| undefined`<br>date: `Date \| undefined`<br>dateString: `string \| undefined`|
+|select|选中日期发生改变但组件值未改变|value: `Date \| string \| number`<br>date: `Date`<br>dateString: `string`|
+|popup-visible-change|打开或关闭弹出框|visible: `boolean`|
+|ok|点击确认按钮|value: `Date \| string \| number`<br>date: `Date`<br>dateString: `string`|
+|clear|点击清除按钮|-|
+|select-shortcut|点击快捷选项|shortcut: `ShortcutType`|
+|picker-value-change|面板日期改变|value: `Date \| string \| number`<br>date: `Date`<br>dateString: `string`|
+
+### `Common` Slots
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|prefix|输入框前缀|-|2.41.0|
+|suffix-icon|输入框后缀图标|-||
+|icon-next-double|双箭头往后翻页图标|-||
+|icon-prev-double|双箭头往前翻页图标|-||
+|icon-next|单箭头往后翻页图标|-||
+|icon-prev|单箭头往前翻页图标|-||
+|cell|自定义日期单元格的内容|date: `Date`||
+|extra|额外的页脚|-||
+
+### `<date-picker>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|model-value **(v-model)**|绑定值|`Date \| string \| number`|`-`||
+|default-value|默认值|`Date \| string \| number`|`-`||
+|format|展示日期的格式，参考[字符串解析格式](#字符串解析格式)|`string \| ((current: Date) => string)`|`-`||
+|day-start-of-week|每周的第一天开始于周几，0 - 周日，1 - 周一，以此类推。|`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`|`0`|2-6 from 2.21.0|
+|show-time|是否增加时间选择|`boolean`|`false`||
+|time-picker-props|时间显示的参数，参考 [TimePickerProps](time-picker.md)|`Partial<TimePickerProps>`|`-`||
+|disabled|是否禁用|`boolean`|`false`||
+|disabled-date|不可选取的日期|`(current?: Date) => boolean`|`-`||
+|disabled-time|不可选取的时间|`(current: Date) => DisabledTimeProps`|`-`||
+|show-now-btn|是否显示 `showTime` 时，选择当前时间的按钮|`boolean`|`true`||
+
+### `<month-picker>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|model-value **(v-model)**|绑定值|`Date \| string \| number`|`-`|
+|default-value|默认值|`Date \| string \| number`|`-`|
+|format|展示日期的格式，参考[字符串解析格式](#字符串解析格式)|`string`|`'YYYY-MM'`|
+
+### `<year-picker>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|model-value **(v-model)**|绑定值|`Date \| string \| number`|`-`|
+|default-value|默认值|`Date \| string \| number`|`-`|
+|format|展示日期的格式，参考[字符串解析格式](#字符串解析格式)|`string`|`'YYYY'`|
+
+### `<quarter-picker>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|model-value **(v-model)**|绑定值|`Date \| string \| number`|`-`||
+|default-value|默认值|`Date \| string \| number`|`-`||
+|format|展示日期的格式，参考[字符串解析格式](#字符串解析格式)|`string`|`'YYYY-[Q]Q'`||
+|value-format|值的格式，对 `value` `defaultValue` `pickerValue` `defaultPickerValue` 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考[字符串解析格式](#字符串解析格式)）。|`string`|`'YYYY-MM'`|2.16.0|
+
+### `<week-picker>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|model-value **(v-model)**|绑定值|`Date \| string \| number`|`-`||
+|default-value|默认值|`Date \| string \| number`|`-`||
+|format|展示日期的格式，参考[字符串解析格式](#字符串解析格式)|`string`|`'gggg-wo'`||
+|value-format|值的格式，对 `value` `defaultValue` `pickerValue` `defaultPickerValue` 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考[字符串解析格式](#字符串解析格式)）。|`string`|`'YYYY-MM-DD'`|2.16.0|
+|day-start-of-week|每周的第一天开始于周几，0 - 周日，1 - 周一，以此类推。|`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`|`0`|2-6 from 2.21.0|
+
+### `<range-picker>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|mode|范围选择器的类型|`'date' \| 'year' \| 'quarter' \| 'month' \| 'week'`|`'date'`||
+|model-value **(v-model)**|绑定值|`(Date \| string \| number)[]`|`-`||
+|default-value|默认值|`(Date \| string \| number)[]`|`-`||
+|picker-value|默认面板显示的日期|`(Date \| string \| number)[]`|`-`||
+|default-picker-value|面板显示的日期|`(Date \| string \| number)[]`|`-`||
+|disabled|是否禁用|`boolean \| boolean[]`|`false`||
+|day-start-of-week|每周的第一天开始于周几，0 - 周日，1 - 周一，以此类推。|`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`|`0`|2-6 from 2.21.0|
+|format|展示日期的格式，参考[字符串解析格式](#字符串解析格式)|`string`|`-`||
+|value-format|值的格式，对 `value` `defaultValue` `pickerValue` `defaultPickerValue` 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考[字符串解析格式](#字符串解析格式)）。如果没有指定，将格式化为字符串，格式同 `format`。|`'timestamp' \| 'Date' \| string`|`-`|2.16.0|
+|show-time|是否增加时间选择|`boolean`|`false`||
+|time-picker-props|时间显示的参数，参考 [TimePickerProps](time-picker.md)|`Partial<TimePickerProps>`|`-`||
+|placeholder|提示文案|`string[]`|`-`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<range-picker>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|组件值发生改变|value: `(Date \| string \| number \| undefined)[] \| undefined`<br>date: `(Date \| undefined)[] \| undefined`<br>dateString: `(string \| undefined)[] \| undefined`|
+|select|选中日期发生改变但组件值未改变|value: `(Date \| string \| number \| undefined)[]`<br>date: `(Date \| undefined)[]`<br>dateString: `(string \| undefined)[]`|
+|popup-visible-change|打开或关闭弹出框|visible: `boolean`|
+|ok|点击确认按钮|value: `Date \| string \| number[]`<br>date: `Date[]`<br>dateString: `string[]`|
+|clear|点击清除按钮|-|
+|select-shortcut|点击快捷选项|shortcut: `ShortcutType`|
+|picker-value-change|面板日期改变|value: `Date \| string \| number[]`<br>date: `Date[]`<br>dateString: `string[]`|
+
+### ShortcutType
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|label|选项的内容|`string \| number \| (() => VNode)`|`-`|
+|value|选项值|`(Date \| string \| number)    \| (Date \| string \| number)[]    \| (() => (Date \| string \| number) \| (Date \| string \| number)[])`|`-`|
+|format|解析值所使用的格式，参考[字符串解析格式](#字符串解析格式)|`string`|`-`|
+
+### 字符串解析格式
+
+格式|输出|描述
+
+---|---|---:
+
+`YY`|21|两位数的年份
+
+`YYYY`|2021|四位数年份
+
+`M`|1-12|月份，从 1 开始
+
+`MM`|01-12|月份，两位数
+
+`MMM`|Jan-Dec|缩写的月份名称
+
+`MMMM`|January-December|完整的月份名称
+
+`D`|1-31|月份里的一天
+
+`DD`|01-31|月份里的一天，两位数
+
+`d`|0-6|一周中的一天，星期天是 0
+
+`dd`|Su-Sa|最简写的一周中一天的名称
+
+`ddd`|Sun-Sat|简写的一周中一天的名称
+
+`dddd`|Sunday-Saturday|一周中一天的名称
+
+`H`|0-23|小时
+
+`HH`|00-23|小时，两位数
+
+`h`|1-12|小时, 12 小时制
+
+`hh`|01-12|小时, 12 小时制, 两位数
+
+`m`|0-59|分钟
+
+`mm`|00-59|分钟，两位数
+
+`s`|0-59|秒
+
+`ss`|00-59|秒，两位数
+
+`S`|0-9|数百毫秒，一位数
+
+`SS`|00-99|几十毫秒，两位数
+
+`SSS`|000-999|毫秒，三位数字
+
+`Z`|-5:00|UTC 的偏移量
+
+`ZZ`|-0500|UTC 的偏移量，数字前面加上 0
+
+`A`|AM PM|-
+
+`a`|am pm|-
+
+`Do`|1st... 3st|带序号的月份中的某天
+
+`X`|1410715640.579|Unix 时间戳
+
+`x`|1410715640579|Unix 毫秒时间戳
+
+## 常用模式
+
+- **月份选择器**：月份输入器的基础使用。
+- **年份选择器**：年份输入器的基础使用。
+- **季度选择器**：季度选择器的使用。
+- **周选择器**：周选择器提供了一种选择星期的简单方法。也可以指定一周的起始日。
+- **带时间的日期选择**：使用 `showTime` 可以使用带时间的日期选择。
+- **范围选择器**：范围输入器的基础使用。
+- **默认值**：日期输入器有默认值的情况。
+- **不可选取的时间**：使用 `disabledDate` 可以禁用某些日期。使用 `disabledTime` 可以禁用时间，需要配合 `showTime` 使用。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
+- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/data-entry/form.md

@@ -0,0 +1,206 @@
+---
+name: arco-vue-form
+description: "Arco Design Vue 表单 Form 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-form>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 表单 Form
+
+## 简介
+
+表单的基本用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-form :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
+    <a-form-item field="name" tooltip="Please enter username" label="Username">
+      <a-input
+        v-model="form.name"
+        placeholder="please enter your username..."
+      />
+    </a-form-item>
+    <a-form-item field="post" label="Post">
+      <a-input v-model="form.post" placeholder="please enter your post..." />
+    </a-form-item>
+    <a-form-item field="isRead">
+      <a-checkbox v-model="form.isRead"> I have read the manual </a-checkbox>
+    </a-form-item>
+    <a-form-item>
+      <a-button html-type="submit">Submit</a-button>
+    </a-form-item>
+  </a-form>
+  {{ form }}
+</template>
+
+<script>
+import { reactive } from 'vue';
+
+export default {
+  setup() {
+    const form = reactive({
+      name: '',
+      post: '',
+      isRead: false,
+    });
+    const handleSubmit = (data) => {
+      console.log(data);
+    };
+
+    return {
+      form,
+      handleSubmit,
+    };
+  },
+};
+</script>
+```
+
+## API
+
+### `<form>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|model **(必填)**|表单数据对象|`object`|`-`||
+|layout|表单的布局方式，包括水平、垂直、多列|`'horizontal' \| 'vertical' \| 'inline'`|`'horizontal'`||
+|size|表单控件的尺寸|`'mini' \| 'small' \| 'medium' \| 'large'`|`'medium'`||
+|label-col-props|标签元素布局选项。参数同 `<col>` 组件一致|`object`|` span: 5, offset: 0 `||
+|wrapper-col-props|表单控件布局选项。参数同 `<col>` 组件一致|`object`|` span: 19, offset: 0 `||
+|label-align|标签的对齐方向|`'left' \| 'right'`|`'right'`||
+|disabled|是否禁用表单|`boolean`|`-`||
+|rules|表单项校验规则|`Record<string, FieldRule \| FieldRule[]>`|`-`||
+|auto-label-width|是否开启自动标签宽度，仅在 `layout="horizontal"` 下生效。|`boolean`|`false`|2.13.0|
+|id|表单 `id` 属性和表单控件 `id` 前缀|`string`|`-`||
+|scroll-to-first-error|验证失败后滚动到第一个错误字段|`boolean`|`false`|2.51.0|
+
+### `<form>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|submit|表单提交时触发|data: `{values: Record<string, any>; errors: Record<string, ValidatedError> \| undefined}`<br>ev: `Event`|
+|submit-success|验证成功时触发|values: `Record<string, any>`<br>ev: `Event`|
+|submit-failed|验证失败时触发|data: `{values: Record<string, any>; errors: Record<string, ValidatedError>}`<br>ev: `Event`|
+
+### `<form>` 方法
+
+|方法名|描述|参数|返回值|版本|
+|---|---|---|---|:---|
+|validate|校验全部表单数据|callback: `(errors: undefined \| Record<string, ValidatedError>) => void`|Promise<undefined \| Record<string, ValidatedError>>||
+|validateField|校验部分表单数据|field: `string \| string[]`<br>callback: `(errors: undefined \| Record<string, ValidatedError>) => void`|Promise<undefined \| Record<string, ValidatedError>>||
+|resetFields|重置表单数据|field: `string \| string[]`|-||
+|clearValidate|清除校验状态|field: `string \| string[]`|-||
+|setFields|设置表单项的值和状态|data: `Record<string, FieldData>`|-||
+|scrollToField|滚动到指定表单项|field: `string`|-|2.51.0|
+
+### `<form-item>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|field|表单元素在数据对象中的path（数据项必填）|`string`|`''`||
+|label|标签的文本|`string`|`-`||
+|tooltip|提示内容|`string`|`-`|2.41.0|
+|show-colon|是否显示冒号|`boolean`|`false`||
+|no-style|是否去除样式|`boolean`|`false`||
+|disabled|是否禁用|`boolean`|`-`||
+|help|帮助文案|`string`|`-`||
+|extra|额外显示的文案|`string`|`-`||
+|required|是否必须填写|`boolean`|`false`||
+|asterisk-position|可选择将星号置于 label 前/后|`'start' \| 'end'`|`'start'`|2.41.0|
+|rules|表单项校验规则（优先级高于 form 的 rules）|`FieldRule \| FieldRule[]`|`-`||
+|validate-status|校验状态|`'success' \| 'warning' \| 'error' \| 'validating'`|`-`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<form-item>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|label|标签|-|
+|help|帮助信息|-|
+|extra|额外内容|-|
+
+### 类型定义
+
+### FieldRule
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|type|校验的值的类型，默认为 `'string'`|`'string'    \| 'number'    \| 'boolean'    \| 'array'    \| 'object'    \| 'email'    \| 'url'    \| 'ip'`|`-`|
+|required|是否必填|`boolean`|`false`|
+|message|校验失败时展示的信息|`string`|`-`|
+|length|校验长度（string, array）|`number`|`-`|
+|maxLength|最大长度（string）|`number`|`-`|
+|minLength|最小长度（string）|`number`|`-`|
+|match|匹配校验（string）|`RegExp`|`-`|
+|uppercase|大写（string）|`boolean`|`false`|
+|lowercase|小写（string）|`boolean`|`false`|
+|min|最小值（number）|`number`|`-`|
+|max|最大值（number）|`number`|`-`|
+|equal|校验数值（number）|`number`|`-`|
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### FieldData
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|value|字段的值|`any`|`-`|
+|status|字段的状态|`ValidateStatus`|`-`|
+|message|字段的错误信息|`string`|`-`|
+
+### ValidatedError
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|label|标签的文本|`string`|`-`|2.18.0|
+|field|字段名|`string`|`-`||
+|value|字段值|`any`|`-`||
+|type|字段类型|`string`|`-`||
+|isRequiredError|是否为 `required` 错误|`boolean`|`false`||
+|message|错误信息|`string`|`-`||
+
+### FormItemEventHandler
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|onChange|onChange|`(ev?: Event) => void`|`-`|
+|onInput|onInput|`(ev?: Event) => void`|`-`|
+|onFocus|onFocus|`(ev?: Event) => void`|`-`|
+|onBlur|onBlur|`(ev?: Event) => void`|`-`|
+
+### useFormItem
+
+```ts
+const useFormItem = (data: {
+  size?: Ref<Size | undefined>;
+  disabled?: Ref<boolean>;
+  error?: Ref<boolean>;
+}) => {
+  mergedSize:Ref<Size>;
+  mergedDisabled:Ref<boolean>;
+  mergedError:Ref<boolean>;
+  feedback:Ref<string>;
+  eventHandlers:Ref<FormItemEventHandler>;
+}
+```
+
+## 常用模式
+
+- **表单布局**：表单支持三种布局方式： `horizontal` - 水平排列 **（默认）**， `vertical` - 垂直排列， `inline` - 行内排列。
+- **额外信息和帮助信息**：可以使用 `extra` 添加额外信息。如果需要在外部自定义校验信息，可以使用 `help` 属性或插槽。设置 `help` 时校验信息会被屏蔽。
+- **嵌套数据**：展示了多种表单项嵌套的方式。表单项组件默认会将表单项状态和事件绑定到第一子组件，如果想要使用表单项进行布局设置，请设置 `:merge-props="false"` 以关闭绑定，或者使用函数指定需要绑定的数据。
+- **栅格布局**：展示了使用栅格布局的方式。可以使用 `label-col-flex` 属性指定标签的具体宽度。
+- **自动标签宽度**：设置 `auto-label-width` 开启自动标签宽度。仅在 `layout="horizontal"` 布局下生效。_* 目前仅在首次加载后生效。_
+- **验证表单**：展示了表单校验的使用方法。
+- **验证表单2**：展示了表单校验`rules`使用在`a-form`上的使用方法，以及可以直接校验`email`、`ip`、`url`
+- **自定义表单校验状态**：开启 `feedback` 可以让部分输入组件展示当前状态信息
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
+- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/data-entry/input-number.md

@@ -0,0 +1,102 @@
+---
+name: arco-vue-input-number
+description: "Arco Design Vue 数字输入框 InputNumber 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-input-number>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 数字输入框 InputNumber
+
+## 简介
+
+通过鼠标或者键盘输入范围内的标准数值。
+
+## 基本用法
+
+```vue
+<template>
+  <a-space direction="vertical" size="large">
+    <a-input-number v-model="value" :style="{width:'320px'}" placeholder="Please Enter" class="input-demo" :min="10" :max="100"/>
+    <a-input-number :style="{width:'320px'}" placeholder="Please Enter" class="input-demo" :min="10" :max="100"/>
+    <a-input-number :style="{width:'320px'}" placeholder="Please Enter" :default-value="500" class="input-demo" disabled/>
+  </a-space>
+</template>
+
+<script>
+export default {
+  data(){
+    return {
+      value:15
+    }
+
+  }
+}
+</script>
+```
+
+## API
+
+### `<input-number>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|model-value **(v-model)**|绑定值|`number`|`-`||
+|default-value|默认值（非受控模式）|`number`|`-`||
+|mode|模式（`embed`：按钮内嵌模式，`button`：左右按钮模式）|`'embed' \| 'button'`|`'embed'`||
+|precision|数字精度|`number`|`-`||
+|step|数字变化步长|`number`|`1`||
+|disabled|是否禁用|`boolean`|`false`||
+|error|是否为错误状态|`boolean`|`false`||
+|max|最大值|`number`|`Infinity`||
+|min|最小值|`number`|`-Infinity`||
+|formatter|定义输入框展示值|`func`|`-`||
+|parser|从 `formatter` 转换为数字，和 `formatter` 搭配使用|`func`|`-`||
+|placeholder|输入框提示文字|`string`|`-`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<input-number>` 事件
+
+|事件名|描述|参数|版本|
+|---|---|---|:---|
+|change|值发生改变时触发|value: ` number \| undefined `<br>ev: `Event`||
+|focus|输入框获取焦点时触发|ev: `FocusEvent`||
+|blur|输入框失去焦点时触发|ev: `FocusEvent`||
+|clear|用户点击清除按钮时触发|ev: `Event`|2.23.0|
+|input|输入时触发|value: ` number \| undefined `<br>inputValue: `string`<br>ev: `Event`|2.27.0|
+|keydown|按下键盘时触发|ev: `MouseEvent`|2.56.0|
+
+### `<input-number>` 方法
+
+|方法名|描述|参数|返回值|
+|---|---|---|---|
+|focus|使输入框获取焦点|-|-|
+|blur|使输入框失去焦点|-|-|
+
+### `<input-number>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|minus|数值减少图标|-|
+|plus|数值增加图标|-|
+|append|后置标签|-|
+|prepend|前置标签|-|
+|suffix|后缀|-|
+|prefix|前缀|-|
+
+## 常用模式
+
+- **按钮模式**：指定 `mode` 为 `button` 来使用带按钮的数字输入框。
+- **四种尺寸**：设置 `size` 可以使用四种尺寸（`mini`, `small`, `medium`, `large`）的数字输入框。高度分别对应`24px`、`28px`、`32px`、`36px`。
+- **精度和步长**：通过 `precision` 来设置数字精度。当 `precision` 小于 `step` 的小数位时，精度取 `step` 的小数个数。
+- **前缀与后缀**：通过指定 `prefix` 和 `suffix` 插槽来在输入框内添加前缀和后缀。
+- **自定义图标**：通过指定 `plus` 和 `minus` 插槽来修改数值增减操作的图标。
+- **格式化展示值**：通过 `formatter` 和 `parser` 配合使用可以定义输入框展示值。
+- **v-model 的触发事件**：数字输入框默认在 blur 或者按下 Enter 时会修改绑定的值，通过设置属性 model-event="input" 让组件在输入时修改绑定的值。注意：在此模式下，输入时的值会超出设置的 min/max，组件会在失焦时修正值的大小。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
+- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/data-entry/input-tag.md

@@ -0,0 +1,90 @@
+---
+name: arco-vue-input-tag
+description: "Arco Design Vue 标签输入框 InputTag 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-input-tag>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 标签输入框 InputTag
+
+## 简介
+
+标签输入框的基本用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-input-tag :default-value="['test']" :style="{width:'320px'}" placeholder="Please Enter" allow-clear/>
+</template>
+```
+
+## API
+
+### `<input-tag>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|model-value **(v-model)**|绑定值|`(string \| number \| TagData)[]`|`-`||
+|default-value|默认值（非受控状态）|`(string \| number \| TagData)[]`|`[]`||
+|input-value **(v-model)**|输入框的值|`string`|`-`||
+|default-input-value|输入框的默认值（非受控状态）|`string`|`''`||
+|placeholder|占位符|`string`|`-`||
+|disabled|是否禁用|`boolean`|`false`||
+|error|是否为错误状态|`boolean`|`false`||
+|readonly|是否为只读模式|`boolean`|`false`||
+|allow-clear|是否允许清空|`boolean`|`false`||
+|size|输入框的大小|`'mini' \| 'small' \| 'medium' \| 'large'`|`'medium'`||
+|max-tag-count|最多展示的标签个数，`0` 表示不限制|`number`|`0`||
+|retain-input-value|是否保留输入框的内容|`boolean \| { create?: boolean; blur?: boolean }`|`false`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<input-tag>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|值发生改变时触发|value: `(string \| number \| TagData)[]`<br>ev: `Event`|
+|input-value-change|输入值发生改变时触发|inputValue: `string`<br>ev: `Event`|
+|press-enter|按下回车键时触发|inputValue: `string`<br>ev: `KeyboardEvent`|
+|remove|点击标签的删除按钮时触发|removed: `string \| number`<br>ev: `Event`|
+|clear|点击清除按钮时触发|ev: `MouseEvent`|
+|focus|输入框获取焦点时触发|ev: `FocusEvent`|
+|blur|输入框失去焦点时触发|ev: `FocusEvent`|
+
+### `<input-tag>` 方法
+
+|方法名|描述|参数|返回值|
+|---|---|---|---|
+|focus|使输入框获取焦点|-|-|
+|blur|使输入框失去焦点|-|-|
+
+### `<input-tag>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|tag|输入框标签的显示内容|data: `TagData`|
+|prefix|前缀元素|-|
+|suffix|后缀元素|-|
+
+### TagData
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|value|标签值|`string \| number`|`-`|
+|label|标签内容|`string`|`-`|
+|closable|是否可关闭|`boolean`|`false`|
+|tagProps|标签属性|`TagProps`|`-`|
+
+## 常用模式
+
+- **输入框状态**：输入框有禁用、只读和错误三种状态。
+- **最多展示标签数量**：设置最多展示标签数量。
+- **输入框尺寸**：输入框分为 `mini`、`small`、`medium`、`large` 四种尺寸。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
+- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/data-entry/input.md

@@ -0,0 +1,120 @@
+---
+name: arco-vue-input
+description: "Arco Design Vue 输入框 Input 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-input>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 输入框 Input
+
+## 简介
+
+输入框的基本用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-space>
+    <a-input :style="{width:'320px'}" placeholder="Please enter something" allow-clear />
+    <a-input :style="{width:'320px'}" default-value="content" placeholder="Please enter something" allow-clear />
+  </a-space>
+</template>
+```
+
+## API
+
+### `<input>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|model-value **(v-model)**|绑定值|`string`|`-`||
+|default-value|默认值（非受控状态）|`string`|`''`||
+|size|输入框大小|`'mini' \| 'small' \| 'medium' \| 'large'`|`'medium'`||
+|allow-clear|是否允许清空输入框|`boolean`|`false`||
+|disabled|是否禁用|`boolean`|`false`||
+|readonly|是否为只读状态|`boolean`|`false`||
+|error|是否为错误状态|`boolean`|`false`||
+|placeholder|提示文字|`string`|`-`||
+|max-length|输入值的最大长度，errorOnly 属性在 2.12.0 版本添加|`number \| { length: number; errorOnly?: boolean }`|`0`||
+|show-word-limit|是否显示字数统计|`boolean`|`false`||
+|word-length|字符长度的计算方法|`(value: string) => number`|`-`||
+|word-slice|字符截取方法，同 wordLength 一起使用|`(value: string, maxLength: number) => string`|`-`|2.12.0|
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<input>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|input|用户输入时触发|value: `string`<br>ev: `Event`|
+|change|仅在输入框失焦或按下回车时触发|value: `string`<br>ev: `Event`|
+|press-enter|用户按下回车时触发|ev: `KeyboardEvent`|
+|clear|用户点击清除按钮时触发|ev: `MouseEvent`|
+|focus|输入框获取焦点时触发|ev: `FocusEvent`|
+|blur|输入框失去焦点时触发|ev: `FocusEvent`|
+
+### `<input>` 方法
+
+|方法名|描述|参数|返回值|
+|---|---|---|---|
+|focus|使输入框获取焦点|-|-|
+|blur|使输入框失去焦点|-|-|
+
+### `<input>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|append|后置标签|-|
+|prepend|前置标签|-|
+|suffix|后缀元素|-|
+|prefix|前缀元素|-|
+
+### `<input-password>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|visibility **(v-model)**|是否可见，受控属性|`boolean`|`-`|
+|default-visibility|默认是否可见，非受控|`boolean`|`true`|
+|invisible-button|是否显示可见按钮|`boolean`|`true`|
+
+### `<input-password>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|visibility-change|visibility 改变时触发|visible: `boolean`|
+
+### `<input-search>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|search-button|是否为后置按钮模式|`boolean`|`false`||
+|loading|是否为加载中状态|`boolean`|`false`||
+|disabled|是否禁用|`boolean`|`false`||
+|size|输入框大小|`'mini' \| 'small' \| 'medium' \| 'large'`|`'medium'`||
+|button-text|搜索按钮的文字，使用后会替换原本的图标|`string`|`-`|2.16.0|
+|button-props|搜索按钮的属性|`ButtonProps`|`-`||
+
+### `<input-search>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|search|单击搜索按钮时触发|value: `string`<br>ev: `MouseEvent`|
+
+## 常用模式
+
+- **输入框状态**：输入框可以设置禁用和错误状态。
+- **输入框尺寸**：输入框定义了四种默认尺寸 `mini, small, medium, large` ，分别为 `24px, 28px, 32px, 36px` 。
+- **前缀与后缀**：通过指定 `prefix` 和 `suffix` 插槽来在输入框内添加前缀和后缀。
+- **前置、后置标签**：通过指定 `prepend` 和 `append` 插槽在输入框前后添加元素。
+- **字数统计**：设置 `max-length` 可以限制最大字数，配合 `show-word-limit` 可以显示字数统计。
+- **输入框组合**：通过 `input-group` 可以组合使用输入框。
+- **搜索框**：带有搜索按钮的输入框，用于内容检索。
+- **自定义搜索按钮**：自定义搜索按钮的内容
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
+- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/data-entry/mention.md

@@ -0,0 +1,90 @@
+---
+name: arco-vue-mention
+description: "Arco Design Vue 提及 Mention 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-mention>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 提及 Mention
+
+## 简介
+
+用于在输入中提及某人或某事，常用于发布、聊天或评论功能。
+
+## 基本用法
+
+```vue
+<template>
+  <a-space direction="vertical" size="large" style="width: 100%">
+    <a-mention v-model="value" :data="['Bytedance', 'Bytedesign', 'Bytenumner']" placeholder="enter something" />
+    <a-mention v-model="text" :data="['Bytedance', 'Bytedesign', 'Bytenumner']" type="textarea" placeholder="enter something" />
+  </a-space>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const value = ref('');
+    const text = ref('');
+
+    return {
+      value,
+      text
+    }
+  }
+}
+</script>
+```
+
+## API
+
+### `<mention>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|model-value **(v-model)**|绑定值|`string`|`-`||
+|default-value|默认值（非受控状态）|`string`|`''`||
+|data|用于自动补全的数据|`(string \| number \| SelectOptionData \| SelectOptionGroup)[]`|`[]`||
+|prefix|触发自动补全的关键字|`string \| string[]`|`'@'`||
+|split|选中项的前后分隔符|`string`|`' '`||
+|type|输入框或文本域|`'input' \| 'textarea'`|`'input'`||
+|disabled|是否禁用|`boolean`|`false`||
+|allow-clear|是否允许清空输入框|`boolean`|`false`|2.23.0|
+
+### `<mention>` 事件
+
+|事件名|描述|参数|版本|
+|---|---|---|:---|
+|change|值发生改变时触发|value: `string`||
+|search|动态搜索时触发，2.47.0 版本增加 prefix 参数|value: `string`<br>prefix: `string`||
+|select|选择下拉选项时触发|value: `string \| number \| Record<string, any> \| undefined`||
+|clear|用户点击清除按钮时触发|-|2.23.0|
+|focus|文本框获取焦点时触发|ev: `FocusEvent`|2.42.0|
+|blur|文本框失去焦点时触发|ev: `FocusEvent`|2.42.0|
+
+### `<mention>` 方法
+
+|方法名|描述|参数|返回值|版本|
+|---|---|---|---|:---|
+|focus|使输入框获取焦点|-|-|2.24.0|
+|blur|使输入框失去焦点|-|-|2.24.0|
+
+### `<mention>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|option|选项内容|data: `OptionInfo`|2.13.0|
+
+## 常用模式
+
+- **基本使用**：用于在输入中提及某人或某事，常用于发布、聊天或评论功能。
+- **自定义触发字符**：指定 `prefix` 来自定义触发字符。默认为 `@`，可以自定义为任意字符。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
+- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/data-entry/radio.md

@@ -0,0 +1,98 @@
+---
+name: arco-vue-radio
+description: "Arco Design Vue 单选框 Radio 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-radio>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 单选框 Radio
+
+## 简介
+
+单选框的基本用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-space size="large">
+    <a-radio value="radio">Radio</a-radio>
+    <a-radio value="disabled radio" :default-checked="true" disabled>Disabled Radio</a-radio>
+  </a-space>
+</template>
+```
+
+## API
+
+### `<radio>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|model-value **(v-model)**|绑定值|`string \| number \| boolean`|`-`|
+|default-checked|默认是否选中（非受控状态）|`boolean`|`false`|
+|value|选项的 `value`|`string \| number \| boolean`|`true`|
+|type|单选的类型|`'radio' \| 'button'`|`'radio'`|
+|disabled|是否禁用|`boolean`|`false`|
+
+### `<radio>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|值改变时触发|value: ` string \| number \| boolean `<br>ev: `Event`|
+
+### `<radio>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|radio|自定义单选框|checked: `boolean`<br>disabled: `boolean`|2.18.0|
+
+### `<radio-group>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|model-value **(v-model)**|绑定值|`string \| number \| boolean`|`-`||
+|default-value|默认值（非受控状态）|`string \| number \| boolean`|`''`||
+|type|单选框组的类型|`'radio' \| 'button'`|`'radio'`||
+|size|单选框组的尺寸|`'mini' \| 'small' \| 'medium' \| 'large'`|`-`||
+|options|选项|`Array<string \| number \| RadioOption>`|`-`|2.27.0|
+|direction|单选框组的方向|`'horizontal' \| 'vertical'`|`'horizontal'`||
+|disabled|是否禁用|`boolean`|`false`||
+
+### `<radio-group>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|值改变时触发|value: ` string \| number \| boolean `|
+
+### `<radio-group>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|radio|自定义单选框|checked: `boolean`<br>disabled: `boolean`|2.27.0|
+|label|radio 文案内容|data: `RadioOption`|2.27.0|
+
+### RadioOption
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|label|文案|`RenderContent`|`-`|
+|value|选项的 `value`|`string \| number`|`-`|
+|disabled|是否禁用|`boolean`|`false`|
+
+## 常用模式
+
+- **受控**：通过 `v-model` (`model-value`) 属性控制是否选中
+- **单选框组**：通过 `<a-radio-group>` 组件展示单选框组。
+- **单选框组选项**：`a-radio-group` 通过 `options` 属性设置子元素
+- **单选框组方向**：通过设置 `direction="vertical"` 可以展示竖直的单选框组。
+- **按钮类型的单选框组**：通过指定 `type="button"` ，可以显示按钮类型的单选框组。
+- **按钮类型单选框组的尺寸**：按钮类型的单选框组分为 `mini`、`small`、`medium`、`large` 四种尺寸。
+- **布局**：使用 `<a-radio-group>` 传入 `<a-radio>`，配合 `<a-grid>` 组件实现灵活的布局。
+- **自定义单选框**：使用 #radio 插槽自定义复选框的展示
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
+- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/data-entry/rate.md

@@ -0,0 +1,66 @@
+---
+name: arco-vue-rate
+description: "Arco Design Vue 评分 Rate 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-rate>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 评分 Rate
+
+## 简介
+
+评分组件基本用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-rate/>
+</template>
+```
+
+## API
+
+### `<rate>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|count|评分的总数|`number`|`5`||
+|model-value **(v-model)**|绑定值|`number`|`-`||
+|default-value|默认值|`number`|`0`||
+|allow-half|是否允许半选|`boolean`|`false`||
+|allow-clear|是否允许清除|`boolean`|`false`||
+|grading|是否开启笑脸分级|`boolean`|`false`||
+|readonly|是否为只读状态|`boolean`|`false`||
+|disabled|是否禁用|`boolean`|`false`||
+|color|颜色|`string \| Record<string, string>`|`-`|2.18.0|
+
+### `<rate>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|值改变时触发|value: `number`|
+|hover-change|鼠标移动到数值上时触发|value: `number`|
+
+### `<rate>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|character|符号|index: `number`|
+
+## 常用模式
+
+- **半选**：指定 `allow-half` 来开启半选。
+- **自定义颜色**：通过 color 可以自定义颜色。另外可以通过对象形式自定义不同分值时的颜色。
+- **只读模式**：通过设置 `readonly` 属性让评分组件为只读状态。
+- **支持清除**：通过设置 `allow-clear` 来允许清除评分。
+- **自定义评分字符**：可以将星星替换为其他字符，比如表情、字母，数字，字体图标甚至中文。
+- **任意长度的评分**：通过指定 `count` 来指定任意长度的评分组件。
+- **笑脸分级**：通过 `grading` 使用笑脸分级。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
+- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/data-entry/select.md

@@ -0,0 +1,215 @@
+---
+name: arco-vue-select
+description: "Arco Design Vue 选择器 Select 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-select>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 选择器 Select
+
+## 简介
+
+选择器的基本用法。通过 `trigger-props` 属性自定义下拉框的属性，比如可以让下拉框自动适应最小宽度。
+
+## 基本用法
+
+```vue
+
+<template>
+  <a-space direction="vertical" size="large">
+    <a-select :style="{width:'320px'}" placeholder="Please select ...">
+      <a-option>Beijing</a-option>
+      <a-option>Shanghai</a-option>
+      <a-option>Guangzhou</a-option>
+      <a-option disabled>Disabled</a-option>
+    </a-select>
+    <a-select :style="{width:'320px'}" placeholder="Please select ...">
+      <a-option :value="true">是</a-option>
+      <a-option :value="false">否</a-option>
+    </a-select>
+    <a-select defaultValue="Beijing" :style="{width:'320px'}" placeholder="Please select ..." disabled>
+      <a-option>Beijing</a-option>
+      <a-option>Shanghai</a-option>
+      <a-option>Guangzhou</a-option>
+      <a-option disabled>Disabled</a-option>
+    </a-select>
+    <a-select v-model="value" :style="{width:'320px'}" placeholder="Please select ...">
+      <a-option v-for="item of data" :value="item" :label="item.label" />
+    </a-select>
+    <div>Select Value: {{ value }}</div>
+    <a-select :style="{width:'160px'}" placeholder="Select" :trigger-props="{ autoFitPopupMinWidth: true }">
+      <a-option>Beijing-Beijing-Beijing</a-option>
+      <a-option>Shanghai</a-option>
+      <a-option>Guangzhou</a-option>
+      <a-option disabled>Disabled</a-option>
+    </a-select>
+
+  </a-space>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const value = ref();
+    const data = [{
+      value: 'beijing',
+      label: 'Beijing',
+      other: 'extra'
+    }, {
+      value: 'shanghai',
+      label: 'Shanghai',
+      other: 'extra'
+    }, {
+      value: 'guangzhou',
+      label: 'Guangzhou',
+      other: 'extra'
+    }, {
+      value: 'chengdu',
+      label: 'Chengdu',
+      other: 'extra'
+    }]
+
+    return {
+      value,
+      data
+    }
+  },
+}
+</script>
+```
+
+## API
+
+### `<select>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|multiple|是否开启多选模式（多选模式默认开启搜索）|`boolean`|`false`||
+|model-value **(v-model)**|绑定值|`string\| number\| boolean\| Record<string, any>\| (string \| number \| boolean \| Record<string, any>)[]`|`-`||
+|default-value|默认值（非受控模式）|`string\| number\| boolean\| Record<string, unknown>\| (string \| number \| boolean \| Record<string, unknown>)[]`|`'' \| []`||
+|input-value **(v-model)**|输入框的值|`string`|`-`||
+|default-input-value|输入框的默认值（非受控模式）|`string`|`''`||
+|size|选择框的大小|`'mini' \| 'small' \| 'medium' \| 'large'`|`'medium'`||
+|placeholder|占位符|`string`|`-`||
+|loading|是否为加载中状态|`boolean`|`false`||
+|disabled|是否禁用|`boolean`|`false`||
+|error|是否为错误状态|`boolean`|`false`||
+|allow-clear|是否允许清空|`boolean`|`false`||
+|allow-search|是否允许搜索|`boolean \| { retainInputValue?: boolean }`|`false (single) \| true (multiple)`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<select>` 事件
+
+|事件名|描述|参数|版本|
+|---|---|---|:---|
+|change|值发生改变时触发|value: ` string \| number \| boolean \| Record<string, any> \| (string \| number \| boolean \| Record<string, any>)[] `||
+|input-value-change|输入框的值发生改变时触发|inputValue: `string`||
+|popup-visible-change|下拉框的显示状态改变时触发|visible: `boolean`||
+|clear|点击清除按钮时触发|-||
+|remove|点击标签的删除按钮时触发|removed: `string \| number \| boolean \| Record<string, any> \| undefined`||
+|search|用户搜索时触发|inputValue: `string`||
+|dropdown-scroll|下拉菜单发生滚动时触发|-||
+|dropdown-reach-bottom|下拉菜单滚动到底部时触发|-||
+|exceed-limit|多选超出限制时触发|value: `string \| number \| boolean \| Record<string, any> \| undefined`<br>ev: `Event`|2.18.0|
+
+### `<select>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|trigger|自定义触发元素|-|2.22.0|
+|prefix|前缀元素|-|2.22.0|
+|search-icon|选择框的搜索图标|-|2.16.0|
+|loading-icon|选择框的加载中图标|-|2.16.0|
+|arrow-icon|选择框的箭头图标|-|2.16.0|
+|footer|下拉框的页脚|-||
+|header|下拉框的页头|-|2.43.0|
+|label|选择框的显示内容|data: `SelectOptionData`||
+|option|选项内容|data: `SelectOptionData`||
+|empty|选项为空时的显示内容|-||
+
+### `<option>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|value|选项值（如不填，会从内容中获取）|`string\|number\|boolean\|object`|`-`||
+|label|选项标签（如不填，会从内容中获取）|`string`|`-`||
+|disabled|是否禁用|`boolean`|`false`||
+|tag-props|展示的标签属性|`TagProps`|`-`|2.8.0|
+|extra|额外数据。2.18.0 版本废弃，可使用对象形式的 value 扩展数据|`object`|`-`|2.10.0|
+|index|用于手动指定选项的 index|`number`|`-`|2.20.0|
+
+### `<optgroup>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|label|选项组的标题|`string`|`-`|
+
+### `<optgroup>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|label|选项组的标题|-|2.10.0|
+
+```ts
+/**
+ * @zh 选项
+ * @en Option
+ */
+type Option = string | number | SelectOptionData | SelectOptionGroup;
+
+/**
+ * @zh 筛选
+ * @en Filter
+ */
+type FilterOption = boolean | ((inputValue: string, option: SelectOptionData) => boolean);
+```
+
+### SelectOptionData
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|value|选项值|`string \| number \| boolean \| Record<string, unknown>`|`-`|
+|label|选项内容|`string`|`-`|
+|disabled|是否禁用|`boolean`|`false`|
+|tagProps|选项对应的多选标签的属性|`any`|`-`|
+|render|自定义渲染|`RenderFunction`|`-`|
+
+### SelectOptionGroup
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|isGroup|是否为选项组|`true`|`-`|
+|label|选项组标题|`string`|`-`|
+|options|选项组中的选项|`SelectOption[]`|`-`|
+
+### VirtualListProps
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|height|可视区域高度|`number \| string`|`-`||
+|threshold|开启虚拟滚动的元素数量阈值，当数据数量小于阈值时不会开启虚拟滚动。|`number`|`-`||
+|isStaticItemHeight|（已废除）元素高度是否是固定的。2.34.1 版本废除，请使用 `fixedSize`|`boolean`|`false`||
+|fixedSize|元素高度是否是固定的。|`boolean`|`false`|2.34.1|
+|estimatedSize|元素高度不固定时的预估高度。|`number`|`-`|2.34.1|
+|buffer|视口边界外提前挂载的元素数量。|`number`|`10`|2.34.1|
+
+## 常用模式
+
+- **允许清除**：通过设置 `allow-clear` ，显示清除按钮。
+- **多选选择器**：通过设置 `multiple` ，可以让选择器支持多选。此外通过 `max-tag-count` 可以设置最多显示的标签个数。
+- **选择框大小**：选择框分为 `mini`、`small`、`medium`、`large` 四种尺寸。
+- **加载中**：选择框和下拉菜单显示加载中状态。
+- **下拉菜单的页头**：自定义下拉菜单的页头
+- **下拉菜单的页脚**：自定义下拉菜单的页脚
+- **无边框模式**：设置 `bordered="false"` 开启无边框模式，常用于沉浸式使用。
+- **允许创建**：通过设置 `allow-create` ，让选择器可以创建选项中不存在的条目。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
+- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/data-entry/slider.md

@@ -0,0 +1,62 @@
+---
+name: arco-vue-slider
+description: "Arco Design Vue 滑动输入条 Slider 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-slider>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 滑动输入条 Slider
+
+## 简介
+
+滑动输入条的基本用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-slider :default-value="50" :style="{ width: '200px' }" />
+</template>
+```
+
+## API
+
+### `<slider>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|model-value **(v-model)**|绑定值|`number \| [number, number]`|`-`||
+|default-value|默认值（非受控状态）|`number \| [number, number]`|`0`||
+|step|滑动的步长|`number`|`1`||
+|min|滑动范围的最小值|`number`|`0`||
+|marks|设置显示的标签|`Record<number, string>`|`-`||
+|max|滑动范围的最大值|`number`|`100`||
+|direction|滑动输入条的方向|`Direction`|`'horizontal'`||
+|disabled|是否禁用|`boolean`|`false`||
+|show-ticks|是否显示刻度线|`boolean`|`false`||
+|show-input|是否显示输入框|`boolean`|`false`||
+|range|是否开启范围选择|`boolean`|`false`||
+|show-tooltip|是否显示tooltip|`boolean`|`true`|2.42.0|
+
+### `<slider>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|值改变时触发|value: `number \| [number, number]`|
+
+## 常用模式
+
+- **禁用状态**：禁用滑动输入条。
+- **设置步长**：通过 `step` 设置步长，默认步长为 1。建议设置能够被 `max-min` 整除的值，否则会出现可选最大值小于 `max` 的情况。当设置 `show-ticks` 时，显示步长刻度线。
+- **添加文本标签**：通过设置 `marks` 可以添加文本标签。
+- **范围选择**：通过设置 `range` 可开启范围选择，此时 `modelValue` 为数组。
+- **显示输入框**：当设置 `show-input` 时，将显示输入框。
+- **竖直滑动条**：设置 `direction="vertical"` ，将会显示竖直的滑动条。
+- **自定义提示**：通过设置 `format-tooltip` 可以自定义提示文字。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
+- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/data-entry/switch.md

@@ -0,0 +1,76 @@
+---
+name: arco-vue-switch
+description: "Arco Design Vue 开关 Switch 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-switch>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 开关 Switch
+
+## 简介
+
+开关的基本用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-switch />
+</template>
+```
+
+## API
+
+### `<switch>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|model-value **(v-model)**|绑定值|`string\|number\|boolean`|`-`||
+|default-checked|默认选中状态（非受控状态）|`boolean`|`false`||
+|disabled|是否禁用|`boolean`|`false`||
+|loading|是否为加载中状态|`boolean`|`false`||
+|type|开关的类型|`'circle' \| 'round' \| 'line'`|`'circle'`||
+|size|开关的大小|`'small' \| 'medium'`|`'medium'`||
+|checked-value|选中时的值|`string\|number\|boolean`|`true`|2.12.0|
+|unchecked-value|未选中时的值|`string\|number\|boolean`|`false`|2.12.0|
+|checked-color|选中时的开关颜色|`string`|`-`|2.12.0|
+|unchecked-color|未选中时的开关颜色|`string`|`-`|2.12.0|
+|before-change|switch 状态改变前的钩子， 返回 false 或者返回 Promise 且被 reject 则停止切换。|`(  newValue: string \| number \| boolean) => Promise<boolean \| void> \| boolean \| void`|`-`|2.37.0|
+|checked-text|打开状态时的文案（`type='line'`和`size='small'`时不生效）|`string`|`-`|2.45.0|
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<switch>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|值改变时触发|value: ` boolean \| string \| number `<br>ev: `Event`|
+|focus|组件获得焦点时触发|ev: `FocusEvent`|
+|blur|组件失去焦点时触发|ev: `FocusEvent`|
+
+### `<switch>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|checked-icon|打开状态时，按钮上的图标|-|
+|unchecked-icon|关闭状态时，按钮上的图标|-|
+|checked|打开状态时的文案（`type='line'`和`size='small'`时不生效）|-|
+|unchecked|关闭状态时的文案（`type='line'`和`size='small'`时不生效）|-|
+
+## 常用模式
+
+- **开关类型**：开关分为 `circle` - **圆形（默认）**、`round` - **圆角**、`line` - **线性**三种类型。
+- **开关尺寸**：开关分为 `small`、`medium` 两种尺寸。
+- **禁用状态**：禁用开关。
+- **自定义开关的颜色**：通过 `checked-color` 和 `unchecked-color` 可以自定义开关的颜色。
+- **自定义开关的值**：通过 `checked-value` 和 `unchecked-value` 可以自定义开关的值。
+- **切换拦截**：设置 `beforeChange` 函数，函数的返回值将用于判断是否阻止切换。
+- **加载中状态**：通过设置 `loading` 使开关处于加载中状态，此时开关不可点击。
+- **自定义文案**：自定义开关的打开/关闭状态的文字。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
+- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/data-entry/textarea.md

@@ -0,0 +1,70 @@
+---
+name: arco-vue-textarea
+description: "Arco Design Vue 文本域 Textarea 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-textarea>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 文本域 Textarea
+
+## 简介
+
+可以用于多行输入。
+
+## 基本用法
+
+```vue
+<template>
+  <a-textarea placeholder="Please enter something" allow-clear/>
+</template>
+```
+
+## API
+
+### `<textarea>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|model-value **(v-model)**|绑定值|`string`|`-`||
+|default-value|默认值（非受控状态）|`string`|`''`||
+|placeholder|提示文字|`string`|`-`||
+|disabled|是否禁用|`boolean`|`false`||
+|error|是否为错误状态|`boolean`|`false`||
+|max-length|输入值的最大长度，errorOnly 属性在 2.12.0 版本添加|`number \| { length: number; errorOnly?: boolean }`|`0`||
+|show-word-limit|是否显示字数统计|`boolean`|`false`||
+|allow-clear|是否允许清空文本域|`boolean`|`false`||
+|auto-size|是否让文本框自适应内容高度|`boolean \| { minRows?: number; maxRows?: number }`|`false`||
+|word-length|字符长度的计算方法|`(value: string) => number`|`-`||
+|word-slice|字符截取方法，同 wordLength 一起使用|`(value: string, maxLength: number) => string`|`-`|2.12.0|
+|textarea-attrs|透传给 textarea 的属性|`Record<string, any>`|`-`||
+
+### `<textarea>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|input|用户输入时触发|value: `string`<br>ev: `Event`|
+|change|仅在文本框失焦时触发|value: `string`<br>ev: `Event`|
+|clear|点击清除按钮时触发|ev: `MouseEvent`|
+|focus|文本框获取焦点时触发|ev: `FocusEvent`|
+|blur|文本框失去焦点时触发|ev: `FocusEvent`|
+
+### `<textarea>` 方法
+
+|方法名|描述|参数|返回值|版本|
+|---|---|---|---|:---|
+|focus|使输入框获取焦点|-|-|2.24.0|
+|blur|使输入框失去焦点|-|-|2.24.0|
+
+## 常用模式
+
+- **基本使用**：可以用于多行输入。
+- **文本域状态**：文本域可以设置禁用和错误状态。
+- **字数统计**：设置 `max-length` 可以限制最大字数，配合 `show-word-limit` 可以显示字数统计。
+- **自适应高度**：通过设置 `auto-size`，可以让文本框自适应输入内容。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
+- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/data-entry/time-picker.md

@@ -0,0 +1,142 @@
+---
+name: arco-vue-time-picker
+description: "Arco Design Vue 时间选择器 TimePicker 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-time-picker>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 时间选择器 TimePicker
+
+## 简介
+
+时间输入器的基础用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-time-picker style="width: 194px;" />
+</template>
+```
+
+## API
+
+### `<time-picker>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|type|选择器类型|`'time' \| 'time-range'`|`'time'`|
+|model-value **(v-model)**|绑定值|`string \| number \| Date \| Array<string \| number \| Date>`|`-`|
+|default-value|默认值|`string \| number \| Date \| Array<string \| number \| Date>`|`-`|
+|disabled|是否禁用|`boolean`|`false`|
+|allow-clear|是否允许清除|`boolean`|`true`|
+|readonly|是否为只读模式|`boolean`|`false`|
+|error|是否为错误状态|`boolean`|`false`|
+|format|展示日期的格式，参考[字符串解析格式](#字符串解析格式)|`string`|`'HH:mm:ss'`|
+|placeholder|提示文案|`string \| string[]`|`-`|
+|size|输入框尺寸|`'mini' \| 'small' \| 'medium' \| 'large'`|`'medium'`|
+|popup-container|弹出框的挂载容器|`string \| HTMLElement`|`-`|
+|use12-hours|12 小时制|`boolean`|`false`|
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<time-picker>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|组件值发生改变|timeString: `string \| Array<string \| undefined> \| undefined`<br>time: `date \| Array<date \| undefined> \| undefined`|
+|select|选择时间但未触发组件值变化|timeString: `string \| Array<string \| undefined>`<br>time: `Date \| Array<Date \| undefined>`|
+|clear|点击清除按钮|-|
+|popup-visible-change|弹出框展开和收起|visible: `boolean`|
+
+### `<time-picker>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|prefix|输入框前缀|-|2.41.0|
+|suffix-icon|输入框后缀图标|-||
+|extra|额外的页脚|-||
+
+### 字符串解析格式
+
+格式|输出|描述
+
+---|---|---:
+
+`YY`|21|两位数的年份
+
+`YYYY`|2021|四位数年份
+
+`M`|1-12|月份，从 1 开始
+
+`MM`|01-12|月份，两位数
+
+`MMM`|Jan-Dec|缩写的月份名称
+
+`MMMM`|January-December|完整的月份名称
+
+`D`|1-31|月份里的一天
+
+`DD`|01-31|月份里的一天，两位数
+
+`d`|0-6|一周中的一天，星期天是 0
+
+`dd`|Su-Sa|最简写的一周中一天的名称
+
+`ddd`|Sun-Sat|简写的一周中一天的名称
+
+`dddd`|Sunday-Saturday|一周中一天的名称
+
+`H`|0-23|小时
+
+`HH`|00-23|小时，两位数
+
+`h`|1-12|小时, 12 小时制
+
+`hh`|01-12|小时, 12 小时制, 两位数
+
+`m`|0-59|分钟
+
+`mm`|00-59|分钟，两位数
+
+`s`|0-59|秒
+
+`ss`|00-59|秒，两位数
+
+`S`|0-9|数百毫秒，一位数
+
+`SS`|00-99|几十毫秒，两位数
+
+`SSS`|000-999|毫秒，三位数字
+
+`Z`|-5:00|UTC 的偏移量
+
+`ZZ`|-0500|UTC 的偏移量，数字前面加上 0
+
+`A`|AM PM|-
+
+`a`|am pm|-
+
+`Do`|1st... 3st|带序号的月份中的某天
+
+`X`|1410715640.579|Unix 时间戳
+
+`x`|1410715640579|Unix 毫秒时间戳
+
+## 常用模式
+
+- **范围选择器**：时间输入器的范围选择器。
+- **双向绑定**：支持 `v-model` 进行数据的双向绑定。
+- **默认值**：只有默认值的情况，可通过 `defaultValue` 传递。
+- **尺寸**：有四种尺寸可供选择。
+- **禁用**：禁用状态。
+- **禁用部分时间选项**：通过设置 `disabledHours` `disabledMinutes` `disabledSeconds`，可以禁用 时 / 分 / 秒的部分选项。
+- **跳过确认**：跳过确认步骤，直接点击选择时间。
+- **定制格式**：通过设置 `format`，可以定制需要显示的时、分、秒。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
+- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/data-entry/transfer.md

@@ -0,0 +1,103 @@
+---
+name: arco-vue-transfer
+description: "Arco Design Vue 数据穿梭框 Transfer 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-transfer>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 数据穿梭框 Transfer
+
+## 简介
+
+数据穿梭框的基本用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-transfer :data="data" :default-value="value" />
+</template>
+
+<script>
+export default {
+  setup() {
+    const data = Array(8).fill(undefined).map((_, index) => ({
+      value: `option${index + 1}`,
+      label: `Option ${index + 1}`
+    }));
+    const value = ['option1', 'option3', 'option5'];
+
+    return {
+      data,
+      value
+    }
+  },
+}
+</script>
+```
+
+## API
+
+### `<transfer>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|data|穿梭框的数据|`TransferItem[]`|`[]`||
+|model-value **(v-model)**|目标选择框中的值|`string[]`|`-`||
+|default-value|目标选择框中默认的值（非受控状态）|`string[]`|`[]`||
+|selected **(v-model)**|选中的选项值|`string[]`|`-`||
+|default-selected|默认选中的选项值（非受控状态）|`string[]`|`[]`||
+|disabled|是否禁用|`boolean`|`false`||
+|simple|是否开启简单模式（点击选项即移动）|`boolean`|`false`||
+|one-way|是否开启单向模式（仅可移动到目标选择框）|`boolean`|`false`||
+|show-search|是否显示搜索框|`boolean`|`false`||
+|show-select-all|是否展示全选勾选框|`boolean`|`true`|2.39.0|
+|title|源选择框和目标选择框的标题|`string[]`|`['Source', 'Target']`||
+|source-input-search-props|源选择框的搜索框配置|`object`|`-`|2.51.1|
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<transfer>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|目标选择框的值改变时触发|value: `string[]`|
+|select|选中的值改变时触发|selected: `string[]`|
+|search|用户搜索时触发|value: `string`<br>type: `'target'\|'source'`|
+
+### `<transfer>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|source|源面板|data: `TransferItem[]`<br>selectedKeys: `string[]`<br>onSelect: `(value: string[]) => void`|2.39.0|
+|source-title|源标题插槽|countTotal: `number`<br>countSelected: `number`<br>searchValue: `string`<br>checked: `boolean`<br>indeterminate: `boolean`<br>onSelectAllChange: `(checked:boolean) => void`<br>onClear: `() => void`|2.45.0|
+|to-target-icon|移至目标图标插槽|-|2.52.0|
+|to-source-icon|移至源图标插槽|-|2.52.0|
+|target|目标面板|data: `TransferItem[]`<br>selectedKeys: `string[]`<br>onSelect: `(value: string[]) => void`|2.39.0|
+|target-title|目标标题插槽|countTotal: `number`<br>countSelected: `number`<br>searchValue: `string`<br>checked: `boolean`<br>indeterminate: `boolean`<br>onSelectAllChange: `(checked:boolean) => void`<br>onClear: `() => void`|2.45.0|
+|item|选项|value: `string`<br>label: `string`||
+
+### TransferItem
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|value|选项的值|`string`|`-`|
+|label|选项的标签|`string`|`-`|
+|disabled|是否禁用|`boolean`|`false`|
+
+## 常用模式
+
+- **基本使用**：数据穿梭框的基本用法。
+- **搜索**：通过设置 `show-search` 来使用带搜索框的穿梭框，可以自定义搜索函数。
+- **单向**：通过设置 `one-way` ，使用单向模式的穿梭框。
+- **自定义选项渲染**：通过 `item` 插槽自定义选项的渲染内容。
+- **简单模式**：通过设置 `simple` 来开启简单模式，点击选项即可移动。
+- **树型穿梭框**：通过穿梭框自定义接口可以实现树型穿梭框。
+- **自定义标题栏**：通过 `source-title` ,`target-title` 插槽自定义标题栏的渲染内容
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
+- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/data-entry/tree-select.md

@@ -0,0 +1,131 @@
+---
+name: arco-vue-tree-select
+description: "Arco Design Vue 树选择 TreeSelect 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-tree-select>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 树选择 TreeSelect
+
+## 简介
+
+最简单的用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-tree-select
+    :data="treeData"
+    placeholder="Please select ..."
+    style="width: 300px"
+  ></a-tree-select>
+</template>
+<script>
+  import { h } from 'vue';
+  import { IconCalendar } from '@arco-design/web-vue/es/icon';
+
+  export default {
+    setup() {
+      return {
+        treeData,
+      };
+    },
+  };
+
+  const treeData = [
+    {
+      key: 'node1',
+      icon: () => h(IconCalendar),
+      title: 'Trunk',
+      disabled: true,
+      children: [
+        {
+          key: 'node2',
+          title: 'Leaf',
+        },
+      ],
+    },
+    {
+      key: 'node3',
+      title: 'Trunk2',
+      icon: () => h(IconCalendar),
+      children: [
+        {
+          key: 'node4',
+          title: 'Leaf',
+        },
+        {
+          key: 'node5',
+          title: 'Leaf',
+        },
+      ],
+    },
+  ];
+</script>
+```
+
+## API
+
+### `<tree-select>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|disabled|是否禁用|`boolean`|`false`||
+|loading|是否为加载中状态|`boolean`|`false`||
+|error|是否为错误状态|`boolean`|`false`||
+|size|选择框的大小|`'mini' \| 'small' \| 'medium' \| 'large'`|`'medium'`||
+|border|是否显示边框|`boolean`|`true`||
+|allow-search|是否允许搜索|`boolean \| { retainInputValue?: boolean }`|`false (single) \| true (multiple)`||
+|allow-clear|是否允许清除|`boolean`|`false`||
+|placeholder|提示文案|`string`|`-`||
+|max-tag-count|最多显示的标签数量，仅在多选模式有效|`number`|`-`||
+|multiple|是否支持多选|`boolean`|`false`||
+|default-value|默认值|`string \| number \| Array<string \| number> \| LabelValue \| LabelValue[]`|`-`||
+|model-value **(v-model)**|绑定值|`string \| number \| Array<string \| number> \| LabelValue \| LabelValue[]`|`-`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<tree-select>` 事件
+
+|事件名|描述|参数|版本|
+|---|---|---|:---|
+|change|值改变时触发|value: `string \| number \| LabelValue \| Array<string \| number> \| LabelValue[] \| undefined`||
+|popup-visible-change|下拉框显示状态改变时触发|visible: `boolean`||
+|search|搜索值变化时触发|searchKey: `string`||
+|clear|点击清除时触发|-||
+|input-value-change|输入框的值发生改变时触发|inputValue: `string`|2.55.0|
+
+### `<tree-select>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|trigger|自定义触发元素|-||
+|prefix|前缀|-||
+|label|自定义选择框显示|data: `mixed`||
+|header|自定义下拉框页头|-||
+|loader|定制加载中显示的内容|-||
+|empty|定制空数据展示|-||
+|footer|自定义下拉框页脚|-||
+|tree-slot-extra|定制 tree 组件的渲染额外节点内容|-||
+|tree-slot-title|定制 tree 组件的节点标题|title: `string`||
+|tree-slot-icon|定制 tree 组件的节点图标|node: `TreeNodeData`|2.18.0|
+|tree-slot-switcher-icon|定制 tree 组件的 switcher 图标|-||
+
+## 常用模式
+
+- **设置 value 格式**：`labelInValue` 为 `true` 时，`value` 格式为： `{ label: string, value: string }`。
+- **双向绑定**：选中值支持双向绑定。
+- **动态加载**：可以通过 `loadMore` 进行动态加载。此时可设置 `isLeaf` 来标示叶子节点。
+- **搜索**：设置 `:allow-search="true"` 启用搜索功能。动态加载时候只能在已加载数据中进行搜索。默认的关键字搜索是从`value`字段匹配。也可以传入 `filterTreeNode`自定义过滤方式。
+- **远程搜索**：监听 `search` 事件，在事件处理函数中获取数据并更新 `treeData`。自定义搜索逻辑时，建议关闭内部过滤逻辑（`:disable-filter="true"`），以免影响自定义结果。
+- **不同尺寸**：设置 `size` 可以使用四种尺寸（small, default, large, huge）的选择器。高度分别对应 24px、28px、32px、36px。
+- **下拉框的页头和页脚**：自定义树选择下拉框的页头和页脚
+- **自定义触发元素**：自定义触发元素。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
+- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/data-entry/upload.md

@@ -0,0 +1,147 @@
+---
+name: arco-vue-upload
+description: "Arco Design Vue 上传 Upload 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-upload>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 上传 Upload
+
+## 简介
+
+上传组件的基本用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-space direction="vertical" :style="{ width: '100%' }">
+    <a-upload action="/" />
+    <a-upload action="/" disabled style="margin-top: 40px;"/>
+  </a-space>
+</template>
+```
+
+## API
+
+### `<upload>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|file-list **(v-model)**|文件列表|`FileItem[]`|`-`||
+|default-file-list|默认的文件列表（非受控状态）|`FileItem[]`|`[]`||
+|accept|接收的上传文件类型，具体参考 [HTML标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#htmlattrdefaccept "_blank")|`string`|`-`||
+|action|上传的URL|`string`|`-`||
+|disabled|是否禁用|`boolean`|`false`||
+|multiple|是否支持多文件上传|`boolean`|`false`||
+|directory|是否支持文件夹上传（需要浏览器支持）|`boolean`|`false`||
+|draggable|是否支持拖拽上传|`boolean`|`false`||
+|tip|提示文字|`string`|`-`||
+|headers|上传请求附加的头信息|`Record<string, string>`|`-`||
+|data|上传请求附加的数据|`Record<string, string \| Blob>\| ((fileItem: FileItem) => Record<string, string \| Blob>)`|`-`||
+|name|上传的文件名|`string \| ((fileItem: FileItem) => string)`|`-`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<upload>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|exceed-limit|上传的文件超出限制后触发|fileList: `FileItem[]`<br>files: `File[]`|
+|change|上传的文件状态发生改变时触发|fileList: `FileItem[]`<br>fileItem: `fileItem`|
+|progress|上传中的文件进度改变时触发|fileItem: `fileItem`<br>ev: `ProgressEvent`|
+|preview|点击图片预览时的触发|fileItem: `FileItem`|
+|success|上传成功时触发|fileItem: `FileItem`|
+|error|上传失败时触发|fileItem: `FileItem`|
+
+### `<upload>` 方法
+
+|方法名|描述|参数|返回值|版本|
+|---|---|---|---|:---|
+|submit|上传文件（已经初始化完成的文件）|fileItem: `FileItem`|-||
+|abort|中止上传|fileItem: `FileItem`|-||
+|updateFile|更新文件|id: `string`<br>file: `File`|-||
+|upload|上传文件|files: `File[]`|-|2.41.0|
+
+### `<upload>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|extra-button|上传列表额外按钮|fileItem: `FileItem`|2.43.0|
+|image|自定义图片|fileItem: `FileItem`|2.23.0|
+|file-name|文件名称|-|2.23.0|
+|file-icon|文件图标|-|2.23.0|
+|remove-icon|删除图标|-|2.23.0|
+|preview-icon|预览图标|-|2.23.0|
+|cancel-icon|取消图标|-|2.23.0|
+|start-icon|开始图标|-|2.23.0|
+|error-icon|失败图标|-|2.23.0|
+|success-icon|成功图标|-|2.23.0|
+|retry-icon|重试图标|-|2.23.0|
+|upload-button|上传按钮|-||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### FileItem
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|uid|当前上传文件的唯一标示|`string`|`-`|
+|status|当前上传文件的状态|`FileStatus`|`-`|
+|file|文件对象|`File`|`-`|
+|percent|上传进度百分比|`number`|`-`|
+|response|当前文件上传请求返回的响应|`any`|`-`|
+|url|文件地址|`string`|`-`|
+|name|文件名|`string`|`-`|
+
+### CustomIcon
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|startIcon|开始图标|`RenderFunction`|`-`|
+|cancelIcon|取消图标|`RenderFunction`|`-`|
+|retryIcon|重试图标|`RenderFunction`|`-`|
+|successIcon|成功图标|`RenderFunction`|`-`|
+|errorIcon|失败图标|`RenderFunction`|`-`|
+|removeIcon|移除图标|`RenderFunction`|`-`|
+|previewIcon|预览图标|`RenderFunction`|`-`|
+|fileIcon|文件图标|`(fileItem: FileItem) => VNode`|`-`|
+|fileName|文件名|`(fileItem: FileItem) => string \| VNode`|`-`|
+
+### RequestOption
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|action|上传的URL|`string`|`-`|
+|headers|请求报文的头信息|`Record<string, string>`|`-`|
+|name|上传文件的文件名|`string \| ((fileItem: FileItem) => string)`|`-`|
+|fileItem|上传文件|`FileItem`|`-`|
+|data|附加的请求信息|`Record<string, string \| Blob>    \| ((fileItem: FileItem) => Record<string, string \| Blob>)`|`-`|
+|withCredentials|是否携带cookie信息|`boolean`|`false`|
+|onProgress|更新当前文件的上传进度。percent: 当前上传进度百分比|`(percent: number, event?: ProgressEvent) => void`|`-`|
+|onSuccess|上传成功后，调用onSuccess方法，传入的response参数将会附加到当前上传文件的response字段上|`(response?: any) => void`|`-`|
+|onError|上传失败后，调用onError方法，传入的response参数将会附加到当前上传文件的response字段上|`(response?: any) => void`|`-`|
+
+### UploadRequest
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|abort|终止上传|`() => void`|`-`|
+
+## 常用模式
+
+- **基本使用**：上传组件的基本用法。
+- **用户头像上传**：点击上传用户头像，可使用 beforeUpload 限制用户上传的图片格式和大小。
+- **已上传的文件列表**：可以指定默认的已上传文件列表。
+- **照片墙**：通过设置 `list-type="picture-card"` 开启照片墙模式。
+- **拖拽上传**：通过设置 `draggable` 开启对拖拽的支持。
+- **图标列表样式**：通过设置 `list-type="picture"` 开启图片列表样式
+- **手动上传**：设置 `auto-upload` 为 `false` 时候，可以通过调用 `submit` 方法进行手动上传。
+- **上传前校验**：`beforeUpload` 会在每一个文件上传之前执行。如果返回 `false` 或者` Promise.reject`， 那么将会取消当前文件的上传。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
+- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/data-entry/verification-code.md

@@ -0,0 +1,69 @@
+---
+name: arco-vue-verification-code
+description: "Arco Design Vue 验证码输入 VerificationCode 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-verification-code>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 验证码输入 VerificationCode
+
+## 简介
+
+验证码输入框的基本用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-verification-code v-model="value" style="width: 300px" @finish="onFinish" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { Message} from '@arco-design/web-vue';
+
+const value = ref('654321');
+const onFinish = (value) => Message.info(`Verification code: ${value}`);
+</script>
+```
+
+## API
+
+### `<verification-code>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|model-value **(v-model)**|绑定值|`string`|`-`|
+|default-value|默认值（非受控状态）|`string`|`''`|
+|length|验证码的长度，根据长度渲染对应个数的输入框|`number`|`6`|
+|size|输入框大小|`'mini' \| 'small' \| 'medium' \| 'large'`|`'medium'`|
+|disabled|是否禁用|`boolean`|`false`|
+|masked|是否密码模式|`boolean`|`false`|
+|readonly|只读|`boolean`|`false`|
+|error|是否为错误状态|`boolean`|`false`|
+|separator|分隔符。可在不同索引的输入框后自定义渲染分隔符|`(index: number, character: string) => VNode`|`-`|
+|formatter|格式化函数，当用户输入值改变时触发|`(inputValue: string, index: number, value: string) => string \| boolean`|`-`|
+
+### `<verification-code>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|值发生改变时触发|value: ` string `|
+|finish|填充完成时触发|value: ` string `|
+|input|输入时触发|inputValue: ` string `<br>index: ` number `<br>ev: `Event`|
+
+## 常用模式
+
+- **基本使用**：验证码输入框的基本用法。
+- **不同状态**：禁用状态、只读状态、错误状态。
+- **密码模式**：指定 `masked = true`可开启密码模式
+- **自定义分隔符**：指定 `separator` 可以自定义渲染分隔符。
+- **配合表单使用**：配合表单使用实现校验。
+- **格式化输入**：通过 `formatter` 校验输入。此外，可以返回非布尔类型来将用户输入的字符串为特定的格式。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
+- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/feedback/alert.md

@@ -0,0 +1,66 @@
+---
+name: arco-vue-alert
+description: "Arco Design Vue 警告提示 Alert 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-alert>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 警告提示 Alert
+
+## 简介
+
+展现需要关注的信息，适用于简短的警告提示。
+
+## 基本用法
+
+```vue
+<template>
+  <a-alert>This is an info alert.</a-alert>
+</template>
+```
+
+## API
+
+### `<alert>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|type|警告提示的类型。2.41.0 新增 `normal` 类型|`info \| success \| warning \| error \| normal`|`'info'`|
+|show-icon|是否展示图标|`boolean`|`true`|
+|closable|是否展示关闭按钮|`boolean`|`false`|
+|title|警告提示的标题|`string`|`-`|
+|banner|是否作为顶部公告使用（去除边框和圆角）|`boolean`|`false`|
+|center|内容是否居中显示|`boolean`|`false`|
+
+### `<alert>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|close|点击关闭按钮时触发|ev: `MouseEvent`|
+|after-close|关闭动画结束后触发|-|
+
+### `<alert>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|icon|图标|-||
+|title|标题|-||
+|action|操作项|-||
+|close-element|关闭元素|-|2.36.0|
+
+## 常用模式
+
+- **提示类型**：警告提示有 `info`、`success`、`warning`、`error` 四种类型。2.41.0 版本新增 `normal` 类型，此类型下默认不展示图标。
+- **提示标题**：通过设置 `title` 可以给警告提示添加标题。
+- **可关闭**：通过设置 `closable`，可开启关闭按钮。
+- **自定义关闭元素**：指定 `close-element` slot，自定义关闭元素。
+- **隐藏图标**：通过设置 `:show-icon="false"` 来隐藏图标。
+- **操作项**：通过 `#action` 插槽自定义操作按钮
+- **顶部公告**：通过设置 `banner`，可将警告提示作为顶部公告使用（去除边框和圆角）。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 弹窗、抽屉、确认框等显隐状态使用 `v-model:visible` 或组件提供的方法统一管理。
+- 异步操作要配合 `loading`、禁用态或全局反馈，避免重复提交。

.agents/skills/arco-design-vue/references/components/feedback/drawer.md

@@ -0,0 +1,160 @@
+---
+name: arco-vue-drawer
+description: "Arco Design Vue 抽屉 Drawer 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-drawer>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 抽屉 Drawer
+
+## 简介
+
+点击触发按钮抽屉从右侧滑出，点击遮罩区关闭。
+
+## 基本用法
+
+```vue
+<template>
+  <a-button type="primary" @click="handleClick">Open Drawer</a-button>
+  <a-drawer :width="340" :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose>
+    <template #title>
+      Title
+    </template>
+    <div>You can customize modal body text by the current situation. This modal will be closed immediately once you
+      press the OK button.
+    </div>
+  </a-drawer>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const visible = ref(false);
+
+    const handleClick = () => {
+      visible.value = true;
+    };
+    const handleOk = () => {
+      visible.value = false;
+    };
+    const handleCancel = () => {
+      visible.value = false;
+    }
+
+    return {
+      visible,
+      handleClick,
+      handleOk,
+      handleCancel
+    }
+  },
+};
+</script>
+```
+
+## API
+
+### `<drawer>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|visible **(v-model)**|抽屉是否可见|`boolean`|`false`||
+|default-visible|抽屉默认是否可见（非受控模式）|`boolean`|`false`||
+|placement|抽屉放置的位置|`'top' \| 'right' \| 'bottom' \| 'left'`|`'right'`||
+|title|标题|`string`|`-`||
+|mask|是否显示遮罩层|`boolean`|`true`||
+|mask-closable|点击遮罩层是否可以关闭|`boolean`|`true`||
+|closable|是否展示关闭按钮|`boolean`|`true`||
+|ok-text|确认按钮的内容|`string`|`-`||
+|cancel-text|取消按钮的内容|`string`|`-`||
+|ok-loading|确认按钮是否为加载中状态|`boolean`|`false`||
+|ok-button-props|确认按钮的Props|`ButtonProps`|`-`|2.9.0|
+|cancel-button-props|取消按钮的Props|`ButtonProps`|`-`|2.9.0|
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<drawer>` 事件
+
+|事件名|描述|参数|版本|
+|---|---|---|:---|
+|ok|点击确定按钮时触发|ev: `MouseEvent`||
+|cancel|点击取消、关闭按钮时触发|ev: `MouseEvent \| KeyboardEvent`||
+|open|抽屉打开后（动画结束）触发|-||
+|close|抽屉关闭后（动画结束）触发|-||
+|before-open|对话框打开前触发|-|2.43.0|
+|before-close|对话框关闭前触发|-|2.43.0|
+
+### `<drawer>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|header|页眉|-|2.33.0|
+|title|标题|-||
+|footer|页脚|-||
+
+### `<drawer>` 全局方法
+
+Drawer 提供的全局方法，可以通过以下三种方法使用：
+
+1. 通过 `this.$drawer` 调用
+
+2. 在 Composition API 中，通过 `getCurrentInstance().appContext.config.globalProperties.$drawer` 调用
+
+3. 导入 Drawer，通过 Drawer 本身调用
+
+```ts
+import { createApp } from 'vue'
+import { Drawer } from '@arco-design/web-vue';
+
+const app = createApp(App);
+Drawer._context = app._context;
+```
+
+### DrawerConfig
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|placement|抽屉放置的位置|`'top' \| 'right' \| 'bottom' \| 'left'`|`'right'`||
+|title|标题|`RenderContent`|`-`||
+|content|内容|`RenderContent`|`-`||
+|mask|是否显示遮罩层|`boolean`|`true`||
+|maskClosable|点击遮罩层是否可以关闭|`boolean`|`true`||
+|closable|是否展示关闭按钮|`boolean`|`true`||
+|okText|确认按钮的内容|`string`|`-`||
+|cancelText|取消按钮的内容|`string`|`-`||
+|okLoading|确认按钮是否为加载中状态|`boolean`|`false`||
+|okButtonProps|确认按钮的Props|`ButtonProps`|`-`|2.9.0|
+|cancelButtonProps|取消按钮的Props|`ButtonProps`|`-`|2.9.0|
+|width|抽屉的宽度（仅在placement为right,left时可用）|`number \| string`|`250`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### DrawerReturn
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|close|关闭抽屉|`() => void`|`-`||
+|update|更新抽屉|`(config: DrawerUpdateConfig) => void`|`-`|2.43.2|
+
+### DrawerMethod
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|open|打开抽屉|`(config: DrawerConfig, appContext?: AppContext) => DrawerReturn`|`-`|
+
+## 常用模式
+
+- **抽屉位置**：自定义位置，点击触发按钮抽屉从相应的位置滑出。
+- **自定义节点**：通过插槽自定义内容，或者设置相应属性来控制显示或隐藏。
+- **嵌套抽屉**：在抽屉内打开新的抽屉。
+- **挂载位置**：通过 `popup-container` 可以设置弹出层节点的挂载位置
+- **函数调用**：通过函数的方式使用抽屉。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 弹窗、抽屉、确认框等显隐状态使用 `v-model:visible` 或组件提供的方法统一管理。
+- 异步操作要配合 `loading`、禁用态或全局反馈，避免重复提交。

.agents/skills/arco-design-vue/references/components/feedback/message.md

@@ -0,0 +1,97 @@
+---
+name: arco-vue-message
+description: "Arco Design Vue 全局提示 Message 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-message>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 全局提示 Message
+
+## 简介
+
+全局提示的基本用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-button @click="handleClick">Info Message</a-button>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick() {
+      this.$message.info('This is an info message')
+    }
+  }
+};
+</script>
+```
+
+## API
+
+### `Message` 全局方法
+
+Message提供的全局方法，可以通过以下三种方法使用：
+
+1. 通过this.$message调用
+
+2. 在Composition API中，通过getCurrentInstance().appContext.config.globalProperties.$message调用
+
+3. 导入Message，通过Message本身调用
+
+```ts
+import { createApp } from 'vue'
+import { Message } from '@arco-design/web-vue';
+
+const app = createApp(App);
+Message._context = app._context;
+```
+
+### MessageMethod
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|info|显示信息提示|`(    config: string \| MessageConfig,    appContext?: AppContext  ) => MessageReturn`|`-`||
+|success|显示成功提示|`(    config: string \| MessageConfig,    appContext?: AppContext  ) => MessageReturn`|`-`||
+|warning|显示警告提示|`(    config: string \| MessageConfig,    appContext?: AppContext  ) => MessageReturn`|`-`||
+|error|显示错误提示|`(    config: string \| MessageConfig,    appContext?: AppContext  ) => MessageReturn`|`-`||
+|loading|显示加载中提示|`(    config: string \| MessageConfig,    appContext?: AppContext  ) => MessageReturn`|`-`||
+|normal|显示提示|`(    config: string \| MessageConfig,    appContext?: AppContext  ) => MessageReturn`|`-`|2.41.0|
+|clear|清空全部提示|`(position?: MessagePosition) => void`|`-`||
+
+### MessageConfig
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|content|内容|`RenderContent`|`-`||
+|id|唯一id|`string`|`-`||
+|icon|消息的图标|`RenderFunction`|`-`||
+|position|消息的位置|`'top'\|'bottom'`|`-`||
+|showIcon|是否显示图标|`boolean`|`false`||
+|closable|是否显示关闭按钮|`boolean`|`false`||
+|duration|消息显示的持续时间|`number`|`-`||
+|onClose|关闭时的回调函数|`(id: number \| string) => void`|`-`||
+|resetOnHover|设置鼠标移入后不会自动关闭|`boolean`|`false`|2.39.0|
+
+### MessageReturn
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|close|关闭当前消息|`() => void`|`-`|
+
+## 常用模式
+
+- **消息类型**：全局提示有 6 种不同的类型，分别为：`info`, `success`, `warning`, `error`, `loading`。2.41.0 版本增加 `normal` 类型，此类型下默认没有图标。
+- **自定义图标**：设置 `icon` 来自定义图标。
+- **全局提示的位置**：全局提示有 2 种不同的弹出位置，分别为顶部和底部。
+- **可关闭**：设置 `closable` 来显示关闭按钮。
+- **更新内容**：更新消息内容，通过设置 `duration` 属性可以重置定时器。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 弹窗、抽屉、确认框等显隐状态使用 `v-model:visible` 或组件提供的方法统一管理。
+- 异步操作要配合 `loading`、禁用态或全局反馈，避免重复提交。

.agents/skills/arco-design-vue/references/components/feedback/modal.md

@@ -0,0 +1,165 @@
+---
+name: arco-vue-modal
+description: "Arco Design Vue Modal 对话框 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-modal>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# Modal 对话框
+
+## 简介
+
+对话框的基本用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-button @click="handleClick">Open Modal</a-button>
+  <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
+    <template #title>
+      Title
+    </template>
+    <div>You can customize modal body text by the current situation. This modal will be closed immediately once you press the OK button.</div>
+  </a-modal>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const visible = ref(false);
+
+    const handleClick = () => {
+      visible.value = true;
+    };
+    const handleOk = () => {
+      visible.value = false;
+    };
+    const handleCancel = () => {
+      visible.value = false;
+    }
+
+    return {
+      visible,
+      handleClick,
+      handleOk,
+      handleCancel
+    }
+  },
+}
+</script>
+```
+
+## API
+
+### `<modal>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|visible **(v-model)**|对话框是否可见|`boolean`|`-`||
+|default-visible|对话框默认是否可见（非受控状态）|`boolean`|`false`||
+|width|对话框的宽度，不设置的情况下会使用样式中的宽度值|`number\|string`|`-`|2.12.0|
+|top|对话框的距离顶部的高度，居中显示开启的情况下不生效|`number\|string`|`-`|2.12.0|
+|mask|是否显示遮罩层|`boolean`|`true`||
+|title|标题|`string`|`-`||
+|title-align|标题的水平对齐方向|`'start' \| 'center'`|`'center'`|2.17.0|
+|align-center|对话框是否居中显示|`boolean`|`true`||
+|unmount-on-close|关闭时是否卸载节点|`boolean`|`false`||
+|mask-closable|是否点击遮罩层可以关闭对话框|`boolean`|`true`||
+|hide-cancel|是否隐藏取消按钮|`boolean`|`false`||
+|simple|是否开启简单模式|`boolean`|`(props: any) => {  return props.notice;}`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<modal>` 事件
+
+|事件名|描述|参数|版本|
+|---|---|---|:---|
+|ok|点击确定按钮时触发|ev: `MouseEvent`||
+|cancel|点击取消、关闭按钮时触发|ev: `MouseEvent \| KeyboardEvent`||
+|open|对话框打开后（动画结束）触发|-||
+|close|对话框关闭后（动画结束）触发|-||
+|before-open|对话框打开前触发|-|2.16.0|
+|before-close|对话框关闭前触发|-|2.16.0|
+
+### `<modal>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|title|标题|-|
+|footer|页脚|-|
+
+### `<modal>` 全局方法
+
+Modal提供的全局方法，可以通过以下三种方法使用：
+
+1. 通过this.$modal调用
+
+2. 在Composition API中，通过getCurrentInstance().appContext.config.globalProperties.$modal调用
+
+3. 导入Modal，通过Modal本身调用
+
+```ts
+import { createApp } from 'vue'
+import { Modal } from '@arco-design/web-vue';
+
+const app = createApp(App);
+Modal._context = app._context;
+```
+
+### ModalConfig
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|title|标题|`RenderContent`|`-`||
+|content|内容|`RenderContent`|`-`||
+|footer|页脚|`boolean \| RenderContent`|`true`||
+|closable|是否显示关闭按钮|`boolean`|`true`||
+|okText|确认按钮的内容|`string`|`-`||
+|cancelText|取消按钮的内容|`string`|`-`||
+|okButtonProps|确认按钮的Props|`ButtonProps`|`-`||
+|cancelButtonProps|取消按钮的Props|`ButtonProps`|`-`||
+|okLoading|确认按钮是否为加载中状态|`boolean`|`false`||
+|hideCancel|是否隐藏取消按钮|`boolean`|`false`||
+|mask|是否显示遮罩层|`boolean`|`true`||
+|simple|是否开启简单模式|`boolean`|`false`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### ModalReturn
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|close|关闭对话框|`() => void`|`-`||
+|update|更新对话框|`(config: ModalUpdateConfig) => void`|`-`|2.43.2|
+
+### ModalMethod
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|open|打开对话框|`(config: ModalConfig, appContext?: AppContext) => ModalReturn`|`-`|
+|confirm|打开对话框（简单模式）|`(config: ModalConfig, appContext?: AppContext) => ModalReturn`|`-`|
+|info|打开信息对话框|`(config: ModalConfig, appContext?: AppContext) => ModalReturn`|`-`|
+|success|打开成功对话框|`(config: ModalConfig, appContext?: AppContext) => ModalReturn`|`-`|
+|warning|打开警告对话框|`(config: ModalConfig, appContext?: AppContext) => ModalReturn`|`-`|
+|error|打开错误对话框|`(config: ModalConfig, appContext?: AppContext) => ModalReturn`|`-`|
+
+## 常用模式
+
+- **异步关闭**：可以通过 on-before-ok 更简洁的实现异步关闭功能
+- **函数调用**：通过函数的方式使用对话框。
+- **消息提示**：有**info**, **success**, **warning**, **error**四种类型的消息提示，仅提供一个确认按钮用于关闭消息提示对话框。消息默认会默认开启 `simple` 和 `hideCancel`，如果想要取消可以再次设置。
+- **对话框的宽度**：设置 `width="auto"` 可以让对话框自适应宽度
+- **定制按钮文字**：设置 `okText` 与 `cancelText` 可以自定义按钮文字。
+- **弹出层表单**：在对话框中使用表单
+- **可拖动**：开启 `draggable` 属性，允许用户拖动对话框。
+- **全屏**：开启 `fullscreen` 属性，可以让对话框占满整个容器。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 弹窗、抽屉、确认框等显隐状态使用 `v-model:visible` 或组件提供的方法统一管理。
+- 异步操作要配合 `loading`、禁用态或全局反馈，避免重复提交。

.agents/skills/arco-design-vue/references/components/feedback/notification.md

@@ -0,0 +1,121 @@
+---
+name: arco-vue-notification
+description: "Arco Design Vue 通知提醒框 Notification 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-notification>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 通知提醒框 Notification
+
+## 简介
+
+通知提醒框的基本用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-space>
+    <a-button type="primary" @click="() => this.$notification.info({
+      title:'Notification',
+      content:'This is a notification!'
+    })"
+    >
+      Open Notification
+    </a-button>
+    <a-button @click="handleNotification">
+      Open Notification
+    </a-button>
+  </a-space>
+</template>
+
+<script>
+import { Notification } from '@arco-design/web-vue';
+
+export default {
+  setup() {
+    const handleNotification = () => {
+      Notification.info({
+        title: 'Notification',
+        content: 'This is a notification!',
+      })
+    }
+
+    return { handleNotification }
+  }
+}
+</script>
+```
+
+## API
+
+### `Notification` 全局方法
+
+`Notification` 提供的全局方法，可以通过以下三种方法使用：
+
+1. 通过 `this.$notification` 调用
+
+2. 在 Composition API 中，通过 `getCurrentInstance().appContext.config.globalProperties.$notification` 调用
+
+3. 导入 `Notification`，通过 `Notification` 本身调用
+
+```ts
+import { createApp } from 'vue'
+import { Notification } from '@arco-design/web-vue';
+
+const app = createApp(App);
+Notification._context = app._context;
+```
+
+### NotificationMethod
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|info|显示信息提醒框|`(    config: string \| NotificationConfig,    appContext?: AppContext  ) => NotificationReturn`|`-`|
+|success|显示成功提醒框|`(    config: string \| NotificationConfig,    appContext?: AppContext  ) => NotificationReturn`|`-`|
+|warning|显示警告提醒框|`(    config: string \| NotificationConfig,    appContext?: AppContext  ) => NotificationReturn`|`-`|
+|error|显示错误提醒框|`(    config: string \| NotificationConfig,    appContext?: AppContext  ) => NotificationReturn`|`-`|
+|remove|清除对应 `id` 的提醒框|`(id: string) => void`|`-`|
+|clear|清除全部提醒框|`(position?: NotificationPosition) => void`|`-`|
+
+### NotificationConfig
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|content|内容|`RenderContent`|`-`||
+|title|标题|`RenderContent`|`-`||
+|icon|图标|`RenderFunction`|`-`||
+|id|唯一id|`string`|`-`||
+|style|样式|`CSSProperties`|`-`||
+|class|样式类名|`ClassName`|`-`||
+|position|位置|`'topLeft'\|'topRight'\|'bottomLeft'\|'bottomRight'`|`-`||
+|showIcon|是否显示图标|`boolean`|`true`||
+|closable|是否可关闭|`boolean`|`false`||
+|duration|显示的持续时间，单位为 `ms`|`number`|`3000`||
+|footer|底部内容|`RenderFunction`|`-`|2.25.0|
+|closeIcon|关闭按钮图标|`RenderFunction`|`-`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### NotificationReturn
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|close|关闭当前通知提醒框|`() => void`|`-`|
+
+## 常用模式
+
+- **消息类型**：通知提醒框的消息类型。
+- **全局提示的位置**：通知提醒框有 4 种不同的弹出位置，分别为：`左上角`, `右上角 (默认)`, `左下角`, `右下角`。
+- **更新通知内容**：通过指定参数 `id`，可以更新已经存在的通知提醒框。
+- **更新延迟**：通过指定参数 `id`，可以更新已经存在的通知提醒框。
+- **自定义操作按钮**：通过指定 `btn` 字段，可以添加操作按钮。
+- **自定义关闭按钮**：需要设置 `closable: true`，自定义元素使用 `closeIconElement`，仅图标使用 `closeIcon` (会有 `hover` 样式)。
+- **自定义样式**：可以设置 `style` 和 `class` 来定制样式。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 弹窗、抽屉、确认框等显隐状态使用 `v-model:visible` 或组件提供的方法统一管理。
+- 异步操作要配合 `loading`、禁用态或全局反馈，避免重复提交。

.agents/skills/arco-design-vue/references/components/feedback/popconfirm.md

@@ -0,0 +1,71 @@
+---
+name: arco-vue-popconfirm
+description: "Arco Design Vue 气泡确认框 Popconfirm 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-popconfirm>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 气泡确认框 Popconfirm
+
+## 简介
+
+气泡确认框的基本用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-popconfirm content="Are you sure you want to delete?">
+    <a-button>Click To Delete</a-button>
+  </a-popconfirm>
+</template>
+```
+
+## API
+
+### `<popconfirm>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|content|内容|`string`|`-`|
+|position|弹出位置|`'top' \| 'tl' \| 'tr' \| 'bottom' \| 'bl' \| 'br' \| 'left' \| 'lt' \| 'lb' \| 'right' \| 'rt' \| 'rb'`|`'top'`|
+|popup-visible **(v-model)**|气泡确认框是否可见|`boolean`|`-`|
+|default-popup-visible|气泡确认框默认是否可见（非受控模式）|`boolean`|`false`|
+|type|气泡确认框的类型|`'info' \| 'success' \| 'warning' \| 'error'`|`'info'`|
+|ok-text|确认按钮的内容|`string`|`-`|
+|cancel-text|取消按钮的内容|`string`|`-`|
+|ok-loading|确认按钮是否为加载中状态|`boolean`|`false`|
+|ok-button-props|确认按钮的Props|`ButtonProps`|`-`|
+|cancel-button-props|取消按钮的Props|`ButtonProps`|`-`|
+|content-class|弹出框内容的类名|`ClassName`|`-`|
+|content-style|弹出框内容的样式|`CSSProperties`|`-`|
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<popconfirm>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|popup-visible-change|气泡确认框的显隐状态改变时触发|visible: `boolean`|
+|ok|点击确认按钮时触发|-|
+|cancel|点击取消按钮时触发|-|
+
+### `<popconfirm>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|icon|图标|-|
+|content|内容|-|
+
+## 常用模式
+
+- **自定义按钮**：自定义按钮的文字或图标。
+- **弹出位置**：`popconfirm` 支持 12 个不同的方位。分别为：`上左` `上` `上右` `下左` `下` `下右` `左上` `左` `左下` `右上` `右` `右下`。
+- **确认框类型**：通过 `type` 属性可以设置确认框类型。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 弹窗、抽屉、确认框等显隐状态使用 `v-model:visible` 或组件提供的方法统一管理。
+- 异步操作要配合 `loading`、禁用态或全局反馈，避免重复提交。

.agents/skills/arco-design-vue/references/components/feedback/progress.md

@@ -0,0 +1,62 @@
+---
+name: arco-vue-progress
+description: "Arco Design Vue 进度条 Progress 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-progress>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 进度条 Progress
+
+## 简介
+
+简单的进度条。
+
+## 基本用法
+
+```vue
+<template>
+  <a-progress :percent="0.2" :style="{width:'50%'}" />
+  <br/>
+  <br/>
+  <a-progress :percent="0.3" :style="{width:'50%'}">
+    <template v-slot:text="scope" >
+      进度 {{scope.percent * 100}}%
+    </template>
+  </a-progress>
+</template>
+```
+
+## API
+
+### `<progress>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|type|进度条的类型|`'line' \| 'circle'`|`'line'`|
+|size|进度条的大小|`'mini' \| 'small' \| 'medium' \| 'large'`|`'medium'`|
+|percent|进度条当前的百分比|`number`|`0`|
+|steps|开启步骤条模式，并设置步骤数|`number`|`0`|
+|animation|是否开启过渡动画|`boolean`|`false`|
+|stroke-width|进度条的线宽|`number`|`-`|
+|width|进度条的长度|`number\|string`|`-`|
+|color|进度条的颜色|`string\|object`|`-`|
+|track-color|进度条的轨道颜色|`string`|`-`|
+|show-text|是否显示文字|`boolean`|`true`|
+|status|进度条状态|`'normal' \| 'success' \| 'warning' \| 'danger'`|`-`|
+
+## 常用模式
+
+- **进度条状态**：通过 `status` 指定进度条状态
+- **环形进度条**：设置 `type="circle"` 将会展示环形进度条。
+- **迷你进度条**：设置 `size="mini"` 展示微型进度条。
+- **进度条大小**：通过 `size` 设置进度条的大小
+- **渐变进度条**：`color` 传入对象时， 会作为 `linear-gradient` 的属性值设置渐变色。
+- **步骤进度条**：通过设置 `steps` 展示步骤进度条。
+- **剩余进度条的颜色**：可以通过 trackColor 设置剩余进度条的颜色
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 弹窗、抽屉、确认框等显隐状态使用 `v-model:visible` 或组件提供的方法统一管理。
+- 异步操作要配合 `loading`、禁用态或全局反馈，避免重复提交。

.agents/skills/arco-design-vue/references/components/feedback/result.md

@@ -0,0 +1,65 @@
+---
+name: arco-vue-result
+description: "Arco Design Vue 结果页 Result 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-result>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 结果页 Result
+
+## 简介
+
+展示结果状态。
+
+## 基本用法
+
+```vue
+<template>
+  <a-result title="This is title content" subtitle="This is subtitle content">
+    <template #extra>
+      <a-space>
+        <a-button type="secondary">Again</a-button>
+        <a-button type="primary">Back</a-button>
+      </a-space>
+    </template>
+  </a-result>
+</template>
+```
+
+## API
+
+### `<result>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|status|结果页显示的状态|`'info' \| 'success' \| 'warning' \| 'error' \| '403' \| '404' \| '500' \| null`|`'info'`|
+|title|标题内容|`string`|`-`|
+|subtitle|子标题内容|`string`|`-`|
+
+### `<result>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|icon|图标|-||
+|title|标题|-||
+|subtitle|副标题|-||
+|extra|操作区|-|2.8.0|
+|default|默认插槽|-|2.8.0|
+
+## 常用模式
+
+- **成功状态**：展示成功状态。
+- **警告状态**：展示警告状态。
+- **错误状态**：展示错误状态。
+- **HTTP状态码 403**：没有当前页面的访问权限。
+- **HTTP状态码 404**：页面未找到
+- **HTTP状态码 500**：通常表示服务器错误
+- **自定义状态**：自定义状态。需要传入指定的图标
+- **完整功能**：完整功能
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 弹窗、抽屉、确认框等显隐状态使用 `v-model:visible` 或组件提供的方法统一管理。
+- 异步操作要配合 `loading`、禁用态或全局反馈，避免重复提交。

.agents/skills/arco-design-vue/references/components/feedback/skeleton.md

@@ -0,0 +1,62 @@
+---
+name: arco-vue-skeleton
+description: "Arco Design Vue 骨架屏 Skeleton 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-skeleton>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 骨架屏 Skeleton
+
+## 简介
+
+骨架屏组件提供 `<a-skeleton-line>` 和 `<a-skeleton-shape>` 两种组件，用户可根据需要组合使用。
+
+## 基本用法
+
+```vue
+<template>
+  <a-skeleton>
+    <a-space direction="vertical" :style="{width:'100%'}" size="large">
+      <a-skeleton-line :rows="3" />
+      <a-skeleton-shape />
+    </a-space>
+  </a-skeleton>
+</template>
+```
+
+## API
+
+### `<skeleton>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|loading|是否展示骨架屏（加载中状态）|`boolean`|`true`|
+|animation|是否开启骨架屏动画|`boolean`|`false`|
+
+### `<skeleton-line>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|rows|展示的行数|`number`|`1`|
+|widths|线型骨架的宽度|`Array<number \| string>`|`[]`|
+|line-height|线型骨架的行高|`number`|`20`|
+|line-spacing|线型骨架的行间距|`number`|`15`|
+
+### `<skeleton-shape>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|shape|图形骨架的形状|`'square' \| 'circle'`|`'square'`|
+|size|图形骨架的大小|`'small' \| 'medium' \| 'large'`|`'medium'`|
+
+## 常用模式
+
+- **图形骨架屏**：图形骨架屏分为 `square` - **正方形（默认）**、 `circle` - **圆形**两种形状，并提供 `small`、`medium`、`large` 三种尺寸。
+- **动画**：通过设置 `animation` 属性，让骨架屏显示动画效果。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 弹窗、抽屉、确认框等显隐状态使用 `v-model:visible` 或组件提供的方法统一管理。
+- 异步操作要配合 `loading`、禁用态或全局反馈，避免重复提交。

.agents/skills/arco-design-vue/references/components/feedback/spin.md

@@ -0,0 +1,55 @@
+---
+name: arco-vue-spin
+description: "Arco Design Vue 加载中 Spin 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-spin>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 加载中 Spin
+
+## 简介
+
+用于展示加载中的状态。
+
+## 基本用法
+
+```vue
+<template>
+  <a-spin />
+</template>
+```
+
+## API
+
+### `<spin>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|size|尺寸|`number`|`-`|
+|loading|是否为加载中状态（仅在容器模式下生效）|`boolean`|`false`|
+|dot|是否使用点类型的动画|`boolean`|`false`|
+|tip|提示内容|`string`|`-`|
+|hide-icon|是否隐藏图标|`boolean`|`false`|
+
+### `<spin>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|tip|自定义提示内容|-|
+|element|自定义元素|-|
+|icon|自定义图标（自动旋转）|-|
+
+## 常用模式
+
+- **不同尺寸**：设置 `size` 可以得到不同尺寸的加载图标。
+- **点类型指示符**：通过 `dot` 属性，可以展示点类型的指示符。
+- **容器中**：可以给任意内容添加加载中指示符。
+- **添加描述文案**：通过 `tip` 属性添加描述文案。
+- **自定义图标**：通过 `#icon` 插槽可以自定义图标。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 弹窗、抽屉、确认框等显隐状态使用 `v-model:visible` 或组件提供的方法统一管理。
+- 异步操作要配合 `loading`、禁用态或全局反馈，避免重复提交。

.agents/skills/arco-design-vue/references/components/general/button.md

@@ -0,0 +1,83 @@
+---
+name: arco-vue-button
+description: "Arco Design Vue 按钮 Button 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-button>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 按钮 Button
+
+## 简介
+
+按钮分为 `primary` - **主要按钮**、`secondary` - **次要按钮（默认）**、`dashed` - **虚线按钮**、`outline` - **线形按钮**、`text` - **文本按钮**五种类型。
+
+## 基本用法
+
+```vue
+<template>
+  <a-space>
+    <a-button type="primary">Primary</a-button>
+    <a-button>Secondary</a-button>
+    <a-button type="dashed">Dashed</a-button>
+    <a-button type="outline">Outline</a-button>
+    <a-button type="text">Text</a-button>
+  </a-space>
+</template>
+```
+
+## API
+
+### `<button>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|type|按钮的类型，分为五种：次要按钮、主要按钮、虚框按钮、线性按钮、文字按钮。|`ButtonTypes`|`'secondary'`|
+|shape|按钮的形状|`BorderShape`|`-`|
+|status|按钮的状态|`'normal' \| 'warning' \| 'success' \| 'danger'`|`'normal'`|
+|size|按钮的尺寸|`'mini' \| 'small' \| 'medium' \| 'large'`|`'medium'`|
+|long|按钮的宽度是否随容器自适应。|`boolean`|`false`|
+|loading|按钮是否为加载中状态|`boolean`|`false`|
+|disabled|按钮是否禁用|`boolean`|`false`|
+|html-type|设置 `button` 的原生 `type` 属性，可选值参考 [HTML标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type "_blank")|`HTMLButtonElement['type']`|`'button'`|
+|autofocus|设置 `button` 的原生 `autofocus` 属性，可选值参考 [HTML标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type "_blank")|`boolean`|`false`|
+|href|设置跳转链接。设置此属性时，按钮渲染为a标签。|`string`|`-`|
+
+### `<button>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|click|点击按钮时触发|ev: `MouseEvent`|
+
+### `<button>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|icon|图标|-|
+
+### `<button-group>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|type|按钮的类型，分为五种：次要按钮、主要按钮、虚框按钮、线性按钮、文字按钮。|`ButtonTypes`|`-`|
+|status|按钮的状态|`'normal' \| 'warning' \| 'success' \| 'danger'`|`-`|
+|shape|按钮的形状|`BorderShape`|`-`|
+|size|按钮的尺寸|`'mini' \| 'small' \| 'medium' \| 'large'`|`-`|
+|disabled|全部子按钮是否禁用|`boolean`|`false`|
+
+## 常用模式
+
+- **图标按钮**：按钮可以嵌入图标。在只设置图标时，按钮的宽高相等。
+- **按钮形状**：按钮分为 `square` - **长方形（默认）**、`circle` - **圆形**、`round` - **全圆角**三种形状。
+- **按钮尺寸**：按钮分为 `mini`、`small`、`medium`、`large` 四种尺寸。高度分别为：`24px`、`28px`、`32px`、`36px`。推荐（默认）尺寸为 `medium`。可在不同场景及不同业务需求选择适合尺寸。
+- **按钮状态**：按钮的状态分为 `normal` - **正常（默认）**、`success` - **成功**、`warning` - **警告**、`danger` - **危险**四种，可以与按钮类型同时使用。
+- **禁用状态**：按钮的禁用状态。
+- **加载中状态**：通过设置 `loading` 可以让按钮处于加载中状态。处于加载中状态的按钮不会触发点击事件。
+- **长按钮**：通过设置 `long` 属性，使按钮的宽度跟随容器的宽度。
+- **组合按钮**：通过 `<a-button-group>` 组件使按钮以组合方式出现。可用在同级多项操作中。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 基础组件保持语义清晰，主操作、次操作和危险操作要用不同 `type` 或 `status` 区分。
+- 图标、按钮、链接等交互元素要同时考虑禁用、加载和可访问文本。

.agents/skills/arco-design-vue/references/components/general/config-provider.md

@@ -0,0 +1,124 @@
+---
+name: arco-vue-config-provider
+description: "Arco Design Vue 全局配置 ConfigProvider 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-config-provider>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 全局配置 ConfigProvider
+
+## 简介
+
+设置国际化语言的基本用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-config-provider :locale="locale">
+    <a-radio-group
+      type="button"
+      v-model="localeType"
+      :options="localeOptions"
+    ></a-radio-group>
+    <div>
+      <a-pagination
+        :total="50"
+        show-total
+        show-jumper
+        show-page-size
+        style="margin-top: 20px; margin-bottom: 20px;"
+      />
+    </div>
+    <a-space :size="20" style="margin-bottom: 20px;">
+      <a-range-picker style="width: 300px;" />
+      <a-time-picker type="time-range" style="width: 300px;" />
+      <a-popconfirm content="Are you sure you want to delete?">
+        <a-button type="primary">Popconfirm</a-button>
+      </a-popconfirm>
+    </a-space>
+  </a-config-provider>
+</template>
+
+<script>
+import { ref, computed } from 'vue';
+import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
+import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
+import esES from '@arco-design/web-vue/es/locale/lang/es-es';
+import jaJP from '@arco-design/web-vue/es/locale/lang/ja-jp';
+import idID from '@arco-design/web-vue/es/locale/lang/id-id';
+import frFR from '@arco-design/web-vue/es/locale/lang/fr-fr';
+import ptPT from '@arco-design/web-vue/es/locale/lang/pt-pt';
+import deDE from '@arco-design/web-vue/es/locale/lang/de-de';
+import koKR from '@arco-design/web-vue/es/locale/lang/ko-kr';
+import itIT from '@arco-design/web-vue/es/locale/lang/it-it';
+import thTH from '@arco-design/web-vue/es/locale/lang/th-th';
+import viVN from '@arco-design/web-vue/es/locale/lang/vi-vn';
+import nlNL from '@arco-design/web-vue/es/locale/lang/nl-nl';
+
+const locales = {
+  'zh-CN': zhCN,
+  'en-US': enUS,
+  'es-ES': esES,
+  'ja-JP': jaJP,
+  'id-ID': idID,
+  'fr-FR': frFR,
+  'pt-PT': ptPT,
+  'de-DE': deDE,
+  'ko-KR': koKR,
+  'it-IT': itIT,
+  'th-TH': thTH,
+  'vi-VN': viVN,
+  'nl-NL': nlNL,
+};
+
+export default {
+  setup() {
+    const localeType = ref('es-ES');
+    const locale = computed(() => {
+      return locales[localeType.value] || zhCN;
+    });
+
+    return {
+      localeType,
+      locale,
+      localeOptions: Object.keys(locales),
+    };
+  },
+};
+</script>
+```
+
+## API
+
+### `<config-provider>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|prefix-cls|组件类名前缀|`string`|`'arco'`||
+|locale|配置语言包|`ArcoLang`|`-`||
+|size|大小|`Size`|`-`|2.14.0|
+|global|是否全局生效|`boolean`|`false`|2.25.0|
+|update-at-scroll|是否在容器滚动时更新弹出框的位置|`boolean`|`false`|2.25.0|
+|scroll-to-close|是否在滚动时关闭弹出框|`boolean`|`false`|2.46.0|
+|exchange-time|是否交换时间|`boolean`|`true`|2.48.0|
+|rtl|视图的表现形式是从右开始向左结束|`boolean`|`false`||
+
+### `<config-provider>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|loading|自定义加载中元素|-|2.28.0|
+|empty|自定义空状态元素|component: `string`|2.28.0|
+
+## 常用模式
+
+- **自定义空状态元素**：通过 `empty` 插槽可以全局自定义空状态元素。
+- **RTL 视图**：设置组件为从右向左阅读的视图。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 基础组件保持语义清晰，主操作、次操作和危险操作要用不同 `type` 或 `status` 区分。
+- 图标、按钮、链接等交互元素要同时考虑禁用、加载和可访问文本。

.agents/skills/arco-design-vue/references/components/general/icon.md

@@ -0,0 +1,43 @@
+---
+name: arco-vue-icon
+description: "Arco Design Vue Icon 图标参考。用于 `@arco-design/web-vue/es/icon`、`ArcoVueIcon`、`<icon-xx>`、图标按需导入、图标属性、旋转图标和 iconfont.cn 集成。"
+user-invocable: false
+---
+
+# Icon 图标
+
+## 简介
+
+Icon 图标参考。用于 `@arco-design/web-vue/es/icon`、`ArcoVueIcon`、`<icon-xx>`、图标按需导入、图标属性、旋转图标和 iconfont.cn 集成。
+
+## 基本用法
+
+```ts
+import { createApp } from 'vue';
+import ArcoVue from '@arco-design/web-vue';
+import ArcoVueIcon from '@arco-design/web-vue/es/icon';
+import '@arco-design/web-vue/dist/arco.css';
+import App from './App.vue';
+
+const app = createApp(App);
+app.use(ArcoVue);
+app.use(ArcoVueIcon);
+app.mount('#app');
+```
+
+## API
+
+当前组件没有单独整理的 API 表。使用时优先参考组件属性、事件和插槽约定。
+
+## 常用模式
+
+- **基础使用**：直接使用全局 `a-` 前缀组件，按需绑定属性、事件和插槽。
+- **受控状态**：涉及值或显隐时优先使用 `v-model` 或命名 `v-model:*`。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 基础组件保持语义清晰，主操作、次操作和危险操作要用不同 `type` 或 `status` 区分。
+- 图标、按钮、链接等交互元素要同时考虑禁用、加载和可访问文本。

.agents/skills/arco-design-vue/references/components/general/link.md

@@ -0,0 +1,56 @@
+---
+name: arco-vue-link
+description: "Arco Design Vue 链接 Link 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-link>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 链接 Link
+
+## 简介
+
+链接的基本用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-space>
+    <a-link href="link">Link</a-link>
+    <a-link href="link" disabled>Link</a-link>
+  </a-space>
+</template>
+```
+
+## API
+
+### `<link>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|href|链接地址|`string`|`-`||
+|status|链接的状态|`'normal' \| 'warning' \| 'success' \| 'danger'`|`'normal'`||
+|hoverable|鼠标悬浮时存在底色|`boolean`|`true`|2.7.0|
+|icon|图标|`boolean`|`false`|2.7.0|
+|loading|链接是否为加载中状态|`boolean`|`false`|2.37.0|
+|disabled|链接是否禁用|`boolean`|`false`||
+
+### `<link>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|click|点击时触发|ev: `MouseEvent`|
+
+## 常用模式
+
+- **链接的状态**：链接的状态分为 `normal` - **正常（默认）**、`success` - **成功**、`warning` - **警告**、`danger` - **危险**四种。
+- **悬浮状态底色**：可以通过 hoverable 属性设置是否在悬浮状态时隐藏底色。
+- **图标**：通过 `icon` 设置带图标的链接，设置为 `true` 时候显示默认图标。
+- **加载中状态**：通过设置 `loading` 可以让链接处于加载中状态。处于加载中状态的链接不会触发点击事件。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 基础组件保持语义清晰，主操作、次操作和危险操作要用不同 `type` 或 `status` 区分。
+- 图标、按钮、链接等交互元素要同时考虑禁用、加载和可访问文本。

.agents/skills/arco-design-vue/references/components/general/typography.md

@@ -0,0 +1,137 @@
+---
+name: arco-vue-typography
+description: "Arco Design Vue 排版 Typography 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-typography>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 排版 Typography
+
+## 简介
+
+排版组件用于展示标题、段落、文本内容，这里展示了排版的组合使用。
+
+## 基本用法
+
+```vue
+<template>
+  <a-typography :style="{ marginTop: '-40px' }">
+    <a-typography-title>
+      Design system
+    </a-typography-title>
+    <a-typography-paragraph>
+      A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design.
+    </a-typography-paragraph>
+    <a-typography-paragraph>
+      In some cases, the direct construction of an object without an explicit prior plan (such as in craftwork, some engineering, coding, and graphic design) may also be considered <a-typography-text bold>to be a design activity.</a-typography-text>
+    </a-typography-paragraph>
+    <a-typography-title :heading="2">ArcoDesign</a-typography-title>
+    <a-typography-paragraph>
+      The ArcoDesign component library defines a set of default particle variables, and a custom theme is to <a-typography-text mark>customize</a-typography-text> and <a-typography-text underline>overwrite</a-typography-text> this variable list.
+    </a-typography-paragraph>
+    <a-typography-paragraph blockquote>
+      A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a <a-typography-text code>prototype</a-typography-text>, <a-typography-text code>product</a-typography-text> or <a-typography-text code>process</a-typography-text>. The verb to design expresses the process of developing a design.
+    </a-typography-paragraph>
+    <a-typography-paragraph mark underline delete>A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process.</a-typography-paragraph>
+    <a-typography-paragraph>
+      <ul>
+        <li>
+          Architectural blueprints
+          <ul>
+            <li>Architectural blueprints</li>
+          </ul>
+        </li>
+        <li>Engineering drawings</li>
+        <li>Business processes</li>
+      </ul>
+    </a-typography-paragraph>
+    <a-typography-paragraph>
+      <ol>
+        <li>Architectural blueprints</li>
+        <li>Engineering drawings</li>
+        <li>Business processes</li>
+      </ol>
+    </a-typography-paragraph>
+  </a-typography>
+</template>
+```
+
+## API
+
+### `Common` Props
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|type|文本类型|`'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning'`|`-`||
+|bold|粗体|`boolean`|`false`||
+|mark|添加标记样式|`boolean \| { color: string }`|`false`||
+|underline|下划线样式|`boolean`|`false`||
+|delete|删除线样式|`boolean`|`false`||
+|code|代码块样式|`boolean`|`false`||
+|disabled|禁用状态|`boolean`|`false`||
+|editable|开启可编辑功能|`boolean`|`false`||
+|editing **(v-model)**|是否在编辑状态|`boolean`|`-`||
+|default-editing|默认的编辑状态|`boolean`|`false`||
+|edit-text **(v-model)**|编辑的文字|`string`|`-`||
+|copyable|开启复制功能|`boolean`|`false`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `Common` Events
+
+|事件名|描述|参数|
+|---|---|---|
+|edit-start|开始编辑|-|
+|change|编辑内容变化|text: `string`|
+|edit-end|编辑结束|-|
+|copy|复制|text: `string`|
+|ellipsis|省略变化事件|isEllipsis: `boolean`|
+|expand|展开收起事件|expanded: `boolean`|
+
+### `Common` Slots
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|expand-node|自定义展开和折叠按钮|expanded: `boolean`|
+|copy-icon|自定义复制按钮图标|copied: `boolean`|
+|copy-tooltip|自定义复制按钮的 tooltip 内容|copied: `boolean`|
+
+### `<typography-title>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|heading|标题级别，相当于 `h1` `h2` `h3` `h4` `h5` `h6`|`'1' \| '2' \| '3' \| '4' \| '5' \| '6'`|`1`|
+
+### `<typography-paragraph>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|blockquote|长引用|`boolean`|`false`|
+|spacing|段落的的行高，长文本(大于5行)的时候推荐使用默认行高，短文本(小于等于3行)推荐使用 `close` 紧密的行高。|`'default' \| 'close'`|`'default'`|
+
+### EllipsisConfig
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|rows|显示省略的行数|`number`|`1`||
+|expandable|是否支持展开/折叠|`boolean`|`false`||
+|ellipsisStr|省略号|`string`|`'...'`||
+|suffix|后缀|`string`|`-`||
+|showTooltip|配置省略时的弹出框|`boolean    \| { type: 'tooltip' \| 'popover'; props: Record<string, any> }`|`false`||
+|css|是否使用 CSS 省略（此模式暂不支持展开、自定义省略号和后缀）|`boolean`|`false`|2.37.0|
+
+## 常用模式
+
+- **组合使用**：排版组件用于展示标题、段落、文本内容，这里展示了排版的组合使用。
+- **标题**：展示不同级别的标题。
+- **文本**：不同样式的文本以及超链接组件。
+- **段落**：文本段落样式。
+- **可交互**：提供复制、编辑文本等功能。
+- **省略**：在空间不足时省略多行文本内容。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 基础组件保持语义清晰，主操作、次操作和危险操作要用不同 `type` 或 `status` 区分。
+- 图标、按钮、链接等交互元素要同时考虑禁用、加载和可访问文本。

.agents/skills/arco-design-vue/references/components/layout/divider.md

@@ -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`。

.agents/skills/arco-design-vue/references/components/layout/grid.md

@@ -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`。

.agents/skills/arco-design-vue/references/components/layout/layout.md

@@ -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`。

.agents/skills/arco-design-vue/references/components/layout/space.md

@@ -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`。

.agents/skills/arco-design-vue/references/components/navigation/breadcrumb.md

@@ -0,0 +1,86 @@
+---
+name: arco-vue-breadcrumb
+description: "Arco Design Vue 面包屑 Breadcrumb 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-breadcrumb>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 面包屑 Breadcrumb
+
+## 简介
+
+面包屑的基本用法。
+
+## 基本用法
+
+```vue
+<template>
+  <a-breadcrumb>
+    <a-breadcrumb-item>Home</a-breadcrumb-item>
+    <a-breadcrumb-item>Channel</a-breadcrumb-item>
+    <a-breadcrumb-item>News</a-breadcrumb-item>
+  </a-breadcrumb>
+</template>
+```
+
+## API
+
+### `<breadcrumb>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|max-count|最多展示的面包屑数量（0表示不限制）|`number`|`0`||
+|routes|设置路径|`BreadcrumbRoute[]`|`-`|2.36.0|
+|separator|分隔符文字|`string\|number`|`-`|2.36.0|
+|custom-url|自定义链接地址|`(paths: string[]) => string`|`-`|2.36.0|
+
+### `<breadcrumb>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|more-icon|自定义更多图标|-|2.36.0|
+|item-render|routes 设置时生效，自定义渲染面包屑|route: `BreadcrumbRoute`<br>routes: `BreadcrumbRoute[]`<br>paths: `string[]`|2.36.0|
+|separator|自定义分隔符|-||
+
+### `<breadcrumb-item>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|separator|分隔符文字|`string\|number`|`-`|2.36.0|
+|droplist|下拉菜单内容|`BreadcrumbRoute['children']`|`-`|2.36.0|
+|dropdown-props|下拉菜单属性|`DropDownProps`|`-`|2.36.0|
+
+### `<breadcrumb-item>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|droplist|自定义下拉菜单|-|2.36.0|
+|separator|自定义分隔符|-|2.36.0|
+
+### BreadcrumbRoute
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|label|面包屑名称|`string`|`-`|
+|path|跳转路径 (`a`标签的`href`)|`string`|`-`|
+|children|下拉菜单展示项|`{    label: string;    path: string;  }[]`|`-`|
+
+### 使用提示
+
+同名的自定义插槽优先级是高于属性的
+
+## 常用模式
+
+- **自定义分隔符**：通过 `separator` 属性或插槽自定义分隔符。面包屑子项也可通过 `separator` 属性或插槽自定义分隔符，且优先级高于父项。
+- **自定义尺寸**：通过指定样式来自定义面包屑的尺寸。
+- **自定义图标**：可以在内容中使用自定义图标。
+- **参数化配置**：通过 `routes` 来传递面包屑数据。若是要自定义面包屑的话，建议使用 `<a-breadcrumb-item />` 组件。默认使用 `a` 标签的 `href` 属性绑定路径，可通过 `item` 插槽自定义渲染。
+- **带有下拉菜单**：通过 `droplist` 或者 `routes` 来指定下拉菜单。
+- **显示省略**：通过 `max-count` 来指定面包屑的最多渲染数量，超出的部分将显示为省略号。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 导航状态应与路由或业务状态保持单一来源，避免组件内部状态和路由不同步。
+- 菜单、分页、步骤等受控状态优先使用 `v-model` 或命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/navigation/dropdown.md

@@ -0,0 +1,203 @@
+---
+name: arco-vue-dropdown
+description: "Arco Design Vue 下拉菜单 Dropdown 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-dropdown>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 下拉菜单 Dropdown
+
+## 简介
+
+下拉菜单的基本用法。下拉菜单开启后会为触发元素添加 `arco-dropdown-open` 类名。
+
+## 基本用法
+
+```vue
+<template>
+  <a-space size="large">
+    <a-dropdown @select="handleSelect">
+      <a-button>Click Me</a-button>
+      <template #content>
+        <a-doption>Option 1</a-doption>
+        <a-doption disabled>Option 2</a-doption>
+        <a-doption :value="{ value: 'Option3' }">Option 3</a-doption>
+      </template>
+    </a-dropdown>
+    <a-dropdown @select="handleSelect" disabled>
+      <a-button disabled>Click Me</a-button>
+      <template #content>
+        <a-doption>Option 1</a-doption>
+        <a-doption disabled>Option 2</a-doption>
+        <a-doption>Option 3</a-doption>
+      </template>
+    </a-dropdown>
+    <a-dropdown @select="handleSelect" :popup-max-height="false">
+      <a-button>No Max Height <icon-down/></a-button>
+      <template #content>
+        <a-doption>Option 1</a-doption>
+        <a-doption disabled>Option 2</a-doption>
+        <a-doption>Option 3</a-doption>
+        <a-doption>Option 4</a-doption>
+        <a-doption>Option 5</a-doption>
+        <a-doption>Option 6</a-doption>
+        <a-doption>Option 7</a-doption>
+        <a-doption>Option 8</a-doption>
+        <a-doption>Option 9</a-doption>
+      </template>
+    </a-dropdown>
+  </a-space>
+</template>
+
+<script>
+export default {
+  setup() {
+    const handleSelect = (v) => {
+      console.log(v)
+    };
+
+    return {
+      handleSelect
+    }
+  },
+}
+</script>
+
+<style>
+.arco-dropdown-open .arco-icon-down {
+  transform: rotate(180deg);
+}
+</style>
+```
+
+## API
+
+### `<dropdown>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|popup-visible **(v-model)**|弹出框是否可见|`boolean`|`-`||
+|default-popup-visible|弹出框默认是否可见（非受控模式）|`boolean`|`false`||
+|trigger|触发方式|`'hover' \| 'click' \| 'focus' \| 'contextMenu'`|`'click'`||
+|position|弹出位置|`'top' \| 'tl' \| 'tr' \| 'bottom' \| 'bl' \| 'br'`|`'bottom'`||
+|popup-container|弹出框的挂载容器|`string \| HTMLElement`|`-`||
+|popup-max-height|弹出框最大高度|`boolean\|number`|`true`|2.29.0|
+|hide-on-select|是否在用户选择后隐藏弹出框|`boolean`|`true`|2.43.0|
+
+### `<dropdown>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|popup-visible-change|下拉框显示状态发生改变时触发|visible: `boolean`|
+|select|用户选择时触发|value: `string \| number \| Record<string, any> \| undefined `<br>ev: `Event`|
+
+### `<dropdown>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|content|内容|-||
+|footer|页脚|-|2.10.0|
+
+### `<doption>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|value|选项值|`string\|number\|object`|`-`|
+|disabled|是否禁用|`boolean`|`false`|
+
+### `<doption>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|click|点击按钮时触发|ev: `MouseEvent`|
+
+### `<doption>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|icon|图标|-|
+
+### `<dgroup>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|title|分组标题|`string`|`-`|
+
+### `<dgroup>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|title|分组标题|-|2.10.0|
+
+### `<dsubmenu>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|value|选项值（2.16.0 版本后暂无用处）|`string\|number`|`-`||
+|disabled|是否禁用|`boolean`|`false`|2.10.0|
+|trigger|触发方式|`'hover' \| 'click'`|`'click'`|2.10.0|
+|position|弹出位置|`'rt' \| 'lt'`|`'rt'`|2.10.0|
+|popup-visible **(v-model)**|弹出框是否可见|`boolean`|`-`||
+|default-popup-visible|弹出框默认是否可见（非受控模式）|`boolean`|`false`||
+|option-props|自定义选项属性|`object`|`-`|2.29.0|
+
+### `<dsubmenu>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|popup-visible-change|下拉框显示状态发生改变时触发|visible: `boolean`|
+
+### `<dsubmenu>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|icon|图标|-|2.29.0|
+|content|子菜单内容|-||
+|footer|页脚|-|2.10.0|
+
+### `<dropdown-button>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|popup-visible **(v-model)**|弹出框是否可见|`boolean`|`-`|
+|default-popup-visible|弹出框默认是否可见（非受控模式）|`boolean`|`false`|
+|trigger|触发方式|`'hover' \| 'click' \| 'focus' \| 'contextMenu'`|`'click'`|
+|position|弹出位置|`'top' \| 'tl' \| 'tr' \| 'bottom' \| 'bl' \| 'br'`|`'br'`|
+|popup-container|弹出框的挂载容器|`string \| HTMLElement`|`-`|
+|disabled|是否禁用|`boolean`|`false`|
+|type|按钮类型|`string`|`-`|
+|size|按钮大小|`string`|`-`|
+|button-props|按钮属性|`ButtonProps`|`-`|
+|hide-on-select|是否在用户选择后隐藏弹出框|`boolean`|`true`|
+
+### `<dropdown-button>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|popup-visible-change|下拉框显示状态发生改变时触发|visible: `boolean`|
+|click|点击按钮时触发|ev: `MouseEvent`|
+|select|用户选择时触发|value: `string \| number \| Record<string, any> \| undefined`<br>ev: `Event`|
+
+### `<dropdown-button>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|icon|按钮图标|popupVisible: `boolean`|
+|content|内容|-|
+
+## 常用模式
+
+- **弹出方向**：通过 `position` 支持指定 6 种弹出方位，分别是：top: 向上, tl: 左上, tr: 右上, bottom: 下方(默认), bl: 左下, br: 右下。
+- **触发方式**：通过 `trigger` 指定触发方式。
+- **按钮下拉框**：可以使用 `<dropdown-button>` 组件用来展示右边是额外相关功能菜单的按钮。`2.16.0` 版本添加支持。
+- **分组选项**：通过 `<dgroup>` 组件使用分组选项。
+- **多级菜单**：带有多级菜单的下拉框。
+- **右键菜单**：移入区域后，可点击鼠标右键触发。
+- **带图标的选项**：通过 `icon` 插槽在选项前添加图标。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 导航状态应与路由或业务状态保持单一来源，避免组件内部状态和路由不同步。
+- 菜单、分页、步骤等受控状态优先使用 `v-model` 或命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/navigation/menu.md

@@ -0,0 +1,143 @@
+---
+name: arco-vue-menu
+description: "Arco Design Vue 菜单 Menu 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-menu>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 菜单 Menu
+
+## 简介
+
+设置 `mode` 为 `horizontal` 时，使用水平菜单。
+
+## 基本用法
+
+```vue
+<template>
+  <div class="menu-demo">
+    <a-menu mode="horizontal" :default-selected-keys="['1']">
+      <a-menu-item key="0" :style="{ padding: 0, marginRight: '38px' }" disabled>
+        <div
+          :style="{
+            width: '80px',
+            height: '30px',
+            borderRadius: '2px',
+            background: 'var(--color-fill-3)',
+            cursor: 'text',
+          }"
+        />
+      </a-menu-item>
+      <a-menu-item key="1">Home</a-menu-item>
+      <a-menu-item key="2">Solution</a-menu-item>
+      <a-menu-item key="3">Cloud Service</a-menu-item>
+      <a-menu-item key="4">Cooperation</a-menu-item>
+    </a-menu>
+  </div>
+</template>
+<style scoped>
+.menu-demo {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 40px;
+  background-color: var(--color-neutral-2);
+}
+</style>
+```
+
+## API
+
+### `<menu>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|theme|菜单的主题|`'light' \| 'dark'`|`'light'`||
+|mode|菜单的模式|`'vertical' \| 'horizontal' \| 'pop' \| 'popButton'`|`'vertical'`||
+|level-indent|层级之间的缩进量|`number`|`-`||
+|auto-open|默认展开所有多级菜单|`boolean`|`false`||
+|collapsed **(v-model)**|是否折叠菜单|`boolean`|`-`||
+|default-collapsed|默认是否折叠菜单|`boolean`|`false`||
+|collapsed-width|折叠菜单宽度|`number`|`-`||
+|accordion|开启手风琴效果|`boolean`|`false`||
+|auto-scroll-into-view|是否自动滚动选中项目到可见区域|`boolean`|`false`||
+|show-collapse-button|是否内置折叠按钮|`boolean`|`false`||
+|selected-keys **(v-model)**|选中的菜单项 key 数组|`string[]`|`-`||
+|default-selected-keys|默认选中的菜单项 key 数组|`string[]`|`[]`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<menu>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|collapse|折叠状态改变时触发|collapsed: `boolean`<br>type: `'clickTrigger'\|'responsive'`|
+|menu-item-click|点击菜单项时触发|key: `string`|
+|sub-menu-click|点击子菜单时触发|key: `string`<br>openKeys: `string[]`|
+
+### `<menu>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|collapse-icon|折叠图标|collapsed: `boolean`|
+|expand-icon-right|向右展开的图标|-|
+|expand-icon-down|向下展开的图标|-|
+
+### `<sub-menu>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|title|子菜单的标题|`string`|`-`||
+|selectable|弹出模式下，是否将多级菜单头也作为一个菜单项，支持点击选中等状态|`boolean`|`false`||
+|popup|是否强制使用弹出模式，`level` 表示当前子菜单的层级|`boolean \| ((level: number) => boolean)`|`false`||
+|popup-max-height|弹出框的最大高度|`boolean \| number`|`true`|2.23.0|
+
+### `<sub-menu>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|title|标题|-||
+|expand-icon-right|向右展开的图标|-||
+|expand-icon-down|向下展开的图标|-||
+|icon|菜单的图标|-|2.11.0|
+
+### `<menu-item-group>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|title|菜单组的标题|`string`|`-`|
+
+### `<menu-item-group>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|title|标题|-|
+
+### `<menu-item>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|disabled|是否禁用|`boolean`|`false`|
+
+### `<menu-item>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|icon|菜单的图标|-|2.11.0|
+
+## 常用模式
+
+- **顶部导航菜单**：设置 `mode` 为 `horizontal` 时，使用水平菜单。
+- **深色模式导航**：通过 `theme` 指定主题，分为 `light` 和 `dark` 两种。
+- **缩起内嵌菜单**：通过 `collapsed` 来指定菜单收起。
+- **响应式收缩**：设置 `breakpoint` 可触发响应式收缩。
+- **内嵌菜单**：菜单内可以嵌入多个子项，通过 `openKeys` 可以设置默认打开的子项。
+- **不同大小菜单**：通过 `style` 自由指定菜单的宽度和菜单项的高度。
+- **悬浮菜单**：指定 `mode` 为 `pop` 可以使用悬浮菜单。
+- **悬浮按钮菜单**：指定 `mode` 为 `popButton` 使用按钮组样式的悬浮菜单。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 导航状态应与路由或业务状态保持单一来源，避免组件内部状态和路由不同步。
+- 菜单、分页、步骤等受控状态优先使用 `v-model` 或命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/navigation/page-header.md

@@ -0,0 +1,73 @@
+---
+name: arco-vue-page-header
+description: "Arco Design Vue 页头 PageHeader 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-page-header>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 页头 PageHeader
+
+## 简介
+
+基础页头，适合使用在需要简单描述的场景。默认是没有底色的。
+
+## 基本用法
+
+```vue
+<template>
+  <div :style="{ background: 'var(--color-fill-2)', padding: '28px' }" >
+    <a-page-header
+      :style="{ background: 'var(--color-bg-2)' }"
+      title="ArcoDesign"
+      subtitle="ArcoDesign Vue 2.0"
+    >
+      <template #extra>
+        <a-radio-group type="button" default-value="large">
+          <a-radio value="mini">Mini</a-radio>
+          <a-radio value="small">Small</a-radio>
+          <a-radio value="large">Large</a-radio>
+        </a-radio-group>
+      </template>
+    </a-page-header>
+  </div>
+</template>
+```
+
+## API
+
+### `<page-header>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|title|页头的主标题|`string`|`-`|
+|subtitle|页头的次标题|`string`|`-`|
+|show-back|是否显示返回按钮|`boolean`|`true`|
+
+### `<page-header>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|back|点击返回按钮时触发|event: `Event`|
+
+### `<page-header>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|breadcrumb|面包屑|-||
+|back-icon|返回按钮|-|2.36.0|
+|title|主标题|-||
+|subtitle|次标题|-||
+|extra|额外的展示内容|-||
+
+## 常用模式
+
+- **带有面包屑**：在页头中展示面包屑。
+- **透明底色**：默认是没有底色的，如果有需要可以通过`style`或类名设置不同底色。
+- **组合示例**：页头的完整示例。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 导航状态应与路由或业务状态保持单一来源，避免组件内部状态和路由不同步。
+- 菜单、分页、步骤等受控状态优先使用 `v-model` 或命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/navigation/pagination.md

@@ -0,0 +1,75 @@
+---
+name: arco-vue-pagination
+description: "Arco Design Vue 分页 Pagination 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-pagination>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 分页 Pagination
+
+## 简介
+
+分页的基本用法，`total` 属性为必填项。
+
+## 基本用法
+
+```vue
+<template>
+  <a-pagination :total="50"/>
+</template>
+```
+
+## API
+
+### `<pagination>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|total **(必填)**|数据总数|`number`|`-`||
+|current **(v-model)**|当前的页数|`number`|`-`||
+|default-current|默认的页数（非受控状态）|`number`|`1`||
+|page-size **(v-model)**|每页展示的数据条数|`number`|`-`||
+|default-page-size|默认每页展示的数据条数（非受控状态）|`number`|`10`||
+|disabled|是否禁用|`boolean`|`false`||
+|hide-on-single-page|单页时是否隐藏分页|`boolean`|`false`||
+|simple|是否为简单模式|`boolean`|`false`||
+|show-total|是否显示数据总数|`boolean`|`false`||
+|show-more|是否显示更多按钮|`boolean`|`false`||
+|show-jumper|是否显示跳转|`boolean`|`false`||
+|show-page-size|是否显示数据条数选择器|`boolean`|`false`||
+
+> 仅列出常用项，低频属性按需查阅官方 API。
+
+### `<pagination>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|页码改变时触发|current: `number`|
+|page-size-change|数据条数改变时触发|pageSize: `number`|
+
+### `<pagination>` 插槽
+
+|插槽名|描述|参数|版本|
+|---|:---:|---|:---|
+|total|总数|total: `number`|2.9.0|
+|page-item-ellipsis|分页按钮（省略）|-|2.9.0|
+|page-item-step|分页按钮（步）|type: `'previous'\|'next'`The type of page item step|2.9.0|
+|page-item|分页按钮|page: `number`The page number of the paging button|2.9.0|
+
+## 常用模式
+
+- **更多页码**：当页码较大时，会使用更多页码的分页样式。
+- **每页条数**：通过设置 `show-page-size`， 展示每页条数选择器。
+- **页码跳转**：通过设置 `show-jumper`，显示页码跳转输入框。
+- **分页尺寸**：分页分为 `mini`、`small`、`medium`、`large` 四种尺寸。
+- **简洁模式**：通过设置 `simple` 属性开启简洁模式。
+- **展示总数**：通过设置 `show-total` 属性显示数据总数。
+- **全部展示**：展示全部配置项。
+- **自定义分页按钮**：可以通过插槽自定义分页按钮内容
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 导航状态应与路由或业务状态保持单一来源，避免组件内部状态和路由不同步。
+- 菜单、分页、步骤等受控状态优先使用 `v-model` 或命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/navigation/steps.md

@@ -0,0 +1,87 @@
+---
+name: arco-vue-steps
+description: "Arco Design Vue 步骤条 Steps 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-steps>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 步骤条 Steps
+
+## 简介
+
+步骤条的基本用法。
+
+## 基本用法
+
+```vue
+<template>
+  <div>
+    <a-steps :current="2">
+      <a-step>Succeeded</a-step>
+      <a-step>Processing</a-step>
+      <a-step>Pending</a-step>
+    </a-steps>
+    <a-divider/>
+    <div style="line-height: 140px; text-align: center; color: #C9CDD4; ">
+      Step 2 Content
+    </div>
+  </div>
+</template>
+```
+
+## API
+
+### `<steps>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|type|步骤条的类型|`'default' \| 'arrow' \| 'dot' \| 'navigation'`|`'default'`|
+|direction|步骤条的显示方向|`'horizontal' \| 'vertical'`|`'horizontal'`|
+|label-placement|标签描述文字放置的位置|`'horizontal' \| 'vertical'`|`'horizontal'`|
+|current **(v-model)**|当前步骤数|`number`|`-`|
+|default-current|默认的步骤数（非受控状态）|`number`|`1`|
+|status|当前步骤的状态|`'wait' \| 'process' \| 'finish' \| 'error'`|`'process'`|
+|line-less|是否使用无连接线样式|`boolean`|`false`|
+|small|是否使用小型步骤条|`boolean`|`false`|
+|changeable|是否可以点击切换|`boolean`|`false`|
+
+### `<steps>` 事件
+
+|事件名|描述|参数|
+|---|---|---|
+|change|步骤数发生改变时触发|step: `number`<br>ev: `Event`|
+
+### `<step>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|title|步骤的标题|`string`|`-`|
+|description|步骤的描述信息|`string`|`-`|
+|status|步骤的状态|`'wait' \| 'process' \| 'finish' \| 'error'`|`-`|
+|disabled|是否禁用|`boolean`|`false`|
+
+### `<step>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|node|节点|step: `number`<br>status: `string`|
+|icon|图标|step: `number`<br>status: `string`|
+|description|描述内容|-|
+
+## 常用模式
+
+- **描述信息**：通过设置 `description` 可以添加描述信息。
+- **标签放置位置**：通过设置 `label-placement` 可以改变标签描述文字放置的位置。放置位置分为 `horizontal` - **放置在图标右侧（默认）**、`vertical` - **放置在图标下方**两种。
+- **步骤错误**：通过设置 `status="error"` 来展示错误状态。
+- **自定义图标**：通过 `#icon` 插槽可以自定义节点图标。
+- **隐藏连接线**：通过设置 `line-less` 可以使用无连接线模式。
+- **竖直步骤条**：竖直方向的步骤条。
+- **箭头步骤条**：通过设置 `type="arrow"`，可以使用箭头类型的步骤条。**注意**：仅支持水平步骤条。
+- **点状步骤条**：通过设置 `type="dot"` ， 可以使用点状的步骤条。此模式没有 small 尺寸。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 导航状态应与路由或业务状态保持单一来源，避免组件内部状态和路由不同步。
+- 菜单、分页、步骤等受控状态优先使用 `v-model` 或命名 `v-model:*`。

.agents/skills/arco-design-vue/references/components/other/affix.md

@@ -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 容器时，先确认挂载容器和边界行为。

.agents/skills/arco-design-vue/references/components/other/anchor.md

@@ -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 容器时，先确认挂载容器和边界行为。

.agents/skills/arco-design-vue/references/components/other/back-top.md

@@ -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 容器时，先确认挂载容器和边界行为。

.agents/skills/arco-design-vue/references/components/other/resize-box.md

@@ -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 容器时，先确认挂载容器和边界行为。

.agents/skills/arco-design-vue/references/components/other/scrollbar.md

@@ -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 容器时，先确认挂载容器和边界行为。

.agents/skills/arco-design-vue/references/components/other/split.md

@@ -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 容器时，先确认挂载容器和边界行为。

.agents/skills/arco-design-vue/references/components/other/trigger.md

@@ -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 容器时，先确认挂载容器和边界行为。

.agents/skills/arco-design-vue/references/components/other/watermark.md

@@ -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 容器时，先确认挂载容器和边界行为。