49 lines
1.3 KiB
Markdown
49 lines
1.3 KiB
Markdown
# 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 `|` 分隔操作链接
|