迭代 ONE-OS 多原型:统一标注壳与操作规范,租赁明细/合同/提车应收款增强,新增任务工单,同步导航与合包页面。
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
48
src/common/operation-actions-spec.md
Normal file
48
src/common/operation-actions-spec.md
Normal file
@@ -0,0 +1,48 @@
|
||||
# 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 `|` 分隔操作链接
|
||||
Reference in New Issue
Block a user