# OperationActions · 列表操作列规范

> 完整规范见 `src/prototypes/vm-shared/DESIGN.md` · 操作列 OperationActions

## 组件

- 路径：`src/common/OperationActions.tsx`
- 样式：`src/common/vm-operation-actions.css`（经 `vehicle-management/style.css` 全局引入）

## 布局

```
[👁 详情]  [✏️ 编辑]  [⋮]
```

- **详情 / 编辑**：外显，带 Lucide 图标 + 文案，最小触控 44×44px
- **更多**：仅图标 `MoreHorizontal`，点击 Ant Dropdown 展开其余操作
- 无详情/编辑时省略对应按钮；无任何操作时显示 `-`

## 迁移步骤

1. 确认页面已 `import '../vehicle-management/style.css'`
2. `import { OperationActions, splitOperationActions } from '../../common/OperationActions'`
3. 将原 `getOperationButtons` / 内联 `Button link` 改为：

```tsx
<OperationActions
  view={{ onClick: () => ... }}
  edit={canEdit ? { onClick: () => ... } : undefined}
  more={[...]}
/>
```

4. 操作列宽建议 `168`，`fixed: 'right'`
5. 从 `more` 中移除已外显的「详情」「编辑」项

## 扁平列表迁移

```tsx
const { view, edit, more } = splitOperationActions(allItems);
return <OperationActions view={view} edit={edit} more={more} />;
```

## 禁止

- 横排超过 2 个 `Button type="link"` 主操作
- 文字「更多」链接触发器
- pipe `|` 分隔操作链接