vite-uni-dev-tool 0.0.16 → 0.0.18

package/dist/v3/NetworkList/NetworkSend.vue

@@ -0,0 +1,701 @@
+<template>
+  <view class="network-send" :style="{ zIndex: zIndex }">
+    <view class="network-send-form">
+      <view class="network-send-control">
+        <DevToolTitle>超时时间</DevToolTitle>
+      </view>
+      <input
+        class="network-input"
+        :value="state.timeout"
+        @input="onChangeState($event, 'timeout')"
+      />
+      <view class="network-send-control">
+        <DevToolTitle>请求方式</DevToolTitle>
+        <CircularButton style="margin-left: auto" text="×" @click="onClose" />
+      </view>
+      <radio-group class="radio-group" @change="onChangeRequestMethod">
+        <label
+          class="radio-group-item"
+          v-for="item in requestMethods"
+          :key="item.value"
+        >
+          <radio
+            size
+            style="transform: scale(0.8)"
+            :value="item.value"
+            :checked="item.value === state.method"
+          />
+
+          <view>{{ item.name }}</view>
+        </label>
+      </radio-group>
+      <view class="network-send-control">
+        <DevToolTitle>请求头</DevToolTitle>
+        <CircularButton
+          style="margin-left: auto"
+          text="＋"
+          @click="onAddHeader"
+        />
+      </view>
+
+      <view class="network-header-list">
+        <checkbox-group
+          v-if="headerList.length > 0"
+          @change="onChangeHeaderChecked"
+        >
+          <view
+            class="network-header-item"
+            v-for="(item, index) in headerList"
+            :key="item.id"
+          >
+            <checkbox :checked="item.checked" />
+            <input
+              class="network-input"
+              placeholder="请输入请求头名称"
+              placeholderStyle="font-size: 12px"
+              :value="item.key"
+              @input="onChangeHeader($event, 'key', index)"
+            />
+            <input
+              class="network-input"
+              placeholder="请输入请求头值"
+              placeholderStyle="font-size: 12px"
+              :value="item.value"
+              @input="onChangeHeader($event, 'value', index)"
+            />
+            <CircularButton
+              style="margin-left: 6px"
+              text="一"
+              @click="onDeleteHeader(item)"
+            />
+          </view>
+        </checkbox-group>
+
+        <view class="network-empty" v-else> 暂无请求头 </view>
+      </view>
+      <DevToolTitle>请求地址</DevToolTitle>
+      <textarea
+        placeholder="请输入请求地址"
+        placeholderStyle="font-size: 12px"
+        class="network-textarea"
+        :value="state.url"
+        @input="onChangeUrl"
+      />
+      <view class="form-error-message">
+        {{ hasUrl ? '' : '请输入请求地址' }}
+      </view>
+
+      <view class="network-send-control">
+        <DevToolTitle>请求参数(query)</DevToolTitle>
+        <CircularButton
+          style="margin-left: auto"
+          text="＋"
+          @click="onAddQuery"
+        />
+      </view>
+      <view class="network-param-list">
+        <checkbox-group
+          v-if="queryList.length > 0"
+          @change="onChangeQueryChecked"
+        >
+          <view
+            class="network-param-item"
+            v-for="(item, index) in queryList"
+            :key="item.id"
+          >
+            <checkbox :checked="item.checked" :value="item.id" />
+            <input
+              class="network-input"
+              placeholder="请输入参数名称"
+              placeholderStyle="font-size: 12px"
+              :value="item.key"
+              @input="onChangeQuery($event, 'key', index)"
+            />
+            <input
+              class="network-input"
+              placeholder="请输入参数值"
+              placeholderStyle="font-size: 12px"
+              :value="item.value"
+              @input="onChangeQuery($event, 'value', index)"
+            />
+            <CircularButton
+              text="一"
+              style="margin-left: 6px"
+              @click="onDeleteQuery(item)"
+            />
+          </view>
+        </checkbox-group>
+
+        <view class="network-empty" v-else> 暂无请求参数 </view>
+      </view>
+
+      <template v-if="!noBodyRequestMethods.includes(state.method)">
+        <view class="network-send-control">
+          <DevToolTitle>请求体(body)</DevToolTitle>
+        </view>
+
+        <textarea
+          placeholder="请输入请求体"
+          class="network-textarea"
+          placeholderStyle="font-size: 12px"
+          :value="state.bodyText"
+          @input="onChangeState($event, 'bodyText')"
+        />
+      </template>
+
+      <view class="network-send-buttons">
+        <button size="mini" :disabled="!isFinished" @click="onDetail">
+          详情
+        </button>
+        <button size="mini" @click="onReset">重置</button>
+        <button size="mini" @click="onSend">发送</button>
+      </view>
+
+      <NetworkDetail
+        v-show="showDetail"
+        :network="network"
+        @close="onCloseDetail"
+      />
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue';
+import CircularButton from '../CircularButton/index.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
+import NetworkDetail from './NetworkDetail.vue';
+import type { DevTool } from '../../type';
+
+const props = defineProps<{ network: DevTool.NetworkItem; zIndex?: number }>();
+
+const emit = defineEmits<{ (e: 'close'): void }>();
+
+const requestMethods = [
+  { name: 'GET', value: 'GET' },
+  { name: 'POST', value: 'POST' },
+  { name: 'PUT', value: 'PUT' },
+  { name: 'DELETE', value: 'DELETE' },
+  { name: 'PATCH', value: 'PATCH' },
+  { name: 'OPTIONS', value: 'OPTIONS' },
+  { name: 'HEAD', value: 'HEAD' },
+];
+
+const hasUrl = ref(true);
+
+const state = reactive<{
+  method: any;
+  url: string;
+  bodyText: string;
+  timeout: number;
+}>({
+  method: 'GET',
+  url: 'http://192.168.0.1:8080/a?a=123',
+  bodyText: '',
+  timeout: 60 * 1000,
+});
+
+const defaultHeader = [
+  {
+    id: 1,
+    key: 'Accept',
+    value: '*/*',
+    checked: false,
+  },
+  {
+    id: 2,
+    key: 'Accept-Language',
+    value: 'zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6',
+    checked: false,
+  },
+  {
+    id: 3,
+    key: 'Cache-Control',
+    value: 'no-cache',
+    checked: false,
+  },
+  {
+    id: 4,
+    key: 'Content-Type',
+    value: 'application/json; charset=utf-8',
+    checked: true,
+  },
+];
+
+type PB = {
+  id: number;
+  key: string;
+  value: string;
+  checked: boolean;
+};
+
+const headerList = reactive([...defaultHeader]);
+
+const queryList = reactive<PB[]>([
+  {
+    id: 1,
+    key: 'a',
+    value: '123',
+    checked: true,
+  },
+]);
+
+const isFinished = ref(false);
+
+const showDetail = ref(false);
+
+const network = reactive<DevTool.NetworkItem>({
+  index: 0,
+  url: '',
+  name: '',
+  method: '',
+  status: '',
+  time: '',
+  startTime: 0,
+  endTime: 0,
+  size: '',
+  headers: {
+    requestHeader: [],
+    responseHeader: [],
+  },
+  response: '',
+  payload: undefined,
+});
+
+const noBodyRequestMethods = ['GET', 'HEAD', 'PATCH', 'OPTIONS'];
+
+function onChangeState(e: any, key: keyof typeof state) {
+  state[key] = e.detail.value as never;
+}
+
+function parseUrlToList(url: string) {
+  if (url.includes('?')) {
+    const query = url.split('?')[1];
+    const queryObject = urlParamsToObject(query);
+    const list = objectToArray(queryObject);
+
+    return list;
+  }
+  return [];
+}
+
+function parseListToUrl(list: PB[]) {
+  const baseUrl = state.url.split('?')[0] || '';
+  if (list.length === 0) {
+    return baseUrl;
+  } else {
+    return (
+      baseUrl + '?' + arrayToUrlParams(queryList?.filter((q) => q.checked))
+    );
+  }
+}
+
+function onChangeUrl(e: any) {
+  const url = e.detail.value;
+  state.url = url;
+  const list = parseUrlToList(url);
+  queryList.splice(0, queryList.length, ...list);
+}
+
+function onDetail() {
+  showDetail.value = true;
+}
+
+function onCloseDetail() {
+  showDetail.value = false;
+}
+
+function onReset() {
+  isFinished.value = false;
+  hasUrl.value = true;
+  state.method = 'GET';
+  state.url = '';
+  state.bodyText = '';
+  headerList.splice(0, headerList.length, ...defaultHeader);
+  queryList.splice(0, queryList.length);
+}
+
+function onClose() {
+  emit('close');
+  onReset();
+}
+
+function onSend() {
+  if (!state.url) {
+    hasUrl.value = false;
+    uni.showToast({
+      title: '请输入请求地址',
+      icon: 'none',
+    });
+    return;
+  }
+  hasUrl.value = true;
+
+  const header = arrayToObject(headerList);
+  const query = arrayToUrlParams(queryList);
+
+  const requestOptions: UniNamespace.RequestOptions = {
+    url: state.url,
+    method: state.method,
+    timeout: state.timeout,
+    header,
+  };
+
+  if (noBodyRequestMethods.includes(state.method)) {
+    // 不支持携带 body 参数
+    requestOptions.data = {};
+    state.url = parseListToUrl(queryList);
+  } else {
+    // 支持 url 中携带参数
+
+    if (state.url.includes('?')) {
+      requestOptions.url = state.url + '&' + query;
+    } else {
+      requestOptions.url = state.url + '?' + query;
+    }
+
+    // 支持携带 body 参数
+    if (state.bodyText?.trim()) {
+      try {
+        const bodyJson = JSON.parse(state.bodyText);
+        requestOptions.data = bodyJson;
+      } catch (error) {
+        uni.showToast({
+          title: '请求体请输入正确的JSON格式',
+          icon: 'none',
+        });
+        return;
+      }
+    }
+  }
+
+  isFinished.value = false;
+
+  uni.showLoading({
+    title: '发送中...',
+    mask: true,
+  });
+
+  const baseUrl = requestOptions.url?.split('?')[0] || '';
+  const lastSlashIndex = baseUrl.lastIndexOf('/');
+  const name = lastSlashIndex !== -1 ? baseUrl.slice(lastSlashIndex + 1) : '';
+
+  network.startTime = Date.now();
+
+  uni.request({
+    ...requestOptions,
+    complete: (res: any) => {
+      // 赋值结果
+      network.url = requestOptions.url;
+      network.name = name;
+      network.method = requestOptions.method as string;
+      network.payload = requestOptions.data
+        ? JSON.stringify(requestOptions.data)
+        : '';
+      network.endTime = Date.now();
+      network.status = res.statusCode ?? 'error';
+      const diff = network.endTime - network.startTime;
+      network.time = diff < 1000 ? diff + 'ms' : diff / 1000 + 's';
+      const len =
+        res?.header?.['Content-Length'] || res?.header?.['content-length'] || 0;
+      network.size = len > 1024 ? (len / 1024).toFixed(2) + 'k' : len + 'b';
+      network.response = res;
+      network.headers.requestHeader = Object.entries(
+        requestOptions?.header ?? {},
+      ).map(([key, value]) => ({
+        key,
+        value,
+      }));
+      network.headers.responseHeader = Object.entries(res?.header ?? {}).map(
+        ([key, value]) => ({
+          key,
+          value,
+        }),
+      );
+
+      // 完成
+      uni.hideLoading();
+      isFinished.value = true;
+      uni.showToast({
+        title: '请求完成，点击左下角详情进行查看结果',
+        icon: 'none',
+      });
+    },
+  });
+}
+
+function onChangeRequestMethod(e: any) {
+  const method = e.detail.value;
+  state.method = method;
+}
+
+function onDeleteHeader(item: any) {
+  const index = headerList.findIndex((i) => i.id === item.id);
+  headerList.splice(index, 1);
+}
+
+function onAddHeader() {
+  const id = Date.now();
+  headerList.push({
+    id,
+    key: '',
+    value: '',
+    checked: false,
+  });
+}
+
+function onChangeHeaderChecked(e: any) {
+  const list = e.detail?.value ?? [];
+  headerList.forEach((q) => {
+    q.checked = list?.includes(q.id);
+  });
+}
+
+function onChangeHeader(e: any, key: 'key' | 'value', index: number) {
+  headerList[index][key] = e.detail.value;
+}
+
+function onDeleteQuery(item: any) {
+  const index = queryList.findIndex((i) => i.id === item.id);
+  queryList.splice(index, 1);
+}
+function onAddQuery() {
+  const id = Date.now();
+  queryList.push({
+    id,
+    key: '',
+    value: '',
+    checked: false,
+  });
+}
+function onChangeQueryChecked(e: any) {
+  const list = e.detail?.value ?? [];
+  queryList.forEach((q) => {
+    q.checked = list?.includes(q.id);
+  });
+
+  state.url = parseListToUrl(queryList);
+}
+
+function onChangeQuery(e: any, key: 'key' | 'value', index: number) {
+  queryList[index][key] = e.detail.value;
+
+  state.url = parseListToUrl(queryList);
+}
+
+function arrayToObject(arr: any[]) {
+  return arr.reduce((acc, cur) => {
+    if (cur.checked) {
+      acc[cur.key] = cur.value;
+    }
+    return acc;
+  }, {});
+}
+
+function objectToArray<T extends Record<string, any>>(obj: T) {
+  return Object.entries(obj).map(([key, value]) => ({
+    id: Date.now(),
+    key,
+    value,
+    checked: true,
+  }));
+}
+
+function objectToUrlParams(obj: any) {
+  return Object.keys(obj)
+    .map((key) => `${key}=${encodeURIComponent(obj[key])}`)
+    .join('&');
+}
+
+function arrayToUrlParams(arr: any[]) {
+  return arr
+    .map((item) => `${item.key}=${encodeURIComponent(item.value)}`)
+    ?.join('&');
+}
+
+function unionArrayByKey<T>(arr1: T[], arr2: T[], key: keyof T): T[] {
+  const map = new Map();
+  arr1.forEach((item) => {
+    map.set(item?.[key], item);
+  });
+  arr2.forEach((item) => {
+    if (map.has(item?.[key])) {
+      map.set(item?.[key], { ...map.get(item?.[key]), ...item });
+    } else {
+      map.set(item?.[key], item);
+    }
+  });
+  return Array.from(map.values());
+}
+
+function urlParamsToObject(urlParams: string) {
+  return urlParams.split('&').reduce(
+    (acc, cur) => {
+      const [key, value] = cur.split('=');
+      acc[key] = value;
+      return acc;
+    },
+    {} as Record<string, any>,
+  );
+}
+
+/**
+ * 处理重发参数
+ */
+function handleResendNetwork() {
+  // 如果没有网络数据或尚未开始，则直接返回
+  if (!props.network || props.network.startTime === 0) return;
+
+  // 设置基础请求信息
+  state.url = props.network.url;
+  state.method = props.network.method?.toUpperCase() ?? 'GET';
+
+  // 初始化请求头
+  const requestHeaders =
+    props.network.headers?.requestHeader?.map((item, index) => {
+      return {
+        ...item,
+        checked: true,
+        id: index,
+      };
+    }) ?? [];
+
+  headerList.splice(0, headerList.length, ...requestHeaders);
+
+  queryList.splice(0, queryList.length);
+
+  //  解析参数
+  if (noBodyRequestMethods.includes(state.method)) {
+    // 参数在 query 中
+    if (props.network.url.includes('?')) {
+      const urlParams = objectToArray(
+        urlParamsToObject(props.network.url.split('?')?.[1] ?? ''),
+      );
+      const payloadParams = objectToArray(props.network.payload);
+
+      const list = unionArrayByKey(urlParams, payloadParams, 'key');
+
+      queryList.splice(0, queryList.length, ...list);
+    }
+  } else {
+    // 参数在 query 中
+    if (props.network.url.includes('?')) {
+      const urlParams = objectToArray(
+        urlParamsToObject(props.network.url.split('?')?.[1] ?? ''),
+      );
+      queryList.splice(0, queryList.length, ...urlParams);
+    }
+    state.bodyText = JSON.stringify(props.network.payload);
+  }
+}
+
+onMounted(() => {
+  handleResendNetwork();
+});
+</script>
+
+<style scoped>
+.network-send {
+  position: fixed;
+  width: 100vw;
+  height: 100%;
+  z-index: 5;
+  top: 0;
+  left: 0;
+  padding: 0 16px;
+  overflow: auto;
+
+  background-color: var(--dev-tool-bg3-color);
+  box-sizing: border-box;
+}
+.network-send .network-send-control {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 32px;
+  border-bottom: 1px solid transparent;
+  box-sizing: border-box;
+}
+
+.network-send .network-send-control :deep(.tag) {
+  margin-right: 16px;
+}
+.network-send .network-send-control :deep(.tag):last-child {
+  margin-right: 0;
+}
+
+.radio-group {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.radio-group .radio-group-item {
+  display: flex;
+  align-items: center;
+  width: 25%;
+  margin-bottom: 6px;
+}
+
+.network-input {
+  padding: 0 6px;
+  height: 24px;
+  font-size: 12px;
+  border: 1px solid var(--dev-tool-border-color);
+}
+.network-textarea {
+  padding: 6px;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 12px;
+  border: 1px solid var(--dev-tool-border-color);
+}
+.form-error-message {
+  padding: 0 6px;
+  height: 24px;
+  line-height: 24px;
+  color: red;
+}
+
+.network-header-list {
+}
+
+.network-header-item {
+  display: flex;
+  align-items: center;
+}
+
+.network-empty {
+  color: var(--dev-tool-info-color);
+  text-align: center;
+}
+
+.network-param-list {
+}
+.network-param-item {
+  display: flex;
+  align-items: center;
+}
+
+.network-body-data {
+}
+.network-body-data-item {
+  display: flex;
+  align-items: center;
+}
+
+.network-send-buttons {
+  position: sticky;
+  display: flex;
+  justify-content: space-between;
+  /* gap: 6px; */
+  width: 100%;
+  margin-top: 12px;
+  background-color: var(--dev-tool-bg3-color);
+}
+.network-send-buttons button {
+  width: 100%;
+  margin-right: 6px;
+}
+.network-send-buttons button:last-child {
+  margin: 0;
+}
+</style>

package/dist/v3/NetworkList/const.d.ts

@@ -0,0 +1,5 @@
+export declare const sortMap: {
+    '-1': string;
+    '1': string;
+};
+//# sourceMappingURL=const.d.ts.map

package/dist/v3/NetworkList/const.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../dev/v3/NetworkList/const.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;CAGnB,CAAC"}

package/dist/v3/NetworkList/const.ts

@@ -0,0 +1,4 @@
+export const sortMap = {
+  '-1': ' ↑ ',
+  '1': ' ↓ ',
+};