wuzilongandCursor
3aa0f0ff2e
产品表按像素列宽重排，水印改到页面右下角，打开编辑时不再铺满整表绿线。 Co-authored-by: Cursor <cursoragent@cursor.com>
52 lines
2.2 KiB
Markdown
52 lines
2.2 KiB
Markdown
# 富文本表格边缘拖拽 Implementation Plan
|
|
|
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
|
|
|
**Goal:** 在 TinyMCE 里只通过第一行右边界调列宽、第一列下边界调行高，拖宽一列时整张表变宽。
|
|
|
|
**Architecture:** 列宽、行高的数值变化放在纯函数里。编辑器里另挂一层短句柄，只在鼠标靠近对应边界时出现；松手才记入撤销。打开编辑器时不改表格 HTML。
|
|
|
|
**Tech Stack:** Vue 3、TinyMCE、Node `node:test`。
|
|
|
|
---
|
|
|
|
### Task 1: 列宽与行高纯函数
|
|
|
|
**Files:**
|
|
- Create: `web-admin/src/utils/tinymce-table-edge-resize.ts`
|
|
- Test: `web-admin/src/utils/tinymce-table-edge-resize.test.ts`
|
|
|
|
- [x] **Step 1: 写出失败测试**
|
|
|
|
`applyColumnWidthDelta([100, 36, 46], 1, 20)` 得到宽度 `[100, 56, 46]`、表宽 `202`。位移 `-100` 时该列停在 `28`。`applyRowHeightDelta(30, -40)` 得到 `20`。
|
|
|
|
- [x] **Step 2: 运行测试确认失败**
|
|
|
|
Run: `node --experimental-strip-types --test src/utils/tinymce-table-edge-resize.test.ts`
|
|
Expected: FAIL，模块尚不存在。
|
|
|
|
- [x] **Step 3: 实现纯函数并通过测试**
|
|
|
|
列宽下限 28，行高下限 20。只改目标列，表宽等于各列之和。
|
|
|
|
- [x] **Step 4: 再跑测试**
|
|
|
|
Expected: PASS。
|
|
|
|
### Task 2: 编辑器短句柄
|
|
|
|
**Files:**
|
|
- Modify: `web-admin/src/utils/tinymce-table-edge-resize.ts`
|
|
- Modify: `web-admin/src/components/TinyMceEditor/index.vue`
|
|
- Modify: 合同弹窗、合同详情、报价弹窗里的编辑提示
|
|
|
|
- [x] **Step 1: `setupTableEdgeResize`**
|
|
|
|
只读不挂句柄。句柄带 `data-mce-bogus="all"`，保存内容时不带上。第一行且 `colspan === 1` 的格子右边界调列宽；该行从第 1 列起始的格子下边界调行高。拖列时写入 `col`、表头单元格、表宽和同样的 `max-width`。拖行时只写该行高度。
|
|
|
|
- [x] **Step 2: 在 `TinyMceEditor` 的 `setup` 中调用**
|
|
|
|
原生 `table_resize_bars` 保持 `false`。
|
|
|
|
- [x] **Step 3: 提示文案改为「表头右边界调列宽，每行最左格下边界调行高」**
|