Browse Source

chore: update table-v2 example with lorem ipsum and spec guidelines

- Add lorem ipsum test data for better visual testing
- Update quality guidelines with el-table-v2 insights

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
dev
hechang27-sprt 3 months ago
parent
commit
bd474293e7
  1. 78
      .trellis/spec/frontend/quality-guidelines.md
  2. 6
      examples/view/base/table-v2.vue

78
.trellis/spec/frontend/quality-guidelines.md

@ -44,6 +44,84 @@ Questions to answer:
--- ---
## Development Workflow
### Package Changes Testing
When making changes to `packages/` directory and testing with `examples/`:
1. **Vite dev server auto-reloads**: The dev server (`bun run dev`) automatically reloads changes in `packages/` when you access the example pages
2. **Verify changes took effect**: Modify `DEV_MODE_TS` in `packages/manage/router/index.vue` - this string is displayed at `.el-menu .menu-footer` (bottom of sidebar menu). Changing it forces the app to refresh.
3. **Build before finishing**: Run `bun run build:lib` to ensure the library builds correctly with your changes
```typescript
// In packages/manage/router/index.vue - change this string to force refresh
const DEV_MODE_TS = "2026-03-26T03:50:00.000Z"; // Update timestamp to force reload
```
### Quick Test Cycle
```bash
# 1. Make changes to packages/
# 2. Dev server auto-reloads when accessing example pages
# 3. Modify DEV_MODE_TS in packages/manage/router/index.vue if changes don't appear
# 4. Run build when done to verify
bun run build:lib
```
### Browser Automation with agent-browser
When using `agent-browser` for testing:
**DO**: Use CSS selectors with `wait` instead of fixed timeouts
```bash
# Good - waits for element to appear
agent-browser wait ".el-table-v2__row" && agent-browser snapshot
# Bad - arbitrary timeout, may be too short or waste time
agent-browser wait 3000
```
**DO**: Check console for errors after page interaction
```bash
agent-browser click "@e1" && agent-browser console
```
**DO**: Navigate with hash routes properly
```bash
# Hash-based SPA routes need explicit navigation
agent-browser navigate http://localhost:5173/#/table-v2
```
**Common wait patterns**:
- `agent-browser wait --load networkidle` - for page navigation
- `agent-browser wait ".my-selector"` - for element appearance
- `agent-browser wait --url "**/pattern"` - for URL changes
---
## Common Mistakes / Gotchas
### el-table-v2 probe row timing
When using a probe row to dynamically measure row height for el-table-v2's virtual scrolling:
**Problem**: Using a single `requestAnimationFrame` causes inconsistent row heights (first 3 rows taller than rest).
**Cause**: el-table-v2's virtual scroller calculates positions based on `estimatedRowHeight`, but a single frame isn't enough for it to fully settle.
**Solution**: Use TWO `requestAnimationFrame` calls before measuring:
```typescript
await nextTick();
await new Promise(resolve => requestAnimationFrame(resolve)); // Frame 1
await new Promise(resolve => requestAnimationFrame(resolve)); // Frame 2 - el-table-v2 now settled
const height = probeRowRef.value?.offsetHeight;
```
**Verification**: All rows should have identical heights and consistent spacing.
---
## Code Review Checklist ## Code Review Checklist
<!-- What reviewers should check --> <!-- What reviewers should check -->

6
examples/view/base/table-v2.vue

@ -22,6 +22,7 @@ import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue"; import { reactive, onMounted, ref } from "vue";
import { ListTableV2, SearchRow, NoobInput, NoobSelect, Infomation } from "noob-mengyxu"; import { ListTableV2, SearchRow, NoobInput, NoobSelect, Infomation } from "noob-mengyxu";
import { useI18n } from "vue3-i18n"; import { useI18n } from "vue3-i18n";
import { LoremIpsum } from "lorem-ipsum";
const { state } = useStore(); const { state } = useStore();
const { t } = useI18n(); const { t } = useI18n();
@ -38,13 +39,14 @@ const example = reactive({
const generateData = () => { const generateData = () => {
const rows = []; const rows = [];
const now = Math.floor(Date.now() / 1000); // Unix timestamp in seconds const now = Math.floor(Date.now() / 1000); // Unix timestamp in seconds
const lorem = new LoremIpsum({ sentencesPerParagraph: { min: 1, max: 4 }, wordsPerSentence: { min: 5, max: 10 } });
for (let i = 1; i <= 100; i++) { for (let i = 1; i <= 100; i++) {
rows.push({ rows.push({
id: i, id: i,
caseName: `案件${i}`, caseName: `案件${i}`,
taskName: `任务${i}`, taskName: `任务${i}`,
userId: `user${i}`, userId: `user${i}`,
content: `内容${i}`, content: lorem.generateParagraphs(1),
createTime: now - i * 60, // timestamps in seconds createTime: now - i * 60, // timestamps in seconds
}); });
} }
@ -82,7 +84,7 @@ const columns = [
{ {
key: "createTime", key: "createTime",
i18n: "table.props.4", i18n: "table.props.4",
timestamp: 'unix', timestamp: "unix",
}, },
]; ];

Loading…
Cancel
Save