vite-uni-dev-tool 0.0.1

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

@@ -0,0 +1,172 @@
+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

@@ -0,0 +1,197 @@
+<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: 10000;
+  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

@@ -0,0 +1,106 @@
+<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

@@ -0,0 +1,108 @@
+<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>
+    <view class="network-list">
+      <NetworkItem
+        v-for="item in networkList"
+        :network="item"
+        :key="item.index"
+      />
+      <Empty v-if="!networkList || networkList.length === 0" />
+    </view>
+  </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';
+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);
+  overflow: auto;
+}
+.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

@@ -0,0 +1,64 @@
+<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>