vite-uni-dev-tool 0.0.12 → 0.0.14

package/dist/v2/WebSocket/WebSocketItem.vue

@@ -0,0 +1,129 @@
+<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"
+      :zIndex="zIndex"
+      @close="onClose"
+    />
+  </view>
+</template>
+
+<script>
+import Tag from '../Tag/index.vue';
+import WebSocketList from './WebSocketList.vue';
+import { formatDate } from '../../utils';
+
+export default {
+  components: {
+    Tag,
+    WebSocketList,
+  },
+  props: {
+    ws: {
+      type: Object,
+      required: true,
+      validator: (value) => {
+        // 验证必要字段存在
+        return ['readyState', 'url', 'message'].every((key) => key in value);
+      },
+    },
+    zIndex: {
+      type: Number,
+      default: 1000,
+    },
+  },
+  data() {
+    return {
+      showDetail: false, // 控制详情显示/隐藏
+    };
+  },
+  methods: {
+    // 关闭详情
+    onClose() {
+      this.showDetail = false;
+    },
+    // 引入日期格式化工具函数
+    formatDate,
+  },
+};
+</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: var(--dev-tool-info-color);
+}
+
+.websocket-item .websocket-info .websocket-info-last {
+  white-space: nowrap;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

package/dist/v2/WebSocket/WebSocketList.vue

@@ -0,0 +1,183 @@
+<template>
+  <view class="web-socket-list-container" :style="{ zIndex: zIndex }">
+    <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>
+import Tag from '../Tag/index.vue';
+import CloseButton from '../CloseButton/index.vue';
+import { formatDate } from '../../utils/index';
+
+export default {
+  components: {
+    Tag,
+    CloseButton,
+  },
+  props: {
+    /** @type {{url:string; method:string; headers: {key:string; value:string}[]; message: { time:string; data:string }[] }} */
+    ws: {
+      type: Object,
+      required: true,
+      validator: (value) => {
+        // 验证必要字段存在
+        return ['url', 'method', 'headers', 'message'].every(
+          (key) => key in value,
+        );
+      },
+    },
+    zIndex: {
+      type: Number,
+      default: 1001,
+    },
+  },
+  methods: {
+    // 关闭详情面板
+    onClose() {
+      this.$emit('close');
+    },
+    // 点击消息项，复制到剪贴板
+    onClick(item) {
+      uni.setClipboardData({
+        data: JSON.stringify(item),
+        success() {
+          uni.showToast({
+            title: '复制成功',
+            icon: 'none',
+          });
+        },
+        fail() {
+          uni.showToast({
+            title: '复制失败',
+            icon: 'none',
+          });
+        },
+      });
+    },
+    // 引入日期格式化工具函数
+    formatDate,
+  },
+};
+</script>
+
+<style>
+.web-socket-list-container {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1001;
+  top: 0;
+  left: 0;
+  padding: 0 16px;
+
+  background-color: var(--dev-tool-bg2-color);
+  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-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: var(--dev-tool-info-color);
+}
+
+.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: var(--dev-tool-info-color);
+}
+.web-socket-data-content {
+  padding: 6px;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+</style>

package/dist/v2/WebSocket/index.vue

@@ -0,0 +1,155 @@
+<template>
+  <view class="websocket-content">
+    <view class="websocket-control">
+      <FilterInput
+        :modelValue="modelValue"
+        placeholder="查询url"
+        @search="handleSearch"
+        @update:modelValue="handleUpdateModelValue"
+      />
+      <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
+      :dataSource="wsList"
+      :pageSize="15"
+      :height="height"
+      className="websocket-list"
+    >
+      <template v-slot="{ list, start }">
+        <AutoSize
+          v-for="(item, index) in list"
+          :index="start + index"
+          :key="start + index"
+        >
+          <WebSocketItem :ws="item" :zIndex="zIndex" />
+        </AutoSize>
+        <Empty v-if="!wsList || wsList.length === 0" />
+      </template>
+    </VirtualListPro>
+  </view>
+</template>
+
+<script>
+import WebSocketItem from './WebSocketItem.vue';
+import Tag from '../Tag/index.vue';
+import Empty from '../Empty/index.vue';
+import FilterInput from '../FilterInput/index.vue';
+import VirtualListPro from '../VirtualListPro/index.vue';
+import AutoSize from '../VirtualListPro/AutoSize.vue';
+
+export default {
+  components: {
+    WebSocketItem,
+    Tag,
+    Empty,
+    FilterInput,
+    VirtualListPro,
+    AutoSize,
+  },
+  props: {
+    wsList: {
+      type: Array,
+      default: () => [],
+    },
+    currentWebSocketType: {
+      type: String,
+      required: true,
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    zIndex: {
+      type: Number,
+      default: 1000,
+    },
+  },
+  data() {
+    return {
+      height: 0,
+      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',
+        },
+      ],
+    };
+  },
+  mounted() {
+    // 计算列表高度（窗口高度减去控制栏高度）
+    const { windowHeight } = uni.getWindowInfo();
+    this.height = windowHeight - 32 - 32;
+  },
+  methods: {
+    // 选择筛选类型
+    onChoose(type) {
+      this.$emit('choose', type);
+    },
+    // 处理搜索事件
+    handleSearch(value) {
+      this.$emit('search', value);
+    },
+    // 处理输入框值更新
+    handleUpdateModelValue(value) {
+      this.$emit('update:modelValue', value);
+    },
+  },
+};
+</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/dist/v2/WindowInfo/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <view class="window-info-content">
+    <JsonPretty v-if="showJson" :data="windowInfo" />
+    <Empty v-else />
+  </view>
+</template>
+
+<script>
+import JsonPretty from '../JsonPretty/index.vue';
+import Empty from '../Empty/index.vue';
+
+export default {
+  components: {
+    JsonPretty,
+    Empty,
+  },
+  props: {
+    windowInfo: {
+      type: Object,
+      required: true,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    // 判断是否显示JSON视图
+    showJson() {
+      try {
+        const str = JSON.stringify(this.windowInfo);
+        // 当数据为对象且不为空时显示
+        return (
+          typeof this.windowInfo === 'object' &&
+          this.windowInfo !== null &&
+          str !== '{}' &&
+          str !== ''
+        );
+      } catch (error) {
+        return false;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.window-info-content {
+  padding: 16px;
+  font-size: var(--dev-tool-base-font-size);
+}
+</style>

package/{dev/components → dist/v3}/AppInfo/index.vue

@@ -7,7 +7,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import JsonPretty from '../JsonPretty/index.vue';
-
 import Empty from '../Empty/index.vue';
 const props = defineProps<{
   appInfo: Record<string, any>;

package/dist/v3/AutoSizer/utils.d.ts

@@ -0,0 +1,5 @@
+import { ComponentInternalInstance } from 'vue';
+
+export declare function getRect(selector: string, context: ComponentInternalInstance | null | any, node?: boolean): Promise<UniApp.NodeInfo>;
+export declare function addUnit(value?: string | number): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/v3/AutoSizer/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../dev/v3/AutoSizer/utils.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,yBAAyB,EAA2B,MAAM,KAAK,CAAC;AAE9E,wBAAgB,OAAO,CACrB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,yBAAyB,GAAG,IAAI,GAAG,GAAG,EAC/C,IAAI,GAAE,OAAe,4BAmCtB;AAED,wBAAgB,OAAO,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAMvD"}

package/dist/v3/AutoSizer/utils.ts

@@ -0,0 +1,49 @@
+import type { ComponentInternalInstance, ComponentPublicInstance } from 'vue';
+
+export function getRect(
+  selector: string,
+  context: ComponentInternalInstance | null | any,
+  node: boolean = false,
+) {
+  // 之前是个对象，现在改成实例，防止旧版会报错
+  if (context == null) {
+    return Promise.reject('context is null');
+  }
+  if (context?.context) {
+    context = context.context;
+  }
+
+  return new Promise<UniNamespace.NodeInfo>((resolve, reject) => {
+    const dom = uni.createSelectorQuery().in(context).select(selector);
+    const result: any = (rect: UniNamespace.NodeInfo) => {
+      if (rect) {
+        resolve(rect);
+      } else {
+        reject('no rect');
+      }
+    };
+
+    if (!node) {
+      dom.boundingClientRect(result).exec();
+    } else {
+      dom
+        .fields(
+          {
+            node: true,
+            size: true,
+            rect: true,
+          },
+          result,
+        )
+        .exec();
+    }
+  });
+}
+
+export function addUnit(value?: string | number): string {
+  if (!value) {
+    return '0px';
+  }
+
+  return typeof value === 'number' ? `${value}px` : value;
+}

package/{dev/components → dist/v3}/CloseButton/index.vue

@@ -19,8 +19,11 @@ function onClick() {
   height: 24px;
   margin-left: auto;
   border-radius: 50%;
-  border: 1px solid #000;
+  border: 1px solid var(--dev-tool-text-color);
   box-sizing: border-box;
-  color: #000;
+  color: var(--dev-tool-text-color);
+  transition:
+    border,
+    color 0.3s;
 }
 </style>

package/{dev/components → dist/v3}/ConsoleList/ConsoleItem.vue

@@ -134,7 +134,8 @@ function onCloseCode() {
 .console-args {
   display: flex;
   flex-wrap: wrap;
-  color: #000;
+  /* color: #000; */
+  /* color: var(--dev-tool-text-color); */
 }
 .console-arg {
   margin-right: 4px;
@@ -146,7 +147,7 @@ function onCloseCode() {
   align-items: flex-start;
   justify-content: space-between;
   margin-top: 4px;
-  color: #616161;
+  /* color: #616161; */
   text-align: right;
 }
 
@@ -180,28 +181,28 @@ function onCloseCode() {
   background-color: var(--dev-tool-success-color);
 }
 .console-item-info {
-  color: #9c9c9c;
+  color: var(--dev-tool-log-color);
 }
 .console-item-log {
   color: #f9f9f9;
 }
 
 .console-arg-null {
-  color: #020201;
+  color: var(--dev-tool-nil-color);
 }
 .console-arg-undefined {
-  color: #020201;
+  color: var(--dev-tool-nil-color);
 }
 .console-arg-string {
-  color: #888888;
+  color: var(--dev-tool-string-color);
 }
 .console-arg-number {
-  color: #1d8ce0;
+  color: var(--dev-tool-number-color);
 }
 .console-arg-boolean {
-  color: #1d8ce0;
+  color: var(--dev-tool-boolean-color);
 }
 .console-arg-symbol {
-  color: bisque;
+  color: var(--dev-tool-symbol-color);
 }
 </style>

package/{dev/components → dist/v3}/ConsoleList/RunJSInput.vue

@@ -192,11 +192,12 @@ function findFunction(fn: string) {
   margin: 10px 0 10px -4px;
   width: 8px;
   height: 8px;
-  border: 1px solid #000;
+  border: 1px solid var(--dev-tool-text-color);
   border-bottom-color: transparent;
   border-left-color: transparent;
   overflow: hidden;
   transform: rotate(45deg);
+  transition: border 0.3s;
 }
 
 .run-js-input {
@@ -205,13 +206,15 @@ function findFunction(fn: string) {
   width: 100%;
   border: 1px solid transparent;
   font-size: var(--dev-tool-base-font-size);
+  color: var(--dev-tool-text-color);
+  transition: color 0.3s;
 }
 
 .run-js-tips {
   position: absolute;
   bottom: 31px;
   left: 0;
-  background-color: #fff;
+  background-color: var(--dev-tool-bg-color);
   width: 100%;
   max-height: 200px;
   padding: 0 16px 0 36px;

package/dist/v3/ConsoleList/staticTips.d.ts

@@ -0,0 +1,13 @@
+export type Tip = {
+    name: string;
+    description: string;
+    result: string[];
+};
+export declare const staticTips: Record<string, {
+    attr: Tip[];
+    fun: Tip[];
+}>;
+export declare const flatStaticTips: Tip[];
+export declare const singleTips: string[];
+export declare const baseSymbols: string[];
+//# sourceMappingURL=staticTips.d.ts.map

package/dist/v3/ConsoleList/staticTips.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"staticTips.d.ts","sourceRoot":"","sources":["../../../dev/v3/ConsoleList/staticTips.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,GAAG,GAAG;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,MAAM,CAC7B,MAAM,EACN;IACE,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,GAAG,EAAE,GAAG,EAAE,CAAC;CACZ,CA4lCF,CAAC;AAEF,eAAO,MAAM,cAAc,OAEjB,CAAC;AAEX,eAAO,MAAM,UAAU,UAStB,CAAC;AAEF,eAAO,MAAM,WAAW,UAAqD,CAAC"}