vite-uni-dev-tool 1.0.0 → 1.2.0

package/dist/v3/hooks/useWebsocket/README.md

@@ -0,0 +1,79 @@
+# useWebsocket
+
+一个用于在 uni-app 中处理 WebSocket 的 Vue 3 Hook，设计模式参考了 [ahooks useWebSocket](https://ahooks.js.org/zh-CN/hooks/use-web-socket)。
+
+## 作用
+
+- **简化连接管理**：封装了 `uni.connectSocket`，自动管理 `SocketTask` 任务的创建与清理。
+- **响应式状态**：通过 Vue 3 的 `ref` 提供连接状态 (`readyState`) 和最新消息 (`latestMessage`)。
+- **自动重连**：内置重连逻辑，当连接因非人为原因（如网络抖动）断开时，支持配置重连次数和间隔。
+- **心跳机制**：支持配置自动心跳包发送，保持长连接活跃，防止被服务器超时剔除。
+- **生命周期集成**：在组件卸载 (`onUnmounted`) 时自动关闭连接，避免内存泄漏和异常监听。
+- **手动控制**：既支持初始自动连接，也支持手动调用 `connect()` 或 `disconnect()`。
+
+## 参数
+
+```typescript
+const { ... } = useWebsocket(url, options);
+```
+
+### Options
+
+| 参数              | 说明              | 类型                    | 默认值   |
+| ----------------- | ----------------- | ----------------------- | -------- |
+| reconnectLimit    | 重连次数限制      | `number`                | `3`      |
+| reconnectInterval | 重连时间间隔 (ms) | `number`                | `3000`   |
+| heartbeat         | 是否开启心跳检查  | `boolean`               | `false`  |
+| heartbeatInterval | 心跳检查间隔 (ms) | `number`                | `30000`  |
+| heartbeatMessage  | 心跳发送的内容    | `string \| ArrayBuffer` | `'ping'` |
+| manual            | 是否手动控制连接  | `boolean`               | `false`  |
+| protocols         | WebSocket 子协议  | `string[]`              | -        |
+| onOpen            | 连接开启的回调    | `(task, res) => void`   | -        |
+| onClose           | 连接关闭的回调    | `(res) => void`         | -        |
+| onMessage         | 收到消息的回调    | `(res) => void`         | -        |
+| onError           | 连接错误的回调    | `(res) => void`         | -        |
+
+## 返回值
+
+| 属性          | 说明                   | 类型                                    |
+| ------------- | ---------------------- | --------------------------------------- |
+| latestMessage | 最近收到的一条消息内容 | `Ref<OnSocketMessageCallbackResult>`    |
+| readyState    | 当前连接状态           | `Ref<ReadyState>`                       |
+| connect       | 手动连接方法           | `() => void`                            |
+| disconnect    | 手动断开方法           | `() => void`                            |
+| sendMessage   | 发送消息方法           | `(data: string \| ArrayBuffer) => void` |
+
+## 状态定义 (ReadyState)
+
+- `0`: `Connecting` (连接中)
+- `1`: `Open` (已连接)
+- `2`: `Closing` (关闭中)
+- `3`: `Closed` (已关闭)
+
+## 使用示例
+
+```typescript
+import useWebsocket, { ReadyState } from '../hooks/useWebsocket';
+
+const { readyState, latestMessage, sendMessage, connect, disconnect } =
+  useWebsocket('wss://echo.websocket.org', {
+    reconnectLimit: 5,
+    heartbeat: true, // 开启心跳
+    heartbeatInterval: 30000,
+    heartbeatMessage: JSON.stringify({ type: 'ping' }),
+    onOpen: () => {
+      console.log('连接已开启');
+    },
+    onMessage: (res) => {
+      console.log('收到消息:', res.data);
+    },
+  });
+
+// 计算属性：判断是否在线
+const isOnline = computed(() => readyState.value === ReadyState.Open);
+
+// 发送数据
+const send = () => {
+  sendMessage('Hello Antigravity!');
+};
+```

package/dist/v3/hooks/useWebsocket/index.ts

@@ -0,0 +1,253 @@
+import { ref, onUnmounted, type Ref } from 'vue';
+
+/**
+ * WebSocket 连接状态枚举
+ */
+export enum ReadyState {
+  Connecting = 0, // 连接中
+  Open = 1, // 已连接
+  Closing = 2, // 关闭中
+  Closed = 3, // 已关闭
+}
+
+/**
+ * useWebsocket 配置参数
+ */
+export interface Options {
+  /** 重连尝试次数限制，默认为 3 */
+  reconnectLimit?: number;
+  /** 重连时间间隔 (ms)，默认为 3000 */
+  reconnectInterval?: number;
+  /** 是否开启心跳检查，默认为 false */
+  heartbeat?: boolean;
+  /** 心跳检查间隔 (ms)，默认为 30000 */
+  heartbeatInterval?: number;
+  /** 心跳发送的内容，默认为 'ping' */
+  heartbeatMessage?: string | ArrayBuffer;
+  /** 是否手动控制连接，为 true 时需手动调用 connect()，默认为 false */
+  manual?: boolean;
+  /** 连接开启时的回调 */
+  onOpen?: (
+    instance: UniApp.SocketTask,
+    res: UniApp.OnSocketOpenCallbackResult,
+  ) => void;
+  /** 连接关闭时的回调 */
+  onClose?: (event: UniApp.OnSocketCloseOptions) => void;
+  /** 收到消息时的回调 */
+  onMessage?: (message: UniApp.OnSocketMessageCallbackResult) => void;
+  /** 连接发生错误时的回调 */
+  onError?: (event: UniApp.GeneralCallbackResult) => void;
+  /** WebSocket 子协议 */
+  protocols?: string[];
+}
+
+/**
+ * useWebsocket 返回结果
+ */
+export interface Result {
+  /** 最近收到的一条消息 */
+  latestMessage: Ref<UniApp.OnSocketMessageCallbackResult | undefined>;
+  /** 当前连接状态 */
+  readyState: Ref<ReadyState>;
+  /** 手动连接方法 */
+  connect: () => void;
+  /** 手动断开方法 */
+  disconnect: () => void;
+  /** 发送消息方法 */
+  sendMessage: (data: string | ArrayBuffer) => void;
+}
+
+/**
+ * 封装 uni.connectSocket 的 hook，参考 ahooks useWebSocket
+ *
+ * @param url WebSocket 地址
+ * @param options 配置项
+ */
+const useWebsocket = (url: string, options: Options = {}): Result => {
+  const {
+    reconnectLimit = 3,
+    reconnectInterval = 3000,
+    heartbeat = false,
+    heartbeatInterval = 30000,
+    heartbeatMessage = 'ping',
+    manual = false,
+    onOpen,
+    onClose,
+    onMessage,
+    onError,
+    protocols,
+  } = options;
+
+  // 状态定义
+  const readyState = ref<ReadyState>(ReadyState.Closed);
+  const latestMessage = ref<UniApp.OnSocketMessageCallbackResult>();
+  const socketTask = ref<UniApp.SocketTask | null>(null);
+
+  // 内部辅助变量
+  let reconnectCount = 0;
+  let reconnectTimer: any = null;
+  let heartbeatTimer: any = null;
+  let isManualClose = false;
+
+  /**
+   * 清除心跳定时器
+   */
+  const clearHeartbeat = () => {
+    if (heartbeatTimer) {
+      clearInterval(heartbeatTimer);
+      heartbeatTimer = null;
+    }
+  };
+
+  /**
+   * 开始心跳
+   */
+  const startHeartbeat = () => {
+    if (!heartbeat) return;
+    clearHeartbeat();
+    heartbeatTimer = setInterval(() => {
+      if (readyState.value === ReadyState.Open && socketTask.value) {
+        // console.log('[useWebsocket] Heartbeat Ping');
+        socketTask.value.send({
+          data: heartbeatMessage,
+        });
+      }
+    }, heartbeatInterval);
+  };
+
+  /**
+   * 执行连接逻辑
+   */
+  const connect = () => {
+    // 如果有正在等待的重连，先清除
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer);
+      reconnectTimer = null;
+    }
+
+    // 清理旧的心跳
+    clearHeartbeat();
+
+    // 如果当前已有任务，先尝试关闭
+    if (socketTask.value) {
+      socketTask.value.close({});
+    }
+
+    readyState.value = ReadyState.Connecting;
+    isManualClose = false;
+
+    // 创建 Uni Socket 任务
+    const task = uni.connectSocket({
+      url,
+      protocols,
+      complete: () => {},
+    });
+
+    socketTask.value = task;
+
+    // 监听开启事件
+    task.onOpen((res) => {
+      readyState.value = ReadyState.Open;
+      reconnectCount = 0; // 重连计数归零
+      startHeartbeat(); // 开始心跳
+      onOpen?.(task, res);
+    });
+
+    // 监听消息事件
+    task.onMessage((res) => {
+      latestMessage.value = res;
+      onMessage?.(res);
+    });
+
+    // 监听错误事件
+    task.onError((res) => {
+      readyState.value = ReadyState.Closed;
+      clearHeartbeat();
+      onError?.(res);
+
+      // 只有非手动关闭才会尝试重连
+      if (!isManualClose) {
+        reconnect();
+      }
+    });
+
+    // 监听关闭事件
+    task.onClose((res) => {
+      readyState.value = ReadyState.Closed;
+      clearHeartbeat();
+      onClose?.(res);
+
+      // 如果非用户手动关闭，尝试重连
+      if (!isManualClose) {
+        reconnect();
+      }
+    });
+  };
+
+  /**
+   * 重连逻辑
+   */
+  const reconnect = () => {
+    if (reconnectCount < reconnectLimit && !isManualClose) {
+      reconnectTimer = setTimeout(() => {
+        reconnectCount++;
+        connect();
+      }, reconnectInterval);
+    }
+  };
+
+  /**
+   * 断开连接
+   */
+  const disconnect = () => {
+    isManualClose = true;
+    reconnectCount = reconnectLimit; // 标记停止重连循环
+    clearHeartbeat();
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer);
+      reconnectTimer = null;
+    }
+    if (socketTask.value) {
+      socketTask.value.close({});
+      socketTask.value = null;
+    }
+    readyState.value = ReadyState.Closed;
+  };
+
+  /**
+   * 发送消息
+   * @param data 字符串或二进制数据
+   */
+  const sendMessage = (data: string | ArrayBuffer) => {
+    if (readyState.value === ReadyState.Open && socketTask.value) {
+      socketTask.value.send({
+        data,
+      });
+    } else {
+      console.error(
+        '[useWebsocket] WebSocket is not open. Current state:',
+        readyState.value,
+      );
+    }
+  };
+
+  // 默认自动开始连接
+  if (!manual) {
+    connect();
+  }
+
+  // 组件卸载时自动清理
+  onUnmounted(() => {
+    disconnect();
+  });
+
+  return {
+    latestMessage,
+    readyState,
+    connect,
+    disconnect,
+    sendMessage,
+  };
+};
+
+export default useWebsocket;

