vite-uni-dev-tool 0.0.16 → 0.0.17

package/dist/v3/NetworkList/NetworkSend.vue

@@ -0,0 +1,819 @@
+<template>
+  <view class="network-send" :style="{ zIndex: zIndex }">
+    <view class="network-send-form">
+      <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, index) 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>
+      <DevToolTitle>请求地址</DevToolTitle>
+      <input
+        placeholder="请输入请求地址"
+        placeholderStyle="font-size: 12px"
+        class="network-input"
+        v-model="state.url"
+      />
+      <view class="form-error-message">
+        {{ hasUrl ? '' : '请输入请求地址' }}
+      </view>
+
+      <view class="network-send-control">
+        <DevToolTitle>请求头</DevToolTitle>
+        <CircularButton
+          style="margin-left: auto"
+          text="＋"
+          @click="onAddHeader"
+        />
+      </view>
+
+      <view class="network-header-list">
+        <template v-if="headerList.length > 0">
+          <view
+            class="network-header-item"
+            v-for="(item, index) in headerList"
+            :key="item.id"
+          >
+            <checkbox :checked="item.checked" />
+            <input
+              v-model="item.key"
+              class="network-input"
+              placeholder="请输入请求头名称"
+              placeholderStyle="font-size: 12px"
+            />
+            <input
+              v-model="item.value"
+              class="network-input"
+              placeholder="请输入请求头值"
+              placeholderStyle="font-size: 12px"
+            />
+            <CircularButton
+              style="margin-left: 6px"
+              text="一"
+              @click="onDeleteHeader(item)"
+            />
+          </view>
+        </template>
+
+        <view class="network-empty" v-else> 暂无请求头 </view>
+      </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
+              v-model="item.key"
+              class="network-input"
+              placeholder="请输入参数名称"
+              placeholderStyle="font-size: 12px"
+            />
+            <input
+              v-model="item.value"
+              class="network-input"
+              placeholder="请输入参数值"
+              placeholderStyle="font-size: 12px"
+            />
+            <CircularButton
+              text="一"
+              style="margin-left: 6px"
+              @click="onDeleteQuery(item)"
+            />
+          </view>
+        </checkbox-group>
+
+        <view class="network-empty" v-else> 暂无请求参数 </view>
+      </view>
+
+      <template v-if="state.method === 'POST' || state.method === 'PUT'">
+        <view class="network-send-control">
+          <DevToolTitle>请求体(body)</DevToolTitle>
+          <CircularButton
+            v-if="
+              state.bodyType == 'form-data' ||
+              state.bodyType == 'x-www-form-urlencoded'
+            "
+            style="margin-left: auto"
+            text="＋"
+            @click="onAddBody"
+          />
+        </view>
+
+        <radio-group class="radio-group" @change="onChangeBodyType">
+          <label
+            class="radio-group-item"
+            v-for="(item, index) in bodyTypes"
+            :key="item.value"
+          >
+            <radio
+              size
+              style="transform: scale(0.8)"
+              :value="item.value"
+              :checked="item.value === state.bodyType"
+            />
+
+            <view>{{ item.name }}</view>
+          </label>
+        </radio-group>
+
+        <view
+          class="network-body-data"
+          v-if="
+            state.bodyType == 'form-data' ||
+            state.bodyType == 'x-www-form-urlencoded'
+          "
+        >
+          <template v-if="bodyList.length > 0">
+            <checkbox-group
+              class="network-body-data-item"
+              v-for="(item, index) in bodyList"
+              :key="item.id"
+              @change="onChangeBodyChecked"
+            >
+              <checkbox v-model="item.checked" />
+              <input
+                v-model="item.key"
+                class="network-input"
+                placeholder="请输入参数名称"
+                placeholderStyle="font-size: 12px"
+              />
+              <input
+                v-model="item.value"
+                class="network-input"
+                placeholder="请输入参数值"
+                placeholderStyle="font-size: 12px"
+              />
+              <CircularButton
+                text="一"
+                style="margin-left: 6px"
+                @click="onDeleteBody(item)"
+              />
+            </checkbox-group>
+          </template>
+
+          <view class="network-empty" v-else> 暂无请求参数 </view>
+        </view>
+
+        <textarea
+          v-else-if="state.bodyType == 'Raw text'"
+          v-model="state.bodyText"
+          placeholder="请输入请求体"
+          class="network-body-textarea"
+          placeholderStyle="font-size: 12px"
+        />
+        <view class="network-empty" v-else> 暂无请求参数 </view>
+      </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';
+import { isObject, isString } from '../../utils';
+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 bodyTypes = [
+  { name: 'none', value: 'none' },
+  { name: 'form-data', value: 'form-data' },
+  { name: 'x-www-form-urlencoded', value: 'x-www-form-urlencoded' },
+  { name: 'Raw text', value: 'Raw text' },
+];
+
+const hasUrl = ref(true);
+
+const state = reactive<{
+  method: any;
+  bodyType: any;
+  url: string;
+  bodyText: string;
+}>({
+  method: 'GET',
+  bodyType: 'none',
+  url: '192.168.0.1:8080/a?a=123',
+  bodyText: '',
+});
+
+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/x-www-form-urlencoded',
+    checked: true,
+  },
+];
+
+const headerList = reactive([...defaultHeader]);
+
+const defaultQuery = [
+  {
+    id: 1,
+    key: 'name',
+    value: '',
+    checked: false,
+  },
+];
+
+const queryList = reactive([...defaultQuery]);
+
+const defaultBody = [
+  {
+    id: 1,
+    key: 'name',
+    value: '',
+    checked: false,
+  },
+];
+
+const bodyList = reactive([...defaultBody]);
+
+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,
+});
+
+function onDetail() {
+  showDetail.value = true;
+}
+
+function onCloseDetail() {
+  showDetail.value = false;
+}
+
+function onReset() {
+  isFinished.value = false;
+  hasUrl.value = true;
+  state.method = 'GET';
+  state.bodyType = 'none';
+  state.url = '';
+  state.bodyText = '';
+  headerList.splice(0, headerList.length, ...defaultHeader);
+  queryList.splice(0, queryList.length, ...defaultQuery);
+  bodyList.splice(0, bodyList.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 = arrayToObject(queryList);
+
+  const body = arrayToObject(bodyList);
+  const formData = new FormData();
+
+  const requestOptions: UniNamespace.RequestOptions = {
+    url: state.url,
+    method: state.method,
+    timeout: 60 * 1000,
+    header,
+  };
+
+  console.log('state: ', state);
+
+  if (state.bodyType === 'form-data') {
+    for (const key in body) {
+      formData.append(key, body[key]);
+    }
+    requestOptions.data = formData;
+  } else if (state.bodyType === 'x-www-form-urlencoded') {
+    const urlencoded = objectToUrlParams(body);
+    requestOptions.data = urlencoded;
+  } else if (state.bodyType === 'Raw text') {
+    try {
+      const bodyJson = JSON.parse(state.bodyText);
+      requestOptions.data = bodyJson;
+    } catch (error) {
+      uni.showToast({
+        title: '请求体请输入正确的JSON格式',
+        icon: 'none',
+      });
+      return;
+    }
+  } else {
+    console.log('------------state: ', state);
+    const urlQuery = urlParamsToObject(state.url.split('?')?.[1] ?? '');
+    console.log('urlQuery: ', urlQuery);
+    requestOptions.data = {
+      ...query,
+      ...urlQuery,
+    };
+  }
+
+  console.log('requestOptions: ', requestOptions);
+
+  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;
+
+  if (method === 'POST' || method === 'PUT') {
+    bodyList.splice(0, bodyList.length);
+    state.bodyType = 'none';
+  }
+}
+
+function onChangeBodyType(e: any) {
+  const bodyType = e.detail.value;
+  state.bodyType = bodyType;
+  const ctIndex = headerList.findIndex((h) =>
+    ['Content-Type', 'Content-type', 'content-Type', 'content-type'].includes(
+      h.key,
+    ),
+  );
+
+  if (bodyType === 'form-data' || bodyType === 'x-www-form-urlencoded') {
+    if (ctIndex === -1) {
+      headerList.push({
+        id: Date.now(),
+        key: 'Content-Type',
+        value: 'application/x-www-form-urlencoded',
+        checked: true,
+      });
+    } else {
+      headerList[ctIndex].checked = true;
+      headerList[ctIndex].value = 'application/x-www-form-urlencoded';
+    }
+  } else {
+    bodyList.splice(0, bodyList.length);
+
+    if (ctIndex === -1) {
+      headerList.push({
+        id: Date.now(),
+        key: 'Content-Type',
+        value: 'application/json;charset:utf-8;',
+        checked: true,
+      });
+    } else {
+      headerList[ctIndex].checked = true;
+      headerList[ctIndex].value = 'application/json;charset:utf-8;';
+    }
+  }
+}
+
+function onChangeBodyChecked(e: any) {
+  const list = e.detail?.value ?? [];
+  bodyList.forEach((h) => {
+    list?.includes(h.id) ? (h.checked = true) : (h.checked = false);
+  });
+}
+
+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 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) => {
+    list?.includes(q.id) ? (q.checked = true) : (q.checked = false);
+  });
+}
+
+function onDeleteBody(item: any) {
+  const index = bodyList.findIndex((i) => i.id === item.id);
+  bodyList.splice(index, 1);
+}
+
+function onAddBody() {
+  const id = Date.now();
+  bodyList.push({
+    id,
+    key: '',
+    value: '',
+    checked: false,
+  });
+}
+
+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 formDataToObject(data: Record<string, any>) {
+  const obj: Record<string, any> = {};
+  for (const key in data) {
+    if (data.hasOwnProperty(key)) {
+      obj[key] = data[key];
+    }
+  }
+  return obj;
+}
+
+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);
+
+  // 查找 Content-Type 头部
+  const contentType = requestHeaders.find((h) =>
+    ['Content-Type', 'content-type', 'Content-type', 'content-Type'].includes(
+      h.key,
+    ),
+  )?.value;
+
+  queryList.splice(0, queryList.length);
+
+  // 参数在 query 中
+  if (props.network.url.includes('?')) {
+    queryList.splice(
+      0,
+      queryList.length,
+      ...objectToArray(
+        urlParamsToObject(props.network.url.split('?')?.[1] ?? ''),
+      ),
+    );
+  }
+
+  // 根据 Content-Type 设置请求体类型和内容
+  if (contentType?.includes('application/json')) {
+    if (state.method === 'GET' || state.method === 'DELETE') {
+      state.bodyType = 'none';
+
+      // 参数在 payload 中
+      if (props.network.payload) {
+        queryList.splice(
+          queryList.length,
+          0,
+          ...objectToArray(urlParamsToObject(props.network.payload)),
+        );
+      }
+    } else {
+      state.bodyType = 'Raw text';
+      try {
+        state.bodyText = isString(props.network.payload)
+          ? props.network.payload
+          : JSON.stringify(props.network.payload);
+      } catch (error) {
+        console.error('Failed to parse payload as JSON:', error);
+
+        state.bodyText = '请求体非JSON格式';
+
+        uni.showToast({
+          title: '请求体JSON格式错误',
+          icon: 'none',
+        });
+      }
+    }
+  } else if (contentType?.includes('application/x-www-form-urlencoded')) {
+    if (isString(props.network.payload)) {
+      state.bodyType = 'x-www-form-urlencoded';
+      const payloadObject = urlParamsToObject(props.network.payload);
+      bodyList.splice(0, bodyList.length, ...objectToArray(payloadObject));
+    } else {
+      state.bodyType = 'form-data';
+      // 对于非字符串负载，尝试转换为对象形式
+      const payloadObject = props.network.payload
+        ? isObject(props.network.payload)
+          ? props.network.payload
+          : formDataToObject(props.network.payload)
+        : {};
+      bodyList.splice(0, bodyList.length, ...objectToArray(payloadObject));
+    }
+  } else {
+    // 默认为无请求体 无法解析请求体
+    state.bodyType = 'none';
+  }
+}
+
+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-body-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>