@kevisual/query 0.0.32 → 0.0.34

package/dist/query-adapter.js

@@ -80,7 +80,7 @@ const adapter = async (opts = {}, overloadOpts) => {
         }
         else if (isTextForContentType(contentType)) {
             return {
-                code: 200,
+                code: response.status,
                 status: response.status,
                 data: await response.text(), // 直接返回文本内容
             };

package/dist/query-browser.d.ts

@@ -112,6 +112,13 @@ type QueryOpts$1 = {
     adapter?: typeof adapter;
     [key: string]: any;
 } & AdapterOpts;
+type QueryOptions = {
+    url?: string;
+    adapter?: typeof adapter;
+    headers?: Record<string, string>;
+    timeout?: number;
+    isClient?: boolean;
+};
 type Data = {
     path?: string;
     key?: string;
@@ -172,7 +179,8 @@ declare class Query {
      */
     stop?: boolean;
     qws: QueryWs;
-    constructor(opts?: QueryOpts$1);
+    isClient: boolean;
+    constructor(opts?: QueryOptions);
     setQueryWs(qws: QueryWs): void;
     /**
      * 突然停止请求
@@ -209,7 +217,6 @@ declare class Query {
     fetchText(urlOrOptions?: string | QueryOpts$1, options?: QueryOpts$1): Promise<Result<any>>;
 }
 
-/** @deprecated */
 declare class BaseQuery<T extends Query = Query, R extends {
     queryChain?: any;
     query?: any;
@@ -228,6 +235,10 @@ declare class BaseQuery<T extends Query = Query, R extends {
     post<R = any, P = any>(data: P, options?: DataOpts): Promise<Result<R>>;
     get<R = any, P = any>(data: P, options?: DataOpts): Promise<Result<R>>;
 }
+/**
+ * @deprecated
+ * 前端调用后端QueryRouter, 默认路径 /client/router
+ */
 declare class ClientQuery extends Query {
     constructor(opts?: QueryOpts$1);
 }
@@ -237,6 +248,7 @@ type QueryOpts = {
     adapter?: typeof adapter;
     headers?: Record<string, string>;
     timeout?: number;
+    isClient?: boolean;
 };
 /**
  * 前端调用后端QueryRouter, 封装 beforeRequest 和 wss
@@ -245,7 +257,7 @@ declare class QueryClient extends Query {
     tokenName: string;
     storage: Storage;
     token: string;
-    constructor(opts?: QueryOpts & {
+    constructor(opts?: QueryOptions & {
         tokenName?: string;
         storage?: Storage;
         io?: boolean;
@@ -257,4 +269,4 @@ declare class QueryClient extends Query {
 }
 
 export { BaseQuery, ClientQuery, Query, QueryClient, QueryWs, adapter, wrapperError };
-export type { Data, DataOpts, QueryOpts, QueryWsOpts, Result };
+export type { Data, DataOpts, QueryOptions, QueryOpts, QueryWsOpts, Result };

package/dist/query-browser.js

@@ -79,7 +79,7 @@ const adapter = async (opts = {}, overloadOpts) => {
         }
         else if (isTextForContentType(contentType)) {
             return {
-                code: 200,
+                code: response.status,
                 status: response.status,
                 data: await response.text(), // 直接返回文本内容
             };
@@ -358,9 +358,11 @@ class Query {
     stop;
     // 默认不使用ws
     qws;
+    isClient = false;
     constructor(opts) {
         this.adapter = opts?.adapter || adapter;
-        this.url = opts?.url || '/api/router';
+        const defaultURL = opts?.isClient ? '/client/router' : '/api/router';
+        this.url = opts?.url || defaultURL;
         this.headers = opts?.headers || {
             'Content-Type': 'application/json',
         };
@@ -502,7 +504,6 @@ class Query {
         return res;
     }
 }
-/** @deprecated */
 class BaseQuery {
     query;
     queryDefine;
@@ -528,6 +529,10 @@ class BaseQuery {
         return this.query.get(data, options);
     }
 }
+/**
+ * @deprecated
+ * 前端调用后端QueryRouter, 默认路径 /client/router
+ */
 class ClientQuery extends Query {
     constructor(opts) {
         super({ ...opts, url: opts?.url || '/client/router' });

package/dist/query.d.ts

@@ -112,6 +112,13 @@ type QueryOpts = {
     adapter?: typeof adapter;
     [key: string]: any;
 } & AdapterOpts;
+type QueryOptions = {
+    url?: string;
+    adapter?: typeof adapter;
+    headers?: Record<string, string>;
+    timeout?: number;
+    isClient?: boolean;
+};
 type Data = {
     path?: string;
     key?: string;
@@ -183,7 +190,8 @@ declare class Query {
      */
     stop?: boolean;
     qws: QueryWs;
-    constructor(opts?: QueryOpts);
+    isClient: boolean;
+    constructor(opts?: QueryOptions);
     setQueryWs(qws: QueryWs): void;
     /**
      * 突然停止请求
@@ -220,7 +228,6 @@ declare class Query {
     fetchText(urlOrOptions?: string | QueryOpts, options?: QueryOpts): Promise<Result<any>>;
 }
 
-/** @deprecated */
 declare class BaseQuery<T extends Query = Query, R extends {
     queryChain?: any;
     query?: any;
@@ -239,9 +246,13 @@ declare class BaseQuery<T extends Query = Query, R extends {
     post<R = any, P = any>(data: P, options?: DataOpts): Promise<Result<R>>;
     get<R = any, P = any>(data: P, options?: DataOpts): Promise<Result<R>>;
 }
+/**
+ * @deprecated
+ * 前端调用后端QueryRouter, 默认路径 /client/router
+ */
 declare class ClientQuery extends Query {
     constructor(opts?: QueryOpts);
 }
 
 export { BaseQuery, ClientQuery, Query, adapter, setBaseResponse, wrapperError };
-export type { Data, DataOpts, Fn, QueryOpts, Result };
+export type { Data, DataOpts, Fn, QueryOptions, QueryOpts, Result };

package/dist/query.js

@@ -79,7 +79,7 @@ const adapter = async (opts = {}, overloadOpts) => {
         }
         else if (isTextForContentType(contentType)) {
             return {
-                code: 200,
+                code: response.status,
                 status: response.status,
                 data: await response.text(), // 直接返回文本内容
             };
@@ -161,9 +161,11 @@ class Query {
     stop;
     // 默认不使用ws
     qws;
+    isClient = false;
     constructor(opts) {
         this.adapter = opts?.adapter || adapter;
-        this.url = opts?.url || '/api/router';
+        const defaultURL = opts?.isClient ? '/client/router' : '/api/router';
+        this.url = opts?.url || defaultURL;
         this.headers = opts?.headers || {
             'Content-Type': 'application/json',
         };
@@ -305,7 +307,6 @@ class Query {
         return res;
     }
 }
-/** @deprecated */
 class BaseQuery {
     query;
     queryDefine;
@@ -331,6 +332,10 @@ class BaseQuery {
         return this.query.get(data, options);
     }
 }
+/**
+ * @deprecated
+ * 前端调用后端QueryRouter, 默认路径 /client/router
+ */
 class ClientQuery extends Query {
     constructor(opts) {
         super({ ...opts, url: opts?.url || '/client/router' });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kevisual/query",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "main": "dist/query-browser.js",
   "private": false,
   "type": "module",
@@ -11,7 +11,8 @@
     "clean": "rm -rf dist"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "keywords": [
     "kevisual",
@@ -23,7 +24,7 @@
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
-    "rollup": "^4.53.3",
+    "rollup": "^4.54.0",
     "rollup-plugin-dts": "^6.3.0",
     "typescript": "^5.9.3",
     "zustand": "^5.0.9"
@@ -47,10 +48,9 @@
     "./ws": {
       "import": "./dist/query-ws.js",
       "require": "./dist/query-ws.js"
-    },
-    "./query-ai": {
-      "import": "./dist/query-ai.js",
-      "require": "./dist/query-ai.js"
     }
+  },
+  "dependencies": {
+    "tslib": "^2.8.1"
   }
-}
+}

package/src/adapter.ts

@@ -0,0 +1,129 @@
+export const methods = ['GET', 'POST'] as const;
+export type Method = (typeof methods)[number];
+
+type SimpleObject = Record<string, any>;
+export type AdapterOpts = {
+  url?: string;
+  headers?: Record<string, string>;
+  /**
+   * 只用户POST请求，传递的查询参数，
+   * GET请求默认方body自己转化为查询参数
+   */
+  params?: Record<string, any>;
+  body?: Record<string, any> | FormData; // body 可以是对象、字符串或 FormData
+  timeout?: number;
+  method?: Method;
+  /**
+   * @deprecated use responseType
+   */
+  isBlob?: boolean; // 是否返回 Blob 对象, 第一优先
+  /**
+   * @deprecated use responseType
+   */
+  isText?: boolean; // 是否返回文本内容， 第二优先
+  /**
+   * 响应类型,
+   * */
+  responseType?: 'json' | 'text' | 'blob';
+  isPostFile?: boolean; // 是否为文件上传
+};
+export const isTextForContentType = (contentType: string | null) => {
+  if (!contentType) return false;
+  const textTypes = ['text/', 'xml', 'html', 'javascript', 'css', 'csv', 'plain', 'x-www-form-urlencoded', 'md'];
+  return textTypes.some((type) => contentType.includes(type));
+};
+/**
+ *
+ * @param opts
+ * @param overloadOpts 覆盖fetch的默认配置
+ * @returns
+ */
+export const adapter = async (opts: AdapterOpts = {}, overloadOpts?: RequestInit) => {
+  const controller = new AbortController();
+  const signal = controller.signal;
+  const isPostFile = opts.isPostFile || false; // 是否为文件上传
+  let responseType = opts.responseType || 'json'; // 响应类型
+  if (opts.isBlob) {
+    responseType = 'blob';
+  } else if (opts.isText) {
+    responseType = 'text';
+  }
+
+  const timeout = opts.timeout || 60000 * 3; // 默认超时时间为 60s * 3
+  const timer = setTimeout(() => {
+    controller.abort();
+  }, timeout);
+  let method = overloadOpts?.method || opts?.method || 'POST';
+  let headers = { ...opts?.headers, ...overloadOpts?.headers };
+  let origin = '';
+  let url: URL;
+  if (opts?.url?.startsWith('http')) {
+    url = new URL(opts.url);
+  } else {
+    origin = window?.location?.origin || 'http://localhost:51015';
+    url = new URL(opts.url, origin);
+  }
+  const isGet = method === 'GET';
+  if (isGet) {
+    url.search = new URLSearchParams(opts.body as SimpleObject).toString();
+  } else {
+    const params = opts.params || {};
+    url.search = new URLSearchParams(params as SimpleObject).toString();
+  }
+  let body: string | FormData | undefined = undefined;
+  if (isGet) {
+    body = undefined;
+  } else if (isPostFile) {
+    body = opts.body as FormData; // 如果是文件上传，直接使用 FormData
+  } else {
+    headers = {
+      'Content-Type': 'application/json',
+      ...headers,
+    };
+    body = JSON.stringify(opts.body); // 否则将对象转换为 JSON 字符串
+  }
+  return fetch(url, {
+    method: method.toUpperCase(),
+    signal,
+    body: body,
+    ...overloadOpts,
+    headers: headers,
+  })
+    .then(async (response) => {
+      // 获取 Content-Type 头部信息
+      const contentType = response.headers.get('Content-Type');
+      if (responseType === 'blob') {
+        return await response.blob(); // 直接返回 Blob 对象
+      }
+      const isText = responseType === 'text';
+      const isJson = contentType && contentType.includes('application/json');
+      // 判断返回的数据类型
+      if (isJson && !isText) {
+        return await response.json(); // 解析为 JSON
+      } else if (isTextForContentType(contentType)) {
+        return {
+          code: response.status,
+          status: response.status,
+          data: await response.text(), // 直接返回文本内容
+        };
+      } else {
+        return response;
+      }
+    })
+    .catch((err) => {
+      if (err.name === 'AbortError') {
+        console.log('Request timed out and was aborted');
+      }
+      console.error(err);
+      return {
+        code: 500,
+      };
+    })
+    .finally(() => {
+      clearTimeout(timer);
+    });
+};
+/**
+ * adapter
+ */
+export const queryFetch = adapter;

package/src/index.ts

@@ -0,0 +1 @@
+export * from './query-browser.ts'

package/src/query-browser.ts

@@ -0,0 +1,57 @@
+import { adapter } from './adapter.ts';
+import { QueryWs, QueryWsOpts } from './ws.ts';
+import { Query, ClientQuery } from './query.ts';
+import { BaseQuery, QueryOptions, wrapperError } from './query.ts';
+
+export { QueryOpts, QueryWs, ClientQuery, Query, QueryWsOpts, adapter, BaseQuery, wrapperError };
+export { QueryOptions }
+export type { DataOpts, Result, Data } from './query.ts';
+
+type QueryOpts = {
+  url?: string;
+  adapter?: typeof adapter;
+  headers?: Record<string, string>;
+  timeout?: number;
+  isClient?: boolean;
+};
+
+/**
+ * 前端调用后端QueryRouter, 封装 beforeRequest 和 wss
+ */
+export class QueryClient extends Query {
+  tokenName: string;
+  storage: Storage;
+  token: string;
+  constructor(opts?: QueryOptions & { tokenName?: string; storage?: Storage; io?: boolean }) {
+    super(opts);
+    this.tokenName = opts?.tokenName || 'token';
+    this.storage = opts?.storage || localStorage;
+    this.beforeRequest = async (opts) => {
+      const token = this.token || this.getToken();
+      if (token) {
+        opts.headers = {
+          ...opts.headers,
+          Authorization: `Bearer ${token}`,
+        };
+      }
+      return opts;
+    };
+    if (opts?.io) {
+      this.createWs();
+    }
+  }
+  createWs(opts?: QueryWsOpts) {
+    this.qws = new QueryWs({ url: this.url, ...opts });
+  }
+  getToken() {
+    return this.storage.getItem(this.tokenName);
+  }
+  saveToken(token: string) {
+    this.storage.setItem(this.tokenName, token);
+  }
+  removeToken() {
+    this.storage.removeItem(this.tokenName);
+  }
+}
+// 移除默认生成的实例
+// export const client = new QueryClient();

package/src/query.ts

@@ -0,0 +1,295 @@
+import { adapter, Method, AdapterOpts } from './adapter.ts';
+import type { QueryWs } from './ws.ts';
+/**
+ * 请求前处理函数
+ * @param opts 请求配置
+ * @returns 请求配置
+ */
+export type Fn = (opts: {
+  url?: string;
+  headers?: Record<string, string>;
+  body?: Record<string, any>;
+  [key: string]: any;
+  timeout?: number;
+}) => Promise<Record<string, any> | false>;
+
+export type QueryOpts = {
+  adapter?: typeof adapter;
+  [key: string]: any;
+} & AdapterOpts;
+
+export type QueryOptions = {
+  url?: string;
+  adapter?: typeof adapter;
+  headers?: Record<string, string>;
+  timeout?: number;
+  isClient?: boolean;
+}
+export type Data = {
+  path?: string;
+  key?: string;
+  payload?: Record<string, any>;
+  [key: string]: any;
+};
+export type Result<S = any, U = {}> = {
+  code: number;
+  data?: S;
+  message?: string;
+} & U;
+// 额外功能
+export type DataOpts = Partial<QueryOpts> & {
+  beforeRequest?: Fn;
+  afterResponse?: <S = any>(result: Result<S>, ctx?: { req?: any; res?: any; fetch?: any }) => Promise<Result<S>>;
+  /**
+   * 是否在stop的时候不请求
+   */
+  noStop?: boolean;
+};
+/**
+ * 设置基础响应, 设置 success 和 showError,
+ * success 是 code 是否等于 200
+ * showError 是 如果 success 为 false 且 noMsg 为 false, 则调用 showError
+ * @param res 响应
+ */
+export const setBaseResponse = (res: Partial<Result & { success?: boolean; showError?: (fn?: () => void) => void; noMsg?: boolean }>) => {
+  res.success = res.code === 200;
+  /**
+   * 显示错误
+   * @param fn 错误处理函数
+   */
+  res.showError = (fn?: () => void) => {
+    if (!res.success && !res.noMsg) {
+      fn?.();
+    }
+  };
+  return res as Result;
+};
+export const wrapperError = ({ code, message }: { code?: number; message?: string }) => {
+  const result = {
+    code: code || 500,
+    success: false,
+    message: message || 'api request error',
+    showError: (fn?: () => void) => {
+      //
+    },
+    noMsg: true,
+  };
+  return result;
+};
+/**
+ * const query = new Query();
+ * const res = await query.post({
+ *   path: 'demo',
+ *   key: '1',
+ *  });
+ *
+ * U是参数 V是返回值
+ */
+export class Query {
+  adapter: typeof adapter;
+  url: string;
+  /**
+   * 请求前处理函数
+   */
+  beforeRequest?: DataOpts['beforeRequest'];
+  /**  
+   *  请求后处理函数
+   */
+  afterResponse?: DataOpts['afterResponse'];
+  headers?: Record<string, string>;
+  timeout?: number;
+  /**
+   * 需要突然停止请求，比如401的时候
+   */
+  stop?: boolean;
+  // 默认不使用ws
+  qws: QueryWs;
+  isClient = false;
+  constructor(opts?: QueryOptions) {
+    this.adapter = opts?.adapter || adapter;
+    const defaultURL = opts?.isClient ? '/client/router' : '/api/router';
+    this.url = opts?.url || defaultURL;
+    this.headers = opts?.headers || {
+      'Content-Type': 'application/json',
+    };
+    this.timeout = opts?.timeout || 60000 * 3; // 默认超时时间为 60s * 3
+  }
+  setQueryWs(qws: QueryWs) {
+    this.qws = qws;
+  }
+  /**
+   * 突然停止请求
+   */
+  setStop(stop: boolean) {
+    this.stop = stop;
+  }
+  /**
+   * 发送 get 请求，转到 post 请求
+   *  T是请求类型自定义
+   *  S是返回类型自定义
+   * @param params 请求参数
+   * @param options 请求配置
+   * @returns 请求结果
+   */
+  async get<R = any, P = any>(params: Data & P, options?: DataOpts): Promise<Result<R>> {
+    return this.post(params, options);
+  }
+  /**
+   * 发送 post 请求
+   *  T是请求类型自定义
+   *  S是返回类型自定义
+   * @param body 请求体
+   * @param options 请求配置
+   * @returns 请求结果
+   */
+  async post<R = any, P = any>(body: Data & P, options?: DataOpts): Promise<Result<R>> {
+    const url = options?.url || this.url;
+    const { headers, adapter, beforeRequest, afterResponse, timeout, ...rest } = options || {};
+    const _headers = { ...this.headers, ...headers };
+    const _adapter = adapter || this.adapter;
+    const _beforeRequest = beforeRequest || this.beforeRequest;
+    const _afterResponse = afterResponse || this.afterResponse;
+    const _timeout = timeout || this.timeout;
+    const req = {
+      url: url,
+      headers: _headers,
+      body,
+      timeout: _timeout,
+      ...rest,
+    };
+    try {
+      if (_beforeRequest) {
+        const res = await _beforeRequest(req);
+        if (res === false) {
+          return wrapperError({
+            code: 500,
+            message: 'request is cancel',
+            // @ts-ignore
+            req: req,
+          });
+        }
+      }
+    } catch (e) {
+      console.error('request beforeFn error', e, req);
+      return wrapperError({
+        code: 500,
+        message: 'api request beforeFn error',
+        // @ts-ignore
+        req: req,
+      });
+    }
+    if (this.stop && !options?.noStop) {
+      const that = this;
+      await new Promise((resolve) => {
+        let timer = 0;
+        const detect = setInterval(() => {
+          if (!that.stop) {
+            clearInterval(detect);
+            resolve(true);
+          }
+          timer++;
+          if (timer > 30) {
+            console.error('request stop: timeout', req.url, timer);
+          }
+        }, 1000);
+      });
+    }
+    return _adapter(req).then(async (res) => {
+      try {
+        if (_afterResponse) {
+          return await _afterResponse(res, {
+            req,
+            res,
+            fetch: adapter,
+          });
+        }
+
+        return res;
+      } catch (e) {
+        console.error('request afterFn error', e, req);
+        return wrapperError({
+          code: 500,
+          message: 'api request afterFn error',
+          // @ts-ignore
+          req: req,
+        });
+      }
+    });
+  }
+  /**
+   * 设置请求前处理，设置请求前处理函数
+   * @param fn 处理函数
+   */
+  before(fn: DataOpts['beforeRequest']) {
+    this.beforeRequest = fn;
+  }
+  /**
+   * 设置请求后处理，设置请求后处理函数
+   * @param fn 处理函数
+   */
+  after(fn: DataOpts['afterResponse']) {
+    this.afterResponse = fn;
+  }
+  async fetchText(urlOrOptions?: string | QueryOpts, options?: QueryOpts): Promise<Result<any>> {
+    let _options = { ...options };
+    if (typeof urlOrOptions === 'string' && !_options.url) {
+      _options.url = urlOrOptions;
+    }
+    if (typeof urlOrOptions === 'object') {
+      _options = { ...urlOrOptions, ..._options };
+    }
+    const res = await adapter({
+      method: 'GET',
+      ..._options,
+      headers: {
+        ...this.headers,
+        ...(_options?.headers || {}),
+      },
+    });
+    if (res && !res.code) {
+      return {
+        code: 200,
+        data: res,
+      }
+    }
+    return res;
+  }
+}
+
+export { adapter };
+
+
+export class BaseQuery<T extends Query = Query, R extends { queryChain?: any; query?: any } = { queryChain: any; query?: T }> {
+  query: T;
+  queryDefine: R;
+  constructor(opts?: { query?: T; queryDefine?: R; clientQuery?: T }) {
+    if (opts?.clientQuery) {
+      this.query = opts.clientQuery;
+    } else {
+      this.query = opts?.query;
+    }
+    if (opts.queryDefine) {
+      this.queryDefine = opts.queryDefine;
+      this.queryDefine.query = this.query;
+    }
+  }
+  get chain(): R['queryChain'] {
+    return this.queryDefine.queryChain;
+  }
+  post<R = any, P = any>(data: P, options?: DataOpts): Promise<Result<R>> {
+    return this.query.post(data, options);
+  }
+  get<R = any, P = any>(data: P, options?: DataOpts): Promise<Result<R>> {
+    return this.query.get(data, options);
+  }
+}
+
+/**
+ * @deprecated
+ * 前端调用后端QueryRouter, 默认路径 /client/router
+ */
+export class ClientQuery extends Query {
+  constructor(opts?: QueryOpts) {
+    super({ ...opts, url: opts?.url || '/client/router' });
+  }
+}

package/src/utils.ts

@@ -0,0 +1,24 @@
+export const parseUrl = (url: string) => {
+  try {
+    new URL(url);
+  } catch (e) {
+    const _url = new URL(url, location.origin);
+    return _url.href;
+  }
+};
+
+export const parseWsUrl = (url: string) => {
+  try {
+    new URL(url);
+    return url;
+  } catch (e) {
+    const _url = new URL(url, location.origin);
+    if (_url.protocol === 'http:') {
+      _url.protocol = 'ws:';
+    }
+    if (_url.protocol === 'https:') {
+      _url.protocol = 'wss:';
+    }
+    return _url.href;
+  }
+};

package/src/ws.ts

@@ -0,0 +1,220 @@
+import { createStore, StoreApi } from 'zustand/vanilla';
+import { parseWsUrl } from './utils.ts';
+
+type QueryWsStore = {
+  connected: boolean;
+  status: 'connecting' | 'connected' | 'disconnected';
+  setConnected: (connected: boolean) => void;
+  setStatus: (status: QuerySelectState) => void;
+};
+export type QuerySelectState = 'connecting' | 'connected' | 'disconnected';
+export type QueryWsStoreListener = (newState: QueryWsStore, oldState: QueryWsStore) => void;
+export type QueryWsOpts = {
+  url?: string;
+  store?: StoreApi<QueryWsStore>;
+  ws?: WebSocket;
+};
+export type WsSend<T = any, U = any> = (data: T, opts?: { isJson?: boolean; wrapper?: (data: T) => U }) => any;
+export type WsOnMessage<T = any, U = any> = (fn: (data: U, event: MessageEvent) => void, opts?: { isJson?: boolean; selector?: (data: T) => U }) => any;
+
+export class QueryWs {
+  url: string;
+  store: StoreApi<QueryWsStore>;
+  ws: WebSocket;
+  constructor(opts?: QueryWsOpts) {
+    const url = opts?.url || '/api/router';
+    if (opts?.store) {
+      this.store = opts.store;
+    } else {
+      const store = createStore<QueryWsStore>((set) => ({
+        connected: false,
+        status: 'connecting',
+        setConnected: (connected) => set({ connected }),
+        setStatus: (status) => set({ status }),
+      }));
+      this.store = store;
+    }
+    const wsUrl = parseWsUrl(url);
+    if (opts?.ws && opts.ws instanceof WebSocket) {
+      this.ws = opts.ws;
+    } else {
+      this.ws = new WebSocket(wsUrl);
+    }
+    this.connect();
+  }
+  /**
+   * 连接 WebSocket
+   */
+  async connect(opts?: { timeout?: number }) {
+    const store = this.store;
+    const that = this;
+    const connected = store.getState().connected;
+    if (connected) {
+      return Promise.resolve(true);
+    }
+    return new Promise((resolve, reject) => {
+      const ws = that.ws || new WebSocket(that.url);
+      const timeout = opts?.timeout || 5 * 60 * 1000; // 默认 5 分钟
+      let timer = setTimeout(() => {
+        const isOpen = ws.readyState === WebSocket.OPEN;
+        if (isOpen) {
+          console.log('WebSocket 连接成功 in timer');
+          resolve(true);
+          return;
+        }
+        console.error('WebSocket 连接超时', that.url);
+        resolve(false);
+      }, timeout);
+      ws.onopen = (ev) => {
+        store.getState().setConnected(true);
+        store.getState().setStatus('connected');
+        resolve(true);
+        clearTimeout(timer);
+      };
+      ws.onclose = (ev) => {
+        store.getState().setConnected(false);
+        store.getState().setStatus('disconnected');
+        this.ws = null;
+      };
+    });
+  }
+  /**
+   * ws.onopen 必须用这个去获取，否者会丢失链接信息
+   * @param callback
+   * @returns
+   */
+  listenConnect(callback: () => void) {
+    const store = this.store;
+    const { connected } = store.getState();
+    if (connected) {
+      callback();
+      return;
+    }
+    const subscriptionOne = (selector: (state: QueryWsStore) => QueryWsStore['connected'], listener: QueryWsStoreListener) => {
+      const unsubscribe = store.subscribe((newState: any, oldState: any) => {
+        if (selector(newState) !== selector(oldState)) {
+          listener(newState, oldState);
+          unsubscribe();
+        }
+      });
+      return unsubscribe;
+    };
+    const cancel = subscriptionOne(
+      (state) => state.connected,
+      () => {
+        callback();
+      },
+    );
+    return cancel;
+  }
+  listenClose(callback: () => void) {
+    const store = this.store;
+    const { status } = store.getState();
+    if (status === 'disconnected') {
+      callback();
+    }
+    const subscriptionOne = (selector: (state: QueryWsStore) => QueryWsStore['status'], listener: QueryWsStoreListener) => {
+      const unsubscribe = store.subscribe((newState: any, oldState: any) => {
+        if (selector(newState) !== selector(oldState)) {
+          listener(newState, oldState);
+          unsubscribe();
+        }
+      });
+      return unsubscribe;
+    };
+    const cancel = subscriptionOne(
+      (state) => state.status,
+      (newState, oldState) => {
+        if (newState.status === 'disconnected') {
+          callback();
+        }
+      },
+    );
+    return cancel;
+  }
+  onMessage<T = any, U = any>(
+    fn: (data: U, event: MessageEvent) => void,
+    opts?: {
+      /**
+       * 是否将数据转换为 JSON
+       */
+      isJson?: boolean;
+      /**
+       * 选择器
+       */
+      selector?: (data: T) => U;
+    },
+  ) {
+    const ws = this.ws;
+    const isJson = opts?.isJson ?? true;
+    const selector = opts?.selector;
+    const parseIfJson = (data: string) => {
+      try {
+        return JSON.parse(data);
+      } catch (e) {
+        return data;
+      }
+    };
+    const listener = (event: MessageEvent) => {
+      const received = parseIfJson(event.data);
+      if (typeof received === 'string' && !isJson) {
+        fn(received as any, event);
+      } else if (typeof received === 'object' && isJson) {
+        fn(selector ? selector(received) : received, event);
+      } else {
+        // 过滤掉的数据
+      }
+    };
+    ws.addEventListener('message', listener);
+    return () => {
+      ws.removeEventListener('message', listener);
+    };
+  }
+  close() {
+    const ws = this.ws;
+    const store = this.store;
+    ws?.close?.();
+    this.ws = null;
+    store.getState().setConnected(false);
+    store.getState().setStatus('disconnected');
+  }
+  /**
+   * 发送消息
+   *
+   * @param data
+   * @param opts
+   * @returns
+   */
+  send<T = any, U = any>(
+    data: T,
+    opts?: {
+      /**
+       * 是否将数据转换为 JSON
+       */
+      isJson?: boolean;
+      /**
+       * 包装数据
+       */
+      wrapper?: (data: T) => U;
+    },
+  ) {
+    const ws = this.ws;
+    const isJson = opts?.isJson ?? true;
+    const wrapper = opts?.wrapper;
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+      console.error('WebSocket is not open');
+      return;
+    }
+    if (isJson) {
+      ws.send(JSON.stringify(wrapper ? wrapper(data) : data));
+    } else {
+      ws.send(data as string);
+    }
+  }
+  getOpen() {
+    if (!this.ws) {
+      return false;
+    }
+    return this.ws.readyState === WebSocket.OPEN;
+  }
+}