vite-uni-dev-tool 0.0.11 → 0.0.13

package/dev/components/WebSocket/WebSocketItem.vue

@@ -1,98 +0,0 @@
-<template>
-  <view class="websocket-item">
-    <view class="websocket-url-row">
-      <Tag mode="info" v-if="ws.readyState === 'connection'">con</Tag>
-      <Tag mode="success" v-if="ws.readyState === 'open'">open</Tag>
-      <Tag
-        mode="warn"
-        v-if="ws.readyState === 'closing' || ws.readyState === 'closed'"
-      >
-        close
-      </Tag>
-
-      <Tag mode="error" v-if="ws.readyState === 'error'">error</Tag>
-
-      <view class="websocket-url" v-html="ws.url" />
-
-      <Tag
-        mode="main"
-        class="websocket-detail-icon"
-        @click="showDetail = !showDetail"
-      >
-        详情
-      </Tag>
-    </view>
-    <view class="websocket-info">
-      <view class="websocket-info-last">
-        {{ ws?.message?.[ws.message.length - 1]?.data }}
-      </view>
-
-      <view>{{
-        ws?.message?.[ws.message.length - 1].time
-          ? formatDate(ws?.message?.[ws.message.length - 1].time, 'HH:mm:ss')
-          : '-'
-      }}</view>
-    </view>
-
-    <WebSocketList v-if="showDetail" :ws="ws" @close="onClose" />
-  </view>
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-import Tag from '../Tag/index.vue';
-import WebSocketList from './WebSocketList.vue';
-import { formatDate } from '../../utils';
-import type { DevTool } from '../../type';
-
-defineProps<{ ws: DevTool.WS }>();
-const showDetail = ref(false);
-
-function onClose() {
-  showDetail.value = false;
-}
-</script>
-<style scoped>
-.websocket-item {
-  padding: 16px;
-
-  box-sizing: border-box;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-  font-size: var(--dev-tool-base-font-size);
-}
-.websocket-item .websocket-url-row {
-  display: flex;
-  align-items: center;
-  word-break: break-all;
-}
-
-.websocket-item .websocket-url-row .websocket-url {
-  margin-left: 4px;
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.websocket-item .websocket-url-row .websocket-detail-icon {
-  flex-shrink: 0;
-  margin-left: auto;
-}
-.websocket-item .websocket-url-row .websocket-detail-active {
-  transform: rotate(135deg);
-}
-.websocket-item .websocket-info {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 4px;
-  color: #616161;
-}
-
-.websocket-item .websocket-info .websocket-info-last {
-  white-space: nowrap;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-</style>

package/dev/components/WebSocket/WebSocketList.vue

@@ -1,176 +0,0 @@
-<template>
-  <view class="web-socket-list-container">
-    <view class="web-socket-top">
-      请求url:
-
-      <CloseButton style="margin-left: auto" @click="onClose" />
-    </view>
-    <view class="web-socket-url">
-      {{ ws.url }}
-    </view>
-
-    <view class="web-socket-data">
-      <view class="web-socket-title"
-        >请求方式：<Tag mode="info"> {{ ws.method }} </Tag></view
-      >
-      <view class="web-socket-title">请求头：</view>
-      <view
-        class="header-detail-item"
-        v-for="item in ws.headers"
-        :key="item.key"
-      >
-        <view>{{ item.key }}: </view>
-        {{ item.value }}
-      </view>
-
-      <view class="web-socket-title">消息列表：</view>
-      <view class="web-socket-data-list">
-        <view
-          v-for="item in ws.message"
-          :key="item.time"
-          :class="`web-socket-data-item web-socket-data-item-${item.type}`"
-          @click="onClick(item)"
-        >
-          <view class="web-socket-data-time"
-            >{{ formatDate(item.time, 'HH:mm:ss') }}
-          </view>
-          <view class="web-socket-data-content">
-            {{ item.data }}
-          </view>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-<script setup lang="ts">
-import Tag from '../Tag/index.vue';
-import CloseButton from '../CloseButton/index.vue';
-import { formatDate } from '../../utils/index';
-import type { DevTool } from '../../type';
-
-defineProps<{ ws: DevTool.WS }>();
-const emit = defineEmits<{ (e: 'close'): void }>();
-
-function onClose() {
-  emit('close');
-}
-
-function onClick(item: {
-  type: 'success' | 'error';
-  data: string;
-  time: number;
-}) {
-  uni.setClipboardData({
-    data: JSON.stringify(item),
-    success() {
-      uni.showToast({
-        title: '复制成功',
-        icon: 'none',
-      });
-    },
-    fail() {
-      uni.showToast({
-        title: '复制失败',
-        icon: 'none',
-      });
-    },
-  });
-}
-</script>
-<style>
-.web-socket-list-container {
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  z-index: 1000;
-  top: 0;
-  left: 0;
-  padding: 0 16px;
-  /* #ifdef H5 */
-  padding: 50px 16px;
-  /* #endif */
-
-  background-color: rgba(255, 255, 255, 0.95);
-  box-sizing: border-box;
-}
-.web-socket-list-title {
-  min-height: 32px;
-  display: flex;
-  align-items: center;
-}
-
-.web-socket-data {
-  height: calc(100% - 32px);
-  overflow: auto;
-}
-
-.web-socket-url {
-  display: flex;
-  align-items: center;
-  min-height: 28px;
-
-  white-space: wrap;
-  word-break: break-all;
-}
-
-.web-socket-close {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  margin-left: auto;
-  border-radius: 50%;
-  border: 1px solid #000;
-  box-sizing: border-box;
-}
-.web-socket-top {
-  display: flex;
-  align-items: center;
-  height: 32px;
-
-  border-bottom: 1px solid transparent;
-  box-sizing: border-box;
-}
-.web-socket-title {
-  display: flex;
-  align-items: center;
-}
-.header-detail-item {
-  display: flex;
-  align-items: center;
-  min-height: 28px;
-  word-break: break-all;
-}
-.header-detail-item > view:first-child {
-  white-space: nowrap;
-  margin-right: 8px;
-  color: #616161;
-}
-
-.web-socket-data-item {
-  display: flex;
-  align-items: center;
-  min-height: 28px;
-}
-.web-socket-data-item-error {
-  background-color: var(--dev-tool-error-bg-color);
-}
-.web-socket-data-item-success {
-  background-color: var(--dev-tool-success-bg-color);
-}
-.web-socket-data-time {
-  /* margin-right: 16px; */
-  padding: 0 6px;
-  flex-shrink: 0;
-  color: #616161;
-}
-.web-socket-data-content {
-  padding: 6px;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: break-all;
-}
-</style>

package/dev/components/WebSocket/index.vue

@@ -1,111 +0,0 @@
-<template>
-  <view class="websocket-content">
-    <view class="websocket-control">
-      <FilterInput
-        :modelValue="modelValue"
-        placeholder="查询url"
-        @search="emit('search', $event)"
-        @update:modelValue="emit('update:modelValue', $event)"
-      />
-      <Tag
-        v-for="item in webSocketFilter"
-        :mode="item.mode"
-        :key="item.value"
-        :active="item.value === currentWebSocketType"
-        @click="onChoose(item.value)"
-      >
-        {{ item.label }}
-      </Tag>
-    </view>
-
-    <VirtualListPro :data="wsList" :pageSize="10" className="websocket-list">
-      <template v-slot="{ list, start }">
-        <AutoSize
-          v-for="(item, index) in list"
-          :index="start + index"
-          :key="start + index"
-        >
-          <WebSocketItem :ws="item" />
-        </AutoSize>
-        <Empty v-if="!wsList || wsList.length === 0" />
-      </template>
-    </VirtualListPro>
-  </view>
-</template>
-<script lang="ts" setup>
-import WebSocketItem from './WebSocketItem.vue';
-import Tag from '../Tag/index.vue';
-import Empty from '../Empty/index.vue';
-import FilterInput from '../FilterInput/index.vue';
-import type { DevTool } from '../../type';
-import VirtualListPro from '../VirtualListPro/index.vue';
-import AutoSize from '../VirtualListPro/AutoSize.vue';
-
-defineProps<{
-  wsList: DevTool.WS[];
-  currentWebSocketType: string;
-  modelValue: string;
-}>();
-const emit = defineEmits<{
-  (e: 'choose', type: string): void;
-  (e: 'update:modelValue', value: string): void;
-  (e: 'search', value: string): void;
-}>();
-const webSocketFilter = [
-  {
-    label: '全部',
-    value: 'all',
-    mode: 'all',
-  },
-  {
-    label: 'con',
-    value: 'connection',
-    mode: 'info',
-  },
-  {
-    label: 'open',
-    value: 'open',
-    mode: 'success',
-  },
-  {
-    label: 'close',
-    value: 'close',
-    mode: 'warn',
-  },
-  {
-    label: 'error',
-    value: 'error',
-    mode: 'error',
-  },
-  {
-    label: '清除',
-    value: 'clear',
-    mode: 'clear',
-  },
-];
-
-function onChoose(type: string) {
-  emit('choose', type);
-}
-</script>
-<style scoped>
-.websocket-content {
-  height: 100%;
-  font-size: var(--dev-tool-base-font-size);
-}
-
-.websocket-control {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 0 16px;
-  height: 32px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-  box-sizing: border-box;
-}
-.websocket-list {
-  height: calc(100% - 32px);
-  overflow: auto;
-}
-</style>

package/dev/components/WindowInfo/index.vue

@@ -1,33 +0,0 @@
-<template>
-  <view class="window-info-content">
-    <JsonPretty v-if="showJson" :data="windowInfo" />
-    <Empty v-else />
-  </view>
-</template>
-<script lang="ts" setup>
-import { computed } from 'vue';
-import JsonPretty from '../JsonPretty/index.vue';
-
-import Empty from '../Empty/index.vue';
-const props = defineProps<{
-  windowInfo: Record<string, any>;
-}>();
-
-const showJson = computed(() => {
-  try {
-    const str = JSON.stringify(props.windowInfo);
-    if (typeof props.windowInfo === 'object' && (str === '' || str === '{}')) {
-      return false;
-    }
-    return true;
-  } catch (error) {
-    return false;
-  }
-});
-</script>
-<style scoped>
-.window-info-content {
-  padding: 16px;
-  font-size: var(--dev-tool-base-font-size);
-}
-</style>

package/dev/const.ts

@@ -1,166 +0,0 @@
-/**
- * 调试按钮事件
- * 缓存调试按钮显示隐藏
- */
-export const EVENT_DEV_BUTTON = 'event-dev-button';
-
-/**
- * 调试弹窗事件
- * 缓存调试弹窗显示隐藏
- */
-export const EVENT_DEV_WINDOW = 'event-dev-window';
-
-/**
- * app 发出的信息
- */
-export const DEV_APP_MESSAGE = 'dev-app-message';
-
-/**
- * 调试弹窗发出的消息
- */
-export const DEV_WINDOW_MESSAGE = 'dev-window-message';
-
-/**
- * 缓存调试按钮信息
- */
-export const DEV_BUTTON_INFO = 'dev-button-info';
-
-/**
- * 缓存调试弹窗信息
- */
-export const DEV_WINDOW_INFO = ' dev-window-info';
-
-export const DEV_IS_DESTROY = 'dev-is-destroy';
-
-/**
- * 清空console
- */
-export const DEV_CONSOLE_CLEAR = 'dev-console-clear';
-
-/**
- * 清空network
- */
-export const DEV_NETWORK_CLEAR = 'dev-network-clear';
-
-/**
- * 清空websocket
- */
-export const DEV_WEBSOCKET_CLEAR = 'dev-websocket-clear';
-
-/**
- * 清空upload
- */
-export const DEV_UPLOAD_CLEAR = 'dev-upload-clear';
-
-/**
- * 清空storage
- */
-export const DEV_STORAGE_CLEAR = 'dev-storage-clear';
-
-/**
- * 刷新storage
- */
-export const DEV_STORAGE_REFRESH = 'dev-storage-refresh';
-
-/**
- * 移除storage
- */
-export const DEV_STORAGE_REMOVE = 'dev-storage-remove';
-
-/**
- * 新增storage
- */
-export const DEV_STORAGE_ADD = 'dev-storage-add';
-
-/**
- * 更新storage
- */
-export const DEV_STORAGE_UPDATE = 'dev-storage-update';
-
-/**
- * 页面跳转
- */
-export const DEV_PAGE_JUMP = 'dev-page-jump';
-
-/**
- * 隐藏调试按钮
- */
-export const DEV_BUTTON_SHOW_OR_HIDE = 'dev-button-show-or-hide';
-
-/**
- * 重启调试器
- */
-export const DEV_RESTART_DEBUGGER = 'dev-restart-debugger';
-
-/**
- * 重启app
- */
-export const DEV_RESTART_APP = 'dev-restart-app';
-
-/**
- * 导出日志
- */
-export const DEV_EXPORT_LOG = 'dev-export-log';
-
-/**
- * 改变vuex数据
- */
-export const DEV_VUEX_CHANGE = 'dev-vuex-change';
-
-/**
- * 改变pinia
- */
-export const DEV_PINIA_CHANGE = 'dev-pinia-change';
-
-/**
- * 清除日志缓存
- */
-export const DEV_LOG_CACHE_CLEAR = 'dev-log-cache-clear';
-
-/**
- * 销毁调试工具
- */
-export const DEV_DESTROY = 'dev-destroy';
-
-/**
- * 显示调试弹窗
- */
-export const DEV_WINDOW_OPEN = 'dev-window-open';
-
-/**
- * 显示调试弹窗
- */
-export const DEV_WINDOW_CLOSE = 'dev-window-close';
-
-/**
- * 刷新路由列表
- */
-export const DEV_ROUTE_REFRESH = 'dev-route-refresh';
-
-/**
- * 获取 dev option
- */
-export const DEV_OPTION = 'dev-option';
-
-/**
- * 获取options
- */
-export const DEV_OPTION_GET = 'dev-option-get';
-
-/**
- * 发送 options
- */
-export const DEV_OPTION_SEND = 'dev-option-send';
-
-/**
- * 清空事件
- */
-export const DEV_UNI_EVENT_CLEAR = 'dev-uni-event-clear';
-
-/**
- * 运行js
- */
-export const DEV_RUN_JS = 'dev-uni-run-js';
-
-/** 清空截屏列表 */
-export const DEV_CAPTURE_SCREEN_CLEAR = 'dev-capture-screen-clear';

package/dev/core.ts

@@ -1,118 +0,0 @@
-import { DevStore } from './devStore';
-import { DevEvent } from './devEvent';
-import { DevIntercept } from './devIntercept';
-import { DevConsole } from './devConsole';
-
-import type { DevTool } from './type';
-
-import { EventBus } from './devEventBus';
-/**
- * 备份原生方法
- *
- * @private
- * @memberof DevStore
- */
-const backup = {
-  // log: console.log,
-  // info: console.info,
-  // warn: console.warn,
-  // error: console.error,
-  setStorage: uni?.setStorage,
-  setStorageSync: uni?.setStorageSync,
-  clearStorage: uni?.clearStorage,
-  clearStorageSync: uni?.clearStorageSync,
-  removeStorage: uni?.removeStorage,
-  removeStorageSync: uni?.removeStorageSync,
-  reject: Promise.reject,
-  connectSocket: uni?.connectSocket,
-  uploadFile: uni?.uploadFile,
-  $on: uni.$on,
-  $once: uni.$once,
-  $emit: uni.$emit,
-  $off: uni.$off,
-  __log__: (uni as any).__log__,
-};
-
-const eventBus = new EventBus();
-
-const store = new DevStore();
-
-const event = new DevEvent({
-  store,
-  eventBus,
-});
-
-const console = new DevConsole(event);
-
-const intercept = new DevIntercept({
-  event,
-  enableInterceptPromiseReject: store?.enableInterceptPromiseReject,
-});
-
-function getDevToolOptions() {
-  return store.getDevToolOptions();
-}
-
-function initDevTool(options?: DevTool.DevToolOptions) {
-  if (!options?.mode) {
-    console.error('[DevTool] 请传入 mode: import.meta.env.MODE');
-  }
-
-  store.setDevToolOptions(options || { mode: '' });
-
-  intercept.interceptVue3(options?.vue3instance);
-}
-
-function showDevToolButton() {
-  event.showDevToolButton();
-}
-
-function hideDevToolButton() {
-  event.hideDevToolButton();
-}
-
-function openDevToolWindow() {
-  event.openDevToolWindow();
-}
-
-function closeDevToolWindow() {
-  event.closeDevToolWindow();
-}
-
-function createDevTool() {
-  event.createDevTool();
-  intercept.init({
-    event,
-    enableInterceptPromiseReject: store?.enableInterceptPromiseReject,
-  });
-}
-
-function destroyDevTool() {
-  event.destroyDevTool();
-}
-
-function interceptVuexStorage(store: any) {
-  return intercept.interceptVuexStorage(store);
-}
-
-function interceptPiniaStore(context: any) {
-  return intercept.interceptPiniaStore(context);
-}
-
-uni.__dev__console = console;
-
-export {
-  backup,
-  console,
-  initDevTool,
-  createDevTool,
-  destroyDevTool,
-  showDevToolButton,
-  hideDevToolButton,
-  openDevToolWindow,
-  closeDevToolWindow,
-  getDevToolOptions,
-  interceptVuexStorage,
-  interceptPiniaStore,
-  eventBus,
-};