aionclaw按钮禁用与加载状态需严格对齐请求生命周期，使用disabled/loading响应式prop、bem类名绑定、usebuttonstate hook或手动try/finally控制，并注入svg图标与pointer-events: none禁用交互。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
给AionClaw中按钮补充禁用和加载状态，不是加两个class就完事——必须让状态切换与真实请求生命周期严格对齐，否则会出现点一次变灰、再点五次发五条请求、转圈停了按钮却卡死等故障。
确认按钮组件结构与状态管理方式
打开你正在修改的按钮组件文件（通常为Button.vue或Button.tsx），检查是否已使用loading和disabled作为响应式 prop。若仍用isDisabled或isLoading等非标准命名，需统一改为disabled和loading，否则后续BEM类名绑定和CSS样式将无法生效。
【关键前提】组件必须基于 AionClaw v2026.7.1+ 版本构建，低版本缺少useButtonState组合式 API 支持，强行添加状态类会导致样式断裂或逻辑错位。
添加 BEM 修饰符类名绑定
在模板中定位按钮根元素（通常是），将原始 class 替换为：
class="btn" :class="[loading && 'btn--loading', disabled && 'btn--disabled']"
这一步确保btn--loading和btn--disabled仅在对应状态为真时才被写入 DOM，且二者互不干扰、可自由叠加。禁止拼接字符串如:class="'btn btn--' + (loading ? 'loading' : '')"，会丢失空格导致类名粘连。
同步控制按钮行为与视觉反馈
方法一：使用内置useButtonState Hook（推荐）
在setup()中引入并调用：
const { loading, disabled, startLoading, stopLoading } = useButtonState();
将按钮点击事件绑定为：@click="handleClick"，并在handleClick函数内执行：
① 调用startLoading() → ② 执行异步操作（如await api.submit()）→ ③ 在finally块中调用stopLoading()
该 Hook 内置防重复点击逻辑：只要loading为真，disabled自动同步为真，无需手动维护两者的关联关系。
方法二：手动控制（仅限简单场景）
定义响应式变量：const loading = ref(false); const disabled = computed(() => props.disabled || loading.value);
点击处理函数中必须包裹try/finally，例如：
async function handleClick() { loading.value = true; try { await submit(); } finally { loading.value = false; } }
漏掉finally会导致请求异常时loading永远为true，按钮持续禁用无法恢复。
注入加载态 SVG 图标与禁用态样式
打开项目全局 CSS 文件（如src/assets/styles/components/button.css），追加以下规则：
.btn--loading { cursor: wait; opacity: 0.85; }
.btn--loading::before { content: ''; display: inline-block; width: 1em; height: 1em; margin-right: 0.5em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z'%3E%3CanimateTransform attributeName='transform' dur='0.75s' from='0 12 12' repeatCount='indefinite' to='360 12 12' type='rotate'/%3E%3C/path%3E%3C/svg%3E"); background-size: contain; }
注意：禁用态不能仅靠opacity实现，必须配合pointer-events: none彻底屏蔽交互，否则键盘用户仍可通过 Tab 键聚焦并回车触发。
.btn--disabled { pointer-events: none; }
