From bd474293e78f336517f5330cb29123201d0ba891 Mon Sep 17 00:00:00 2001
From: hechang27-sprt <hechang27@outlook.com>
Date: Thu, 26 Mar 2026 16:43:16 +0800
Subject: [PATCH] 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>
---
 .trellis/spec/frontend/quality-guidelines.md | 78 ++++++++++++++++++++
 examples/view/base/table-v2.vue              |  6 +-
 2 files changed, 82 insertions(+), 2 deletions(-)

diff --git a/.trellis/spec/frontend/quality-guidelines.md b/.trellis/spec/frontend/quality-guidelines.md
index 05a1411..5814000 100644
--- a/.trellis/spec/frontend/quality-guidelines.md
+++ b/.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
 
 <!-- What reviewers should check -->
diff --git a/examples/view/base/table-v2.vue b/examples/view/base/table-v2.vue
index 023dfb5..b16fff3 100644
--- a/examples/view/base/table-v2.vue
+++ b/examples/view/base/table-v2.vue
@@ -22,6 +22,7 @@ import { useStore } from "vuex";
 import { reactive, onMounted, ref } from "vue";
 import { ListTableV2, SearchRow, NoobInput, NoobSelect, Infomation } from "noob-mengyxu";
 import { useI18n } from "vue3-i18n";
+import { LoremIpsum } from "lorem-ipsum";
 
 const { state } = useStore();
 const { t } = useI18n();
@@ -38,13 +39,14 @@ const example = reactive({
 const generateData = () => {
   const rows = [];
   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++) {
     rows.push({
       id: i,
       caseName: `案件${i}`,
       taskName: `任务${i}`,
       userId: `user${i}`,
-      content: `内容${i}`,
+      content: lorem.generateParagraphs(1),
       createTime: now - i * 60, // timestamps in seconds
     });
   }
@@ -82,7 +84,7 @@ const columns = [
   {
     key: "createTime",
     i18n: "table.props.4",
-    timestamp: 'unix',
+    timestamp: "unix",
   },
 ];