vite-uni-dev-tool 1.0.0 → 1.1.0

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/dist/v3/styles/theme.ts

@@ -1,12 +1,12 @@
-export const THEME_MAIN_COLORS: Record<string, string> = {
-  light: '#9254de',
-  dark: '#9254de',
-  eye: '#6c71c4',
-  midnight: '#38bdf8',
-  gulf: '#2dd4bf',
-  lava: '#f97316',
-};
-
-export const getThemeMainColor = (theme: string = 'light') => {
-  return THEME_MAIN_COLORS[theme] || THEME_MAIN_COLORS.light;
-};
+export const THEME_MAIN_COLORS: Record<string, string> = {
+  light: '#9254de',
+  dark: '#9254de',
+  eye: '#6c71c4',
+  midnight: '#38bdf8',
+  gulf: '#2dd4bf',
+  lava: '#f97316',
+};
+
+export const getThemeMainColor = (theme: string = 'light') => {
+  return THEME_MAIN_COLORS[theme] || THEME_MAIN_COLORS.light;
+};

package/package.json

@@ -1,64 +1,59 @@
-{
-  "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.1.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": {
+    "@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"}