docs(agents): add design references

2026-08-10 23:34:28 +08:00
parent a2383fc8a1
commit 72a83f5fcd
86 changed files with 8889 additions and 0 deletions
--- a/.agents/skills/arco-design-vue/references/components/feedback/alert.md
+++ b/.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`、禁用态或全局反馈，避免重复提交。
--- a/.agents/skills/arco-design-vue/references/components/feedback/drawer.md
+++ b/.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`、禁用态或全局反馈，避免重复提交。
--- a/.agents/skills/arco-design-vue/references/components/feedback/message.md
+++ b/.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`、禁用态或全局反馈，避免重复提交。
--- a/.agents/skills/arco-design-vue/references/components/feedback/modal.md
+++ b/.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`、禁用态或全局反馈，避免重复提交。
--- a/.agents/skills/arco-design-vue/references/components/feedback/notification.md
+++ b/.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`、禁用态或全局反馈，避免重复提交。
--- a/.agents/skills/arco-design-vue/references/components/feedback/popconfirm.md
+++ b/.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`、禁用态或全局反馈，避免重复提交。
--- a/.agents/skills/arco-design-vue/references/components/feedback/progress.md
+++ b/.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`、禁用态或全局反馈，避免重复提交。
--- a/.agents/skills/arco-design-vue/references/components/feedback/result.md
+++ b/.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`、禁用态或全局反馈，避免重复提交。
--- a/.agents/skills/arco-design-vue/references/components/feedback/skeleton.md
+++ b/.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`、禁用态或全局反馈，避免重复提交。
--- a/.agents/skills/arco-design-vue/references/components/feedback/spin.md
+++ b/.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`、禁用态或全局反馈，避免重复提交。