@jctrans-materials/comps-vue2 1.0.37-beta.4 → 1.0.37-beta.6

package/README.md

@@ -0,0 +1,158 @@
+# Vue2 组件说明（jc-utils）
+
+## 组件清单
+
+当前 `packages/vue2` 对外导出的核心组件如下：
+
+- `ApplyDataDialog`
+- `GlobalModal`
+- `JcSearch`
+- `JcVerifySlide`
+- `JcCarrierSearch`
+- `AirCarrierSearch`
+- `SeaCarrierSearch`
+- `AirLineSearch`
+- `SeaLineSearch`
+
+## 快速使用
+
+```ts
+import Vue from "vue";
+import JCtransComps from "@jctrans-materials/comps-vue2";
+import "@jctrans-materials/comps-vue2/style.css";
+
+Vue.use(JCtransComps);
+```
+
+## 组件能力速览
+
+### 1) `JcSearch`
+
+- 用途：国家/城市/港口/机场等通用地点搜索
+- 常用 Props：`value` / `modelValue`、`multiple`、`searchTypeList`、`historyKey`
+- 常用事件：`select`、`change`、`input`、`update:modelValue`
+
+### 2) `JcVerifySlide`
+
+- 用途：滑块验证码验证
+- 常用 Props：`visible`、`lang`、`mode`、`imgSize`、`barSize`
+- 常用事件：`success`、`update:visible`
+
+### 3) `JcCarrierSearch` 及包装组件
+
+- 用途：承运人/航线搜索（海运、空运）
+- 常用 Props：`value` / `modelValue`、`type`、`lineType`、`multiple`、`showApplyData`
+- 常用事件：
+  - 业务：`change`、`apply`
+  - 输入框：`focus`、`blur`、`remove-tag`
+
+包装组件：
+
+- `AirCarrierSearch`（航空公司）
+- `SeaCarrierSearch`（船公司）
+- `AirLineSearch`（空运航线）
+- `SeaLineSearch`（海运航线）
+
+### 4) `ApplyDataDialog`
+
+- 用途：申请补充数据弹窗
+- 常用 Props：`value`
+- 常用事件：`confirm`、`input` / `update:value`
+
+### 5) `GlobalModal`
+
+- 用途：全局业务弹窗容器（配合插件/事件总线）
+
+## Playground 示例
+
+可在以下页面查看 Vue2 组件演示：
+
+- `playground/v2play/src/App.vue`
+  - `Base Demo`：`JcSearch` + `ApplyDataDialog` + `GlobalModal`
+  - `Carrier Search Demo`：`JcCarrierSearch` 系列
+  - `Verify Slide Demo`：`JcVerifySlide`
+
+## GIO 埋点接入（Vue2）
+
+### 1) 按需启用（不传配置即不启用）
+
+```ts
+import Vue from "vue";
+import JCtransComps from "@jctrans-materials/comps-vue2";
+
+Vue.use(JCtransComps, {
+  tracking: {
+    enabled: true,
+    autoInit: true,
+    directiveName: "gio-track",
+    accountId: process.env.VUE_APP_GIO_ACCOUNT_ID,
+    dataSourceId: process.env.VUE_APP_GIO_DATA_SOURCE_ID,
+    appId: process.env.VUE_APP_GIO_APP_ID,
+    initOptions: {
+      debug: process.env.NODE_ENV !== "production",
+      trackPage: false,
+      autoTrackPage: true,
+      serverUrl: process.env.VUE_APP_GIO_SERVER_URL,
+    },
+  },
+});
+```
+
+如果不传 `tracking`，则不会初始化 GIO。
+
+### 2) 指令与 API 用法
+
+```vue
+<button v-gio-track="'order_submit'">提交订单</button>
+
+<button
+  v-gio-track="{
+    event: 'order_submit',
+    attrs: { source: 'cart' },
+    onTracked: ({ eventName }) => console.log(eventName),
+  }"
+>
+  提交并回调
+</button>
+```
+
+```ts
+this.$trackEvent("manual_track", { source: "manual" });
+this.$gio.track("direct_track", { source: "direct" }, () => {
+  console.log("done");
+});
+```
+
+### 3) 配置优先级
+
+1. `window.__JCTRANS_GIO_CONFIG__`（或 `globalVarName` 指定对象）
+2. `tracking` 传入配置
+3. `import.meta.env.VITE_GIO_*`
+
+### 4) GIO 单测（Vue2）
+
+测试文件：`src/gio.test.ts`
+
+覆盖点：
+
+- 初始化分支：
+  - 有 `appId`（4 参数 `init`）
+  - 无 `appId`（3 参数 `init`）
+  - 缺少必填配置时不初始化
+- 指令行为：`bind` / `update` / `unbind` 的绑定、重绑、清理
+- 回调行为：`onTracked` 在 `track` 回调后触发
+- 暴露能力：`$trackEvent` 与 `$gio` 常用 API
+
+结合 GrowingIO WebJS 常用 API 文档（含 `trackTimerStart`）对齐了以下接口可用性：
+
+- `setUserId`
+- `clearUserId`
+- `setVisitor`
+- `trackTimerStart`
+- `trackTimerEnd`
+
+运行方式：
+
+```bash
+pnpm -C packages/vue2 test:run
+```

package/dist/gio.d.ts

@@ -0,0 +1,61 @@
+import { VueConstructor } from 'vue';
+
+export type TrackAttrs = Record<string, string | number | Array<string | number>>;
+export type TrackDirectiveValue = string | {
+    event?: string;
+    name?: string;
+    attrs?: TrackAttrs;
+    attributes?: TrackAttrs;
+    trigger?: string;
+    once?: boolean;
+    stop?: boolean;
+    prevent?: boolean;
+    callback?: (payload: {
+        event: Event;
+        eventName: string;
+        attrs: TrackAttrs;
+        trigger: string;
+    }) => void;
+    onTracked?: (payload: {
+        event: Event;
+        eventName: string;
+        attrs: TrackAttrs;
+        trigger: string;
+    }) => void;
+};
+export type TrackConfig = {
+    enabled?: boolean;
+    autoInit?: boolean;
+    directiveName?: string;
+    globalVarName?: string;
+    accountId?: string;
+    dataSourceId?: string;
+    appId?: string;
+    serverUrl?: string;
+    initOptions?: {
+        debug?: boolean;
+        trackPage?: boolean;
+        forceLogin?: boolean;
+        idMapping?: boolean;
+        hashtag?: boolean;
+        autoTrackPage?: boolean;
+        serverUrl?: string;
+    };
+};
+export type GioPublicApi = {
+    isInitialized: () => boolean;
+    isBrowser: () => boolean;
+    init: (...args: any[]) => void;
+    track: (eventName: string, attrs?: TrackAttrs, callback?: () => void) => void;
+    setUserId: (userId: string) => void;
+    clearUserId: () => void;
+    setVisitor: (visitor: Record<string, any>) => void;
+    setGeneralProps: (props: Record<string, any>) => void;
+    setPageAttributes: (props: Record<string, any>) => void;
+    sendPage: () => void;
+    trackTimerStart: (eventName: string) => void;
+    trackTimerEnd: (eventName: string, attrs?: TrackAttrs) => void;
+};
+export declare function createGioTrackingPlugin(rawConfig?: TrackConfig): {
+    install(Vue: VueConstructor): void;
+};

package/dist/gio.test.d.ts

@@ -0,0 +1,2 @@
+/** 🤡 Powered by My Super Rules */
+export {};