OneOS1.2/src/common/operation-actions-spec.md

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 改为：

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

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

扁平列表迁移

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

禁止

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