wkjp-list-page 1.0.41 → 1.0.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +38 -0
  2. package/package.json +1 -1
  3. package/src/components/CommonListPage.vue +32 -2
package/README.md CHANGED
@@ -258,6 +258,43 @@ deviceListTransformList(list) {
258
258
  | `selection-change` | 表格多选变化。 |
259
259
  | `fetched` | 每次 `api` 成功，参数 `{ list, total, page, pageSize, raw }`。 |
260
260
  | `columns-change` | **仅开启列配置**：弹窗确定后，当前列配置数组。 |
261
+ | `track` | **埋点事件**：用户点击「展开查询 / 收起查询 / 配置字段 / 重置」时触发，参数 `{ action, pageKey, timestamp }`；组件已内置百度统计上报，此事件用于额外接入，详见 §2.15。 |
262
+
263
+ ---
264
+
265
+ ## 2.15 监测「展开查询 / 收起查询 / 配置字段 / 重置」的点击次数（埋点）
266
+
267
+ **情况：** 想统计用户对搜索折叠、表头设置这几个操作的使用频率。
268
+ **说明：** 组件 **内置了百度统计上报**，并在以下四个动作发生时同时 **`$emit('track', payload)`**，无需消费方手写上报逻辑。
269
+
270
+ | 动作 | `action` 值 | 百度统计「事件操作」 | 触发时机 |
271
+ |------|------------|----------------------|----------|
272
+ | 展开查询 | `expand-search` | 展开查询 | 点击「展开查询」 |
273
+ | 收起查询 | `fold-search` | 收起查询 | 点击「收起查询」 |
274
+ | 配置字段 | `column-config` | 配置字段 | 打开表头设置面板（关闭不计） |
275
+ | 重置 | `clear-query` | 重置 | 点击「重置 / 清除查询」按钮 |
276
+
277
+ **前置条件（零配置）：** 页面已引入百度统计代码（`hm.js`，全站一次，通常放 `index.html` 的 `<head>`），组件会自动 `window._hmt.push(['_trackEvent', '列表页', 动作名, trackPageKey])` 上报。未引入 `hm.js` 时静默跳过，不报错。可选传 **`track-page-key`** 作为事件标签区分列表页。
278
+
279
+ ```vue
280
+ <common-list-page track-page-key="设备列表" ... />
281
+ ```
282
+
283
+ **看数据：** 百度统计后台 → **行为分析 → 事件分析**，事件类别选「列表页」，按「事件操作」即可看到四个动作各自的触发次数（事件数据通常 **次日** 才出现）。
284
+
285
+ **额外接其它埋点（可选）：** 仍可监听 `@track`，与内置上报并存：
286
+
287
+ ```vue
288
+ <common-list-page @track="onListTrack" ... />
289
+ ```
290
+
291
+ ```js
292
+ onListTrack({ action, pageKey, timestamp }) {
293
+ // 例如再推一份到其它 SDK；百度统计已由组件内部自动上报
294
+ }
295
+ ```
296
+
297
+ `payload` 字段：`action`（动作类型，见上表）、`pageKey`（即 `track-page-key`，未传为空串）、`timestamp`（`Date.now()` 毫秒时间戳）。
261
298
 
262
299
  ---
263
300
 
@@ -301,6 +338,7 @@ deviceListTransformList(list) {
301
338
  | `collapseSearch` | （未传） | 未传时 **`searchOption.length > searchVisibleMax`** 自动折叠；`true` / `false` 强制开/关。 |
302
339
  | `searchVisibleMax` | `null` | 折叠时默认展示条数，**未传按 6**；查询项 **超过** 该值时出现「展开查询」；显式传 ≤0 则不折叠。 |
303
340
  | `expandSearchText` / `foldSearchText` | 展开查询 / 收起 | 折叠按钮文案。 |
341
+ | `trackPageKey` | `""` | 埋点页面/业务标识，随 `track` 事件上报以区分列表页（见 §2.15）。 |
304
342
  | `columnOverflowTooltipChars` | `20` | 自动列宽：内容超过该字符数时按该字数定宽并 `show-overflow-tooltip`。 |
305
343
  | `columnAutoWidthCharPx` | `14` | 自动列宽每字符折算像素。 |
306
344
  | `columnAutoWidthPadding` | `24` | 自动列宽额外内边距像素。 |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "wkjp-list-page",
3
- "version": "1.0.41",
3
+ "version": "1.0.43",
4
4
  "description": "Vue2 + ElementUI CommonListPage component",
5
5
  "main": "src/index.js",
6
6
  "module": "src/index.js",
package/src/components/CommonListPage.vue CHANGED
@@ -94,12 +94,12 @@
94
94
  />
95
95
  </el-form-item>
96
96
  <el-form-item v-if="searchCollapseActive && !internalSearchExpanded" class="common-list-page__search-toggle">
97
- <el-button type="text" class="common-list-page__search-toggle-btn" @click="toggleSearchExpanded(true)">
97
+ <el-button type="text" class="common-list-page__search-toggle-btn" @click="toggleSearchExpanded(true); emitTrack('expand-search')">
98
98
  {{ expandSearchText }}
99
99
  </el-button>
100
100
  </el-form-item>
101
101
  <el-form-item v-if="searchCollapseActive && internalSearchExpanded" class="common-list-page__search-toggle">
102
- <el-button type="text" class="common-list-page__search-toggle-btn" @click="toggleSearchExpanded(false)">
102
+ <el-button type="text" class="common-list-page__search-toggle-btn" @click="toggleSearchExpanded(false); emitTrack('fold-search')">
103
103
  {{ foldSearchText }}
104
104
  </el-button>
105
105
  </el-form-item>
@@ -430,6 +430,13 @@ export default {
430
430
  searchExpanded: { type: Boolean, default: true },
431
431
  expandSearchText: { type: String, default: "展开查询" },
432
432
  foldSearchText: { type: String, default: "收起查询" },
433
+ /**
434
+ * 埋点用的页面/业务标识，会随 `track` 事件一起上报，用于区分是哪个列表页的埋点。
435
+ * 不传则上报为空字符串。监听 `@track` 事件接入自家埋点 SDK，
436
+ * 回调参数为 `{ action, pageKey, timestamp }`，
437
+ * `action` 取值：`expand-search` / `fold-search` / `column-config`。
438
+ */
439
+ trackPageKey: { type: String, default: "" },
433
440
  /** 为 true 且传入 `export-api` 时，在搜索区右侧显示内置导出按钮（基于 `exportFile`） */
434
441
  showExport: { type: Boolean, default: false },
435
442
  /**
@@ -728,6 +735,27 @@ export default {
728
735
  // 使用 .sync 修饰符更新父组件的值
729
736
  this.$emit("update:searchExpanded", expanded);
730
737
  },
738
+ /** 统一上报埋点：内置百度统计上报，并触发 track 事件供外部接管 */
739
+ emitTrack(action) {
740
+ // 1) 内置上报到百度统计（页面已引入 hm.js 时生效；未引入则静默跳过）
741
+ var actionLabelMap = {
742
+ "expand-search": "展开查询",
743
+ "fold-search": "收起查询",
744
+ "column-config": "配置字段",
745
+ "clear-query": "重置",
746
+ };
747
+ var label = actionLabelMap[action] || action;
748
+ if (typeof window !== "undefined" && window._hmt) {
749
+ // _hmt.push(['_trackEvent', 类别, 操作, 标签])
750
+ window._hmt.push(["_trackEvent", "列表页", label, this.trackPageKey || ""]);
751
+ }
752
+ // 2) 仍抛出 track 事件，外部可自行接入其它埋点或做额外处理
753
+ this.$emit("track", {
754
+ action: action,
755
+ pageKey: this.trackPageKey,
756
+ timestamp: Date.now(),
757
+ });
758
+ },
731
759
  isBuiltinCellColumn(col) {
732
760
  return col && ["selection", "index", "expand"].indexOf(col.type) !== -1;
733
761
  },
@@ -1055,6 +1083,7 @@ export default {
1055
1083
  });
1056
1084
  },
1057
1085
  handleClearQueryClick() {
1086
+ this.emitTrack("clear-query");
1058
1087
  this.applyInitialFiltersSnapshot();
1059
1088
  this.$emit("clear-query");
1060
1089
  if (this.fetchOnClearQuery) {
@@ -1432,6 +1461,7 @@ export default {
1432
1461
  this.cancelColumnConfig();
1433
1462
  return;
1434
1463
  }
1464
+ this.emitTrack("column-config");
1435
1465
  this.onColumnConfigShow();
1436
1466
  this.columnConfigVisible = true;
1437
1467
  const pop = this.$refs.columnConfigPopover;