vite-uni-dev-tool 0.0.13 → 0.0.14

package/dist/v2/JsonPretty/utils/index.js

@@ -0,0 +1,211 @@
+/**
+ *
+ *
+ * @export
+ * @param {string} message
+ */
+export function emitError(message) {
+  throw new Error(`[JsonPretty] ${message}`);
+}
+
+/**
+ *
+ *
+ * @export
+ * @param {any} value
+ * @return {*}  {string}
+ */
+export function getDataType(value) {
+  return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
+}
+
+/**
+ *
+ *
+ * @export
+ * @param {JSONDataType} data
+ * @param {string} [path="root"]
+ * @param {number} [level=0]
+ * @param {JSONFlattenOptions} [options]
+ * @return {*}  {JSONFlattenReturnType[]}
+ */
+export function jsonFlatten(data, path = 'root', level = 0, options) {
+  const {
+    key,
+    index,
+    type = 'content',
+    showComma = false,
+    length = 1,
+  } = options || {};
+  const dataType = getDataType(data);
+
+  if (dataType === 'array') {
+    const inner = arrFlat(
+      data.map((item, idx, arr) =>
+        jsonFlatten(item, `${path}[${idx}]`, level + 1, {
+          index: idx,
+          showComma: idx !== arr.length - 1,
+          length,
+          type,
+        }),
+      ),
+    );
+    return [
+      jsonFlatten('[', path, level, {
+        showComma: false,
+        key,
+        length: data.length,
+        type: 'arrayStart',
+      })[0],
+    ].concat(
+      inner,
+      jsonFlatten(']', path, level, {
+        showComma,
+        length: data.length,
+        type: 'arrayEnd',
+      })[0],
+    );
+  } else if (dataType === 'object') {
+    const keys = Object.keys(data);
+    const inner = arrFlat(
+      keys.map((objKey, idx, arr) =>
+        jsonFlatten(
+          data[objKey],
+          /^[a-zA-Z_]\w*$/.test(objKey)
+            ? `${path}.${objKey}`
+            : `${path}["${objKey}"]`,
+          level + 1,
+          {
+            key: objKey,
+            showComma: idx !== arr.length - 1,
+            length,
+            type,
+          },
+        ),
+      ),
+    );
+    return [
+      jsonFlatten('{', path, level, {
+        showComma: false,
+        key,
+        index,
+        length: keys.length,
+        type: 'objectStart',
+      })[0],
+    ].concat(
+      inner,
+      jsonFlatten('}', path, level, {
+        showComma,
+        length: keys.length,
+        type: 'objectEnd',
+      })[0],
+    );
+  }
+
+  return [
+    {
+      content: data,
+      level,
+      key,
+      index,
+      path,
+      showComma,
+      length,
+      type,
+    },
+  ];
+}
+
+/**
+ *
+ *
+ * @export
+ * @template T
+ * @param {T} arr
+ * @return {*}  {unknown[]}
+ */
+export function arrFlat(arr) {
+  if (typeof Array.prototype.flat === 'function') {
+    return arr.flat();
+  }
+  const stack = [...arr];
+  const result = [];
+  while (stack.length) {
+    const first = stack.shift();
+    if (Array.isArray(first)) {
+      stack.unshift(...first);
+    } else {
+      result.push(first);
+    }
+  }
+  return result;
+}
+
+/**
+ *
+ *
+ * @export
+ * @template T
+ * @param {T} source
+ * @param {*} [hash=new WeakMap()]
+ * @return {*}  {T}
+ */
+export function cloneDeep(source, hash = new WeakMap()) {
+  if (source === null || source === undefined) return source;
+  if (source instanceof Date) return new Date(source);
+  if (source instanceof RegExp) return new RegExp(source);
+  if (typeof source !== 'object') return source;
+  if (hash.get(source)) return hash.get(source);
+
+  if (Array.isArray(source)) {
+    const output = source.map((item) => cloneDeep(item, hash));
+    hash.set(source, output);
+    return output;
+  }
+  const output = {};
+  for (const key in source) {
+    output[key] = cloneDeep(source[key], hash);
+  }
+  hash.set(source, output);
+  return output;
+}
+
+/**
+ *
+ *
+ * @export
+ * @param {string} source
+ * @return {*}  {unknown}
+ */
+export function stringToAutoType(source) {
+  let value;
+  if (source === 'null') value = null;
+  else if (source === 'undefined') value = undefined;
+  else if (source === 'true') value = true;
+  else if (source === 'false') value = false;
+  else if (
+    source[0] + source[source.length - 1] === '""' ||
+    source[0] + source[source.length - 1] === "''"
+  ) {
+    value = source.slice(1, -1);
+  } else if (
+    (typeof Number(source) === 'number' && !isNaN(Number(source))) ||
+    source === 'NaN'
+  ) {
+    value = Number(source);
+  } else {
+    value = source;
+  }
+  return value;
+}
+
+/**
+ *
+ *
+ * @export
+ * @param {unknown} value
+ * @return {boolean}  {boolean}
+ */
+export function isFunction(value) {
+  return typeof value === 'function';
+}