package/dist/v3/styles/theme.css

@@ -3,15 +3,20 @@
 .dev-tool {
   /* Generic Colors */
   --dev-tool-main-color: #9254de;
+  --dev-tool-main-color-rgb: 146, 84, 222;
   --dev-tool-warn-color: #ffa940;
   --dev-tool-error-color: #ff4d4f;
   --dev-tool-success-color: #bae637;
-  
+
   /* Shared Base Tokens */
   --dev-tool-text-color-placeholder: #8c8c8c;
 
   -webkit-tap-highlight-color: transparent;
-  transition: color 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
+  transition:
+    color 0.3s,
+    background-color 0.3s,
+    border-color 0.3s,
+    box-shadow 0.3s;
 }
 
 /* Light Theme */
@@ -20,6 +25,7 @@
   --dev-tool-bg2-color: rgb(252 252 252 / 95%);
   --dev-tool-bg3-color: #fff;
   --dev-tool-text-color: #1f1f1f;
+  --dev-tool-text-color-secondary: #595959;
   --dev-tool-border-color: #f0f0f0;
   --dev-tool-info-color: #8c8c8c;
   --dev-tool-log-color: #f5f5f5;
@@ -50,11 +56,12 @@
   --dev-tool-bg2-color: #1a1a1a;
   --dev-tool-bg3-color: #242424;
   --dev-tool-text-color: rgb(255 255 255 / 85%);
