vite-uni-dev-tool 0.0.11 → 0.0.13

package/dev/components/JsonPretty/utils/index.ts

@@ -1,172 +0,0 @@
-import type {
-  JSONDataType,
-  JSONFlattenOptions,
-  JSONFlattenReturnType
-} from "../type";
-
-export function emitError(message: string): void {
-  throw new Error(`[JsonPretty] ${message}`);
-}
-
-export function getDataType(value: unknown): string {
-  return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
-}
-
-export function jsonFlatten(
-  data: JSONDataType,
-  path = "root",
-  level = 0,
-  options?: JSONFlattenOptions
-): JSONFlattenReturnType[] {
-  const {
-    key,
-    index,
-    type = "content",
-    showComma = false,
-    length = 1
-  } = options || ({} as JSONFlattenOptions);
-  const dataType = getDataType(data);
-
-  if (dataType === "array") {
-    const inner = arrFlat(
-      (data as JSONDataType[]).map((item, idx, arr) =>
-        jsonFlatten(item, `${path}[${idx}]`, level + 1, {
-          index: idx,
-          showComma: idx !== arr.length - 1,
-          length,
-          type
-        })
-      )
-    ) as JSONFlattenReturnType[];
-    return [
-      jsonFlatten("[", path, level, {
-        showComma: false,
-        key,
-        length: (data as unknown[]).length,
-        type: "arrayStart"
-      })[0]
-    ].concat(
-      inner,
-      jsonFlatten("]", path, level, {
-        showComma,
-        length: (data as unknown[]).length,
-        type: "arrayEnd"
-      })[0]
-    );
-  } else if (dataType === "object") {
-    const keys = Object.keys(data as Record<string, JSONDataType>);
-    const inner = arrFlat(
-      keys.map((objKey, idx, arr) =>
-        jsonFlatten(
-          (data as Record<string, JSONDataType>)[objKey],
-          /^[a-zA-Z_]\w*$/.test(objKey)
-            ? `${path}.${objKey}`
-            : `${path}["${objKey}"]`,
-          level + 1,
-          {
-            key: objKey,
-            showComma: idx !== arr.length - 1,
-            length,
-            type
-          }
-        )
-      )
-    ) as JSONFlattenReturnType[];
-    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 as JSONFlattenReturnType["content"],
-      level,
-      key,
-      index,
-      path,
-      showComma,
-      length,
-      type
-    }
-  ];
-}
-
-export function arrFlat<T extends unknown[]>(arr: T): unknown[] {
-  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 function cloneDeep<T extends unknown>(
-  source: T,
-  hash = new WeakMap()
-): T {
-  if (source === null || source === undefined) return source;
-  if (source instanceof Date) return new Date(source) as T;
-  if (source instanceof RegExp) return new RegExp(source) as T;
-  if (typeof source !== "object") return source;
-  if (hash.get(source as Record<string, unknown>))
-    return hash.get(source as Record<string, unknown>);
-
-  if (Array.isArray(source)) {
-    const output = source.map((item) => cloneDeep(item, hash));
-    hash.set(source, output);
-    return output as T;
-  }
-  const output = {} as T;
-  for (const key in source) {
-    output[key] = cloneDeep(source[key], hash);
-  }
-  hash.set(source as Record<string, unknown>, output);
-  return output as T;
-}
-
-export function stringToAutoType(source: string): unknown {
-  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 function isFunction(value: unknown): value is Function {
-  return typeof value === "function";
-}

package/dev/components/NetworkList/NetworkDetail.vue

@@ -1,197 +0,0 @@
-<template>
-  <view class="network-detail">
-    <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 lang="ts" setup>
-import { ref, computed } from 'vue';
-import JsonPretty from '../JsonPretty/index.vue';
-import Tag from '../Tag/index.vue';
-import Empty from '../Empty/index.vue';
-import CloseButton from '../CloseButton/index.vue';
-import type { DevTool } from '../../type';
-const props = defineProps<{ network: DevTool.NetworkItem }>();
-const emit = defineEmits<{ (e: 'close'): void }>();
-const selectItems = [
-  {
-    label: 'header',
-    value: 'header',
-  },
-  {
-    label: 'payload',
-    value: 'payload',
-  },
-  {
-    label: 'response',
-    value: 'response',
-  },
-];
-const currentSelect = ref('header');
-
-const payload = computed(() => {
-  try {
-    if (props.network.payload) {
-      return {
-        value: JSON.parse(props.network.payload),
-        type: 'object',
-      };
-    }
-    return {
-      value: {},
-      type: 'empty',
-    };
-  } catch (error) {
-    return {
-      value: props.network.payload,
-      type: props.network.payload ? 'string' : 'empty',
-    };
-  }
-});
-
-const response = computed(() => {
-  try {
-    if (props.network.response) {
-      return {
-        value: JSON.parse(JSON.stringify(props.network.response)),
-        type: 'object',
-      };
-    }
-    return {
-      value: {},
-      type: 'empty',
-    };
-  } catch (error) {
-    return {
-      value: props.network.response,
-      type: props.network.response ? 'string' : 'empty',
-    };
-  }
-});
-
-function onSelect(item: { label: string; value: string }) {
-  currentSelect.value = item.value;
-}
-function onClose() {
-  emit('close');
-}
-</script>
-<style scoped>
-.network-detail {
-  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;
-}
-.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: #616161;
-}
-.network-detail .network-detail-payload {
-  word-break: break-all;
-  max-width: 100%;
-}
-</style>

package/dev/components/NetworkList/NetworkItem.vue

@@ -1,106 +0,0 @@
-<template>
-  <view class="network-item">
-    <view class="network-url-row">
-      <Tag mode="info">{{ network.method }}</Tag>
-
-      <view class="network-url" v-html="network.url"> </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.status }}</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>
-  <!-- <Transition name="slide-fade"> -->
-  <NetworkDetail v-if="showDetail" :network="network" @close="onClose" />
-  <!-- </Transition> -->
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import Tag from '../Tag/index.vue';
-import NetworkDetail from './NetworkDetail.vue';
-import { formatDate } from '../../utils';
-import type { DevTool } from '../../type';
-defineProps<{
-  network: DevTool.NetworkItem;
-}>();
-const showDetail = ref(false);
-function onClose() {
-  showDetail.value = false;
-}
-</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-item .network-url-row {
-  display: flex;
-  align-items: center;
-}
-
-.network-item .network-url-row .network-url {
-  margin-left: 4px;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.network-item .network-url-row .network-detail-icon {
-  margin-left: auto;
-}
-
-.network-item .network-info {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 4px;
-  color: #616161;
-}
-.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/dev/components/NetworkList/index.vue

@@ -1,115 +0,0 @@
-<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 :data="networkList" :pageSize="10" className="network-list">
-      <template v-slot="{ list, start }">
-        <AutoSize
-          v-for="(item, index) in list"
-          :index="start + index"
-          :key="start + index"
-        >
-          <NetworkItem :network="item" />
-        </AutoSize>
-        <Empty v-if="!networkList || networkList.length === 0" />
-      </template>
-    </VirtualListPro>
-  </view>
-</template>
-<script lang="ts" setup>
-import Tag from '../Tag/index.vue';
-import NetworkItem from './NetworkItem.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<{
-  currentNetworkType: string;
-  networkList: DevTool.NetworkItem[];
-  modelValue: string;
-}>();
-
-const emit = defineEmits<{
-  (e: 'choose', type: string): void;
-  (e: 'update:modelValue', value: string): void;
-  (e: 'search', value: string): void;
-}>();
-const 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',
-  },
-];
-
-function onChoose(type: string) {
-  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>

package/dev/components/PiniaList/index.vue

@@ -1,64 +0,0 @@
-<template>
-  <view class="pinia-content">
-    <JsonPretty
-      :data="piniaList"
-      showLength
-      editable
-      v-if="showJson"
-      @update:data="onUpdateData"
-      @nodeClick="onNodeClick"
-    />
-    <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';
-import { getValueByPath } from '../../utils';
-
-
-const props = defineProps<{
-  piniaList: Record<string, any>;
-}>();
-const emit = defineEmits<{
-  (e: 'update:piniaList', data: Record<string, any>): void;
-  (e: 'diffValue', value: any): void;
-}>();
-const showJson = computed(() => {
-  try {
-    const str = JSON.stringify(props.piniaList);
-    if (typeof props.piniaList === 'object' && (str === '' || str === '{}')) {
-      return false;
-    }
-    return true;
-  } catch (error) {
-    return false;
-  }
-});
-
-let currentSelect: any;
-function onUpdateData(data: Record<string, any>) {
-  try {
-    const keys = currentSelect?.path?.slice(5);
-    if (!keys) return;
-    const newData = getValueByPath(data, keys);
-
-    emit('update:piniaList', data);
-    emit('diffValue', {
-      [keys]: newData
-    });
-  } catch (error) {
-    console.log('error: ', error);
-  }
-}
-function onNodeClick(node: any) {
-  currentSelect = node;
-}
-</script>
-<style scoped>
-.pinia-content {
-  padding: 16px;
-  font-size: var(--dev-tool-base-font-size);
-}
-</style>