package/dist/v2/NetworkList/NetworkDetail.vue

@@ -0,0 +1,215 @@
+<template>
+  <view class="network-detail" :style="{ zIndex: zIndex }">
+    <view class="network-detail-control">
+      <Tag
+        mode="info"
+        v-for="item in selectItems"
+        :active="item.value === currentSelect"
+        :key="item.value"
+        @click="onSelect(item)"
+      >
+        {{ item.label }}
+      </Tag>
+      <CloseButton style="margin-left: auto" @click="onClose" />
+    </view>
+
+    <view class="network-detail-header" v-if="currentSelect === 'header'">
+      <view class="network-detail-title">常规</view>
+      <view class="net-detail-item">
+        <view>请求url:</view>
+        <view>{{ network.url }}</view>
+      </view>
+      <view class="net-detail-item">
+        <view>请求方法:</view>
+        <Tag mode="info">{{ network.method }}</Tag>
+      </view>
+      <view class="net-detail-item">
+        <view>状态代码:</view>
+        {{ network.status }}
+      </view>
+      <view class="network-detail-title">请求头</view>
+      <view
+        class="net-detail-item"
+        v-for="item in network.headers.requestHeader"
+        :key="item.key"
+      >
+        <view>{{ item.key }}:</view>
+        {{ item.value }}
+      </view>
+      <view class="network-detail-title">响应头</view>
+      <view
+        class="net-detail-item"
+        v-for="item in network.headers.responseHeader"
+        :key="item.key"
+      >
+        <view>{{ item.key }}:</view>
+        {{ item.value }}
+      </view>
+    </view>
+
+    <template v-if="currentSelect === 'payload'">
+      <template v-if="payload.type === 'object'">
+        <JsonPretty :data="payload.value" />
+      </template>
+      <view
+        v-else-if="payload.type === 'string'"
+        class="network-detail-payload"
+      >
+        {{ payload.value }}
+      </view>
+      <Empty v-else />
+    </template>
+
+    <template v-if="currentSelect === 'response'">
+      <template v-if="response.type === 'object'">
+        <JsonPretty :data="response.value" virtual />
+      </template>
+      <view
+        v-else-if="response.type === 'string'"
+        class="network-detail-payload"
+      >
+        {{ response.value }}
+      </view>
+      <Empty v-else />
+    </template>
+  </view>
+</template>
+
+<script>
+import JsonPretty from '../JsonPretty/index.vue';
+import Tag from '../Tag/index.vue';
+import Empty from '../Empty/index.vue';
+import CloseButton from '../CloseButton/index.vue';
+
+export default {
+  components: {
+    JsonPretty,
+    Tag,
+    Empty,
+    CloseButton,
+  },
+  props: {
+    network: {
+      type: Object,
+      required: true,
+    },
+    zIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      selectItems: [
+        {
+          label: 'header',
+          value: 'header',
+        },
+        {
+          label: 'payload',
+          value: 'payload',
+        },
+        {
+          label: 'response',
+          value: 'response',
+        },
+      ],
+      currentSelect: 'header',
+    };
+  },
+  computed: {
+    payload() {
+      try {
+        if (this.network.payload) {
+          return {
+            value: JSON.parse(this.network.payload),
+            type: 'object',
+          };
+        }
+        return {
+          value: {},
+          type: 'empty',
+        };
+      } catch (error) {
+        return {
+          value: this.network.payload,
+          type: this.network.payload ? 'string' : 'empty',
+        };
+      }
+    },
+    response() {
+      try {
+        if (this.network.response) {
+          return {
+            value: JSON.parse(JSON.stringify(this.network.response)),
+            type: 'object',
+          };
+        }
+        return {
+          value: {},
+          type: 'empty',
+        };
+      } catch (error) {
+        return {
+          value: this.network.response,
+          type: this.network.response ? 'string' : 'empty',
+        };
+      }
+    },
+  },
+  methods: {
+    onSelect(item) {
+      this.currentSelect = item.value;
+    },
+    onClose() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
+<style scoped>
+.network-detail {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1001;
+  top: 0;
+  left: 0;
+  padding: 0 16px;
+
+  background-color: var(--dev-tool-bg-color);
+  box-sizing: border-box;
+}
+.network-detail .network-detail-control {
+  display: flex;
+  align-items: center;
+  margin-bottom: 4px;
+  gap: 12px;
+  height: 32px;
+  border-bottom: 1px solid transparent;
+  box-sizing: border-box;
+}
+
+.network-detail .network-detail-control :deep(.tag) {
+  margin-right: 16px;
+}
+.network-detail .network-detail-control :deep(.tag):last-child {
+  margin-right: 0;
+}
+
+.network-detail .network-detail-header .net-detail-item {
+  display: flex;
+  align-items: center;
+  min-height: 28px;
+  word-break: break-all;
+}
+.network-detail .network-detail-header .net-detail-item > view:first-child {
+  white-space: nowrap;
+  margin-right: 8px;
+  color: var(--dev-tool-info-color);
+}
+.network-detail .network-detail-payload {
+  word-break: break-all;
+  max-width: 100%;
+}
+</style>

package/dist/v2/NetworkList/NetworkItem.vue

@@ -0,0 +1,135 @@
+<template>
+  <view class="network-item">
+    <view class="network-url-row">
+      <Tag mode="info">{{ network.method }}</Tag>
+
+      <view class="network-url" v-html="lastUrl"> </view>
+
+      <Tag
+        mode="main"
+        class="network-detail-icon"
+        @click="showDetail = !showDetail"
+        >详情</Tag
+      >
+    </view>
+    <view class="network-info">
+      <view>
+        <Tag
+          :mode="
+            network.status === 'pending'
+              ? 'info'
+              : /[4,5]\d{2,}/.test(network.status + '') ||
+                  network.status === 'error'
+                ? 'error'
+                : 'success'
+          "
+          >{{ network.status }}</Tag
+        >
+      </view>
+      <view>{{ network.time }}</view>
+      <view>{{ network.size }}</view>
+      <view
+        >开始:
+        {{
+          network.startTime
+            ? formatDate(network.startTime, 'HH:mm:ss')
+            : '--:--:--'
+        }}</view
+      >
+      <view>
+        结束:
+        {{
+          network.endTime ? formatDate(network.endTime, 'HH:mm:ss') : '--:--:--'
+        }}
+      </view>
+    </view>
+  </view>
+  <NetworkDetail
+    v-if="showDetail"
+    :network="network"
+    :zIndex="zIndex"
+    @close="onClose"
+  />
+</template>
+
+<script>
+import Tag from '../Tag/index.vue';
+import NetworkDetail from './NetworkDetail.vue';
+import { formatDate } from '../../utils';
+
+export default {
+  components: {
+    Tag,
+    NetworkDetail,
+  },
+  props: {
+    network: {
+      type: Object,
+      required: true,
+    },
+    zIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      showDetail: false,
+    };
+  },
+  computed: {
+    lastUrl() {
+      const start = this.network.url.lastIndexOf('/');
+      return this.network.url.slice(start + 1);
+    },
+  },
+  methods: {
+    onClose() {
+      this.showDetail = false;
+    },
+    formatDate,
+  },
+};
+</script>
+<style scoped>
+.network-item {
+  padding: 16px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  font-size: var(--dev-tool-base-font-size);
+}
+.network-url-row {
+  display: flex;
+  align-items: center;
+}
+
+.network-url {
+  margin-left: 4px;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.network-detail-icon {
+  margin-left: auto;
+}
+
+.network-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 4px;
+  color: var(--dev-tool-text-color);
+  transition: color 0.3s;
+}
+.slide-fade-enter-active {
+  transition: all 0.8s ease-out;
+}
+.slide-fade-leave-active {
+  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateY(20px);
+  opacity: 0;
+}
+</style>