+  --dev-tool-text-color-secondary: rgb(255 255 255 / 45%);
   --dev-tool-border-color: #333;
   --dev-tool-info-color: #8c8c8c;
   --dev-tool-log-color: #202020;
   --dev-tool-nil-color: #bfbfbf;
-  
+
   /* Syntax Highlighting */
   --dev-tool-number-color: #40a9ff;
   --dev-tool-boolean-color: #40a9ff;
@@ -69,7 +76,7 @@
   --dev-tool-function-color: #40a9ff;
   --dev-tool-attribute-color: #ff7eb6;
   --dev-tool-operator-color: #5cdbd3;
-  
+
   /* Status Backgrounds */
   --dev-tool-warn-bg-color: rgb(255 169 64 / 20%);
   --dev-tool-error-bg-color: rgb(255 77 79 / 20%);
@@ -198,7 +205,7 @@
   --dev-tool-log-color: #0f172a;
   --dev-tool-nil-color: #64748b;
   --dev-tool-main-color: #82aaff;
-  
+
   /* Syntax Highlighting */
   --dev-tool-number-color: #7dd3fc;
   --dev-tool-boolean-color: #7dd3fc;
@@ -213,7 +220,7 @@
   --dev-tool-function-color: #82aaff;
   --dev-tool-attribute-color: #c792ea;
   --dev-tool-operator-color: #2dd4bf;