package/dist/v2/NetworkList/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <view class="network-content">
+    <view class="network-control">
+      <FilterInput
+        :modelValue="modelValue"
+        placeholder="查询url"
+        @search="$emit('search', $event)"
+        @update:modelValue="$emit('update:modelValue', $event)"
+      />
+      <Tag
+        v-for="item in networkFilterItems"
+        :mode="item.mode"
+        :key="item.value"
+        :active="item.value === currentNetworkType"
+        @click="onChoose(item.value)"
+      >
+        {{ item.label }}
+      </Tag>
+    </view>
+
+    <VirtualListPro
+      :dataSource="networkList"
+      :pageSize="15"
+      :height="height"
+      className="network-list"
+    >
+      <template v-slot="{ list, start }">
+        <AutoSize
+          v-for="(item, index) in list"
+          :index="start + index"
+          :key="start + index"
+        >
+          <NetworkItem :network="item" :zIndex="zIndex" />
+        </AutoSize>
+        <Empty v-if="!networkList || networkList.length === 0" />
+      </template>
+    </VirtualListPro>
+  </view>
+</template>
+
+<script>
+import Tag from '../Tag/index.vue';
+import NetworkItem from './NetworkItem.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: {
+    Tag,
+    NetworkItem,
+    Empty,
+    FilterInput,
+    VirtualListPro,
+    AutoSize
+  },
+  props: {
+    currentNetworkType: {
+      type: String,
+      required: true
+    },
+    networkList: {
+      type: Array,
+      default: () => []
+    },
+    modelValue: {
+      type: String,
+      default: ''
+    },
+    zIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      networkFilterItems: [
+        {
+          label: '全部',
+          value: 'all',
+          mode: 'all'
+        },
+        {
+          label: 'get',
+          value: 'GET',
+          mode: 'info'
+        },
+        {
+          label: 'post',
+          value: 'POST',
+          mode: 'info'
+        },
+        {
+          label: 'put',
+          value: 'PUT',
+          mode: 'info'
+        },
+        {
+          label: 'del',
+          value: 'DELETE',
+          mode: 'info'
+        },
+        {
+          label: 'error',
+          value: 'error',
+          mode: 'error'
+        },
+        {
+          label: '清除',
+          value: 'clear',
+          mode: 'clear'
+        }
+      ],
+      height: 0
+    };
+  },
+  mounted() {
+    const { windowHeight } = uni.getWindowInfo();
+    this.height = windowHeight - 32 - 32;
+  },
+  methods: {
+    onChoose(type) {
+      this.$emit('choose', type);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.network-content {
+  height: 100%;
+  font-size: var(--dev-tool-base-font-size);
+}
+.network-list {
+  height: calc(100% - 32px);
+}
+.network-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;
+}
+</style>