-  
+
   /* Status Backgrounds */
   --dev-tool-warn-bg-color: rgb(251 191 36 / 15%);
   --dev-tool-error-bg-color: rgb(244 63 94 / 15%);
@@ -232,7 +239,7 @@
   --dev-tool-log-color: #0a1b35;
   --dev-tool-nil-color: #38bdf8;
   --dev-tool-main-color: #38bdf8;
-  
+
   /* Syntax Highlighting (Ocean Blue) */
   --dev-tool-number-color: #7dd3fc;
   --dev-tool-boolean-color: #7dd3fc;
@@ -247,7 +254,7 @@
   --dev-tool-function-color: #38bdf8;
   --dev-tool-attribute-color: #c084fc;
   --dev-tool-operator-color: #2dd4bf;
-  
+
   /* Status Backgrounds */
   --dev-tool-warn-bg-color: rgb(245 158 11 / 15%);
   --dev-tool-error-bg-color: rgb(244 63 94 / 15%);
@@ -266,7 +273,7 @@
   --dev-tool-log-color: #fff7ed;
   --dev-tool-nil-color: #c2410c;
   --dev-tool-main-color: #ef5350;
-  
+
   /* Syntax Highlighting */
   --dev-tool-number-color: #ffab91;
   --dev-tool-boolean-color: #ffab91;
@@ -281,7 +288,7 @@
   --dev-tool-function-color: #ef5350;
   --dev-tool-attribute-color: #be123c;
   --dev-tool-operator-color: #c2410c;
-  
+
   /* Warm Status Backgrounds */
   --dev-tool-warn-bg-color: #fff7ed;
   --dev-tool-error-bg-color: #fef2f2;

package/package.json

@@ -1,64 +1,67 @@
-{
-  "name": "vite-uni-dev-tool",
-  "version": "1.0.0",
-  "description": "vite-uni-dev-tool, debug, uni-app, 一处编写，到处调试",
-  "keywords": [
-    "vite",
-    "debugger",
-    "dev-tool",
-    "vite-uni-dev-tool",
-    "uni-app",
-    "调试",
-    "插件",
-    "一处编写，到处调试"
-  ],
-  "repositories": [
-    {
-      "type": "gitee",
-      "url": "https://gitee.com/cloud_l/vite-uni-dev-tool.git"
-    }
-  ],
-  "license": "MIT",
-  "type": "module",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./core": {
-      "types": "./dist/core.d.ts",
-      "import": "./dist/core.js"
-    },
-    "./dist/*": "./dist/*",
-    "./shims-uni.d.ts": "./dist/shims-uni.d.ts"
-  },
-  "files": [
-    "./dist/",
-    "README.md"
-  ],
-  "scripts": {
-    "build": "vite build",
-    "build:lib": "vite build"
-  },
-  "peerDependencies": {
-    "vue": ">=3.4.21",
-    "@dcloudio/uni-app": ">=3.0.0-4020920240930001",
-    "@dcloudio/uni-h5": ">=3.0.0-4020920240930001",
-    "@dcloudio/uni-components": "3.0.0-4020920240930001"
-  },
-  "dependencies": {
-    "miniprogram-ci": "^2.1.14",
-    "source-map": "^0.7.4"
-  },
-  "devDependencies": {},
-  "authors": [
-    "1264174856@qq.com"
-  ],
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "vite-uni-dev-tool",
+  "version": "1.2.0",
+  "description": "vite-uni-dev-tool, debug, uni-app, 一处编写，到处调试",
+  "keywords": [
+    "vite",
+    "debugger",
+    "dev-tool",
+    "vite-uni-dev-tool",
+    "uni-app",
+    "调试",
+    "插件",
+    "一处编写，到处调试"
+  ],
+  "repositories": [
+    {
+      "type": "gitee",
+      "url": "https://gitee.com/cloud_l/vite-uni-dev-tool.git"
+    }
+  ],
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "import": "./dist/core.js"
+    },
+    "./hooks/*": {
+      "types": "./dist/v3/hooks/*/index.d.ts",
+      "import": "./dist/v3/hooks/*/index.ts"
+    },
+    "./dist/v3/hooks/*": {
+      "types": "./dist/v3/hooks/*/index.d.ts",
+      "import": "./dist/v3/hooks/*/index.ts"
+    },
+    "./dist/*": "./dist/*",
+    "./shims-uni.d.ts": "./dist/shims-uni.d.ts"
+  },
+  "files": [
+    "./dist/",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "build:lib": "vite build"
+  },
+  "peerDependencies": {
+    "@dcloudio/uni-app": ">=3.0.0-4020920240930001",
+    "@dcloudio/uni-components": "3.0.0-4020920240930001",
+    "@dcloudio/uni-h5": ">=3.0.0-4020920240930001",
+    "vue": ">=3.4.21"
+  },
+  "authors": [
+    "1264174856@qq.com"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/dist/plugins/uniParseStock/index.d.ts

@@ -1,10 +0,0 @@
-import { Plugin } from 'vite';
-
-/**
- * 解析 h5 , 微信开发者工具行内source map
- *
- * @export
- * @return {*}  {Plugin}
- */
-export default function uniParseStock(): Plugin;
-//# sourceMappingURL=index.d.ts.map

package/dist/plugins/uniParseStock/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/uniParseStock/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAcnC;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,IAAI,MAAM,CAoL9C"}