vite-uni-dev-tool 0.0.20 → 0.0.22

package/dist/v3/NetworkList/InterceptConfig.vue

@@ -0,0 +1,835 @@
+<template>
+  <view class="intercept-config" :style="{ zIndex: zIndex }">
+    <view class="intercept-config-control">
+      <DevToolTitle>拦截规则配置</DevToolTitle>
+      <CircularButton style="margin-left: auto" text="×" @click="onClose" />
+    </view>
+
+    <view class="intercept-config-form">
+      <view class="intercept-config-tip">
+        tips:
+        拦截请求，发送请求之前将采用输入的请求头和请求参数，返回响应头和响应参数。会真实发起一次请求(真实请求可能失败)，更改最后的响应结果。
+      </view>
+      <view class="intercept-config-control">
+        <DevToolTitle>超时时间(ms)</DevToolTitle>
+      </view>
+      <input
+        class="intercept-input"
+        :value="state.timeout"
+        @input="onChangeState($event, 'timeout')"
+      />
+      <view class="intercept-config-tip">
+        tips: 防止请求不存在，请求时长异常
+      </view>
+      <view class="intercept-config-control">
+        <DevToolTitle>响应状态</DevToolTitle>
+      </view>
+      <input
+        class="intercept-input"
+        :value="state.status"
+        @input="onChangeState($event, 'status')"
+      />
+      <view class="intercept-config-control">
+        <DevToolTitle>请求方式</DevToolTitle>
+      </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)"
+            color="#9254de"
+            :value="item.value"
+            :checked="item.value === state.method"
+          />
+
+          <view>{{ item.name }}</view>
+        </label>
+      </radio-group>
+
+      <view class="intercept-config-control">
+        <DevToolTitle>请求头</DevToolTitle>
+        <CircularButton
+          style="margin-left: auto"
+          text="＋"
+          @click="onAddRequestHeader"
+        />
+      </view>
+
+      <view class="intercept-header-list">
+        <checkbox-group
+          v-if="requestHeaderList.length > 0"
+          key="requestHeaderList"
+          @change="onChangeRequestHeaderChecked"
+        >
+          <view
+            class="intercept-header-item"
+            v-for="(item, index) in requestHeaderList"
+            :key="item.id"
+          >
+            <checkbox
+              color="#9254de"
+              :value="item.id"
+              :checked="item.checked"
+            />
+            <input
+              class="intercept-input"
+              placeholder="请输入请求头名称"
+              placeholderStyle="font-size: 12px"
+              :value="item.key"
+              @input="onChangeRequestHeader($event, 'key', index)"
+            />
+            <input
+              class="intercept-input"
+              placeholder="请输入请求头值"
+              placeholderStyle="font-size: 12px"
+              :value="item.value"
+              @input="onChangeRequestHeader($event, 'value', index)"
+            />
+            <CircularButton
+              style="margin-left: 6px"
+              text="一"
+              @click="onDeleteRequestHeader(item)"
+            />
+          </view>
+        </checkbox-group>
+
+        <view class="intercept-empty" v-else> 暂无请求头 </view>
+      </view>
+
+      <view class="intercept-config-control">
+        <DevToolTitle>响应头</DevToolTitle>
+        <CircularButton
+          style="margin-left: auto"
+          text="＋"
+          @click="onAddResponseHeader"
+        />
+      </view>
+
+      <view class="intercept-header-list">
+        <checkbox-group
+          v-if="responseHeaderList.length > 0"
+          key="responseHeaderList"
+          @change="onChangeResponseHeaderChecked"
+        >
+          <view
+            class="intercept-header-item"
+            v-for="(item, index) in responseHeaderList"
+            :key="item.id"
+          >
+            <checkbox
+              color="#9254de"
+              :value="item.id"
+              :checked="item.checked"
+            />
+            <input
+              class="intercept-input"
+              placeholder="请输入响应头名称"
+              placeholderStyle="font-size: 12px"
+              :value="item.key"
+              @input="onChangeResponseHeader($event, 'key', index)"
+            />
+            <input
+              class="intercept-input"
+              placeholder="请输入响应头值"
+              placeholderStyle="font-size: 12px"
+              :value="item.value"
+              @input="onChangeResponseHeader($event, 'value', index)"
+            />
+            <CircularButton
+              style="margin-left: 6px"
+              text="一"
+              @click="onDeleteResponseHeader(item)"
+            />
+          </view>
+        </checkbox-group>
+
+        <view class="intercept-empty" v-else> 暂无响应头 </view>
+      </view>
+      <DevToolTitle>请求地址</DevToolTitle>
+      <textarea
+        placeholder="请输入请求地址"
+        placeholderStyle="font-size: 12px"
+        class="intercept-textarea"
+        :value="state.url"
+        @input="onChangeUrl"
+      />
+      <view class="form-error-message">
+        {{ hasUrl ? '' : '请输入请求地址' }}
+      </view>
+
+      <view class="intercept-config-control">
+        <DevToolTitle>请求参数(query)</DevToolTitle>
+        <CircularButton
+          style="margin-left: auto"
+          text="＋"
+          @click="onAddQuery"
+        />
+      </view>
+      <view class="intercept-param-list">
+        <checkbox-group
+          v-if="queryList.length > 0"
+          @change="onChangeQueryChecked"
+        >
+          <view
+            class="intercept-param-item"
+            v-for="(item, index) in queryList"
+            :key="item.id"
+          >
+            <checkbox
+              color="#9254de"
+              :checked="item.checked"
+              :value="item.id"
+            />
+            <input
+              class="intercept-input"
+              placeholder="请输入参数名称"
+              placeholderStyle="font-size: 12px"
+              :value="item.key"
+              @input="onChangeQuery($event, 'key', index)"
+            />
+            <input
+              class="intercept-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="intercept-empty" v-else> 暂无请求参数 </view>
+      </view>
+
+      <template v-if="!noBodyRequestMethods.includes(state.method)">
+        <view class="intercept-config-control">
+          <DevToolTitle>请求体(request body)</DevToolTitle>
+        </view>
+
+        <textarea
+          placeholder="请输入请求体"
+          class="intercept-textarea"
+          placeholderStyle="font-size: 12px"
+          :value="state.bodyText"
+          @input="onChangeState($event, 'bodyText')"
+        />
+      </template>
+
+      <view class="intercept-config-control">
+        <DevToolTitle>响应体(response body)</DevToolTitle>
+      </view>
+      <textarea
+        placeholder="请输入响应体"
+        class="intercept-textarea"
+        placeholderStyle="font-size: 12px"
+        :value="state.responseText"
+        @input="onChangeState($event, 'responseText')"
+      />
+    </view>
+    <view class="intercept-config-buttons">
+      <!-- <button
+        size="mini"
+        :disabled="!isFinished"
+        @click="emit('openDetail', network)"
+      >
+        详情
+      </button>
+      <button size="mini" @click="onReset">重置</button>
+      <button size="mini" @click="onSend">发送</button> -->
+      <button
+        size="mini"
+        style="background-color: #9254de; color: #fff"
+        @click="onConfirm"
+      >
+        保存配置
+      </button>
+    </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 type { DevTool } from '../../type';
+
+const props = defineProps<{ network: DevTool.NetworkItem; zIndex?: number }>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'openDetail', v: DevTool.NetworkItem): void;
+  (e: 'confirm', v: DevTool.NetworkItem): 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;
+  status: number | string;
+  bodyText: string;
+  responseText: string;
+  timeout: number;
+}>({
+  method: 'GET',
+  url: 'http://mock.view-uni-dev-tool/a?a=123',
+  status: 200,
+  bodyText: '',
+  responseText: '',
+  timeout: 10 * 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 requestHeaderList = reactive([...defaultHeader]);
+
+const responseHeaderList = reactive([...defaultHeader]);
+
+const queryList = reactive<PB[]>([
+  {
+    id: 1,
+    key: 'a',
+    value: '123',
+    checked: true,
+  },
+]);
+
+const isFinished = ref(false);
+
+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 onReset() {
+  isFinished.value = false;
+  hasUrl.value = true;
+  state.method = 'GET';
+  state.url = '';
+  state.bodyText = '';
+  responseHeaderList.splice(0, responseHeaderList.length, ...defaultHeader);
+  queryList.splice(0, queryList.length);
+}
+
+function onClose() {
+  emit('close');
+  onReset();
+}
+
+function onConfirm() {
+  if (!state.url) {
+    hasUrl.value = false;
+    uni.showToast({
+      title: '请输入请求地址',
+      icon: 'none',
+    });
+    return;
+  }
+  hasUrl.value = true;
+
+  const responseHeader = arrayToObject(responseHeaderList);
+  const query = arrayToUrlParams(queryList);
+
+  const baseUrl = state.url?.split('?')[0] || '';
+  const lastSlashIndex = baseUrl.lastIndexOf('/');
+  const name = lastSlashIndex !== -1 ? baseUrl.slice(lastSlashIndex + 1) : '';
+
+  const interceptConfig: DevTool.NetworkItem = {
+    index: 0,
+
+    name,
+    url: state.url,
+    method: state.method,
+    timeout: state.timeout,
+    status: state.status,
+    time: '',
+    startTime: 0,
+    endTime: 0,
+    size: '',
+    headers: {
+      requestHeader: requestHeaderList,
+      responseHeader: responseHeaderList,
+    },
+    response: {
+      data: '',
+      statusCode: state.status,
+      header: responseHeader,
+      cookies: [],
+      errMsg: 'request:ok',
+    },
+    payload: {},
+  };
+
+  if (noBodyRequestMethods.includes(state.method)) {
+    // 不支持携带 body 参数
+
+    interceptConfig.payload = {};
+  } else {
+    // 支持 url 中携带参数
+
+    if (state.url.includes('?')) {
+      interceptConfig.url = state.url + '&' + query;
+    } else {
+      interceptConfig.url = state.url + '?' + query;
+    }
+
+    // 支持携带 body 参数
+    if (state.bodyText?.trim()) {
+      try {
+        const bodyJson = JSON.parse(state.bodyText);
+        interceptConfig.payload = bodyJson;
+      } catch (error) {
+        uni.showToast({
+          title: '请求体请输入正确的JSON格式',
+          icon: 'none',
+        });
+        return;
+      }
+    }
+  }
+
+  if (state.responseText?.trim()) {
+    try {
+      const bodyJson = JSON.parse(state.responseText);
+      interceptConfig.response.data = bodyJson;
+    } catch (error) {
+      uni.showToast({
+        title: '响应体请输入正确的JSON格式',
+        icon: 'none',
+      });
+      return;
+    }
+  }
+
+  uni.showToast({
+    icon: 'none',
+    title: '保存成功',
+  });
+
+  emit('confirm', interceptConfig);
+  emit('close');
+}
+
+function onChangeRequestMethod(e: any) {
+  const method = e.detail.value;
+  state.method = method;
+}
+
+function onDeleteResponseHeader(item: any) {
+  const index = responseHeaderList.findIndex((i) => i.id === item.id);
+  responseHeaderList.splice(index, 1);
+}
+
+function onDeleteRequestHeader(item: any) {
+  const index = requestHeaderList.findIndex((i) => i.id === item.id);
+  requestHeaderList.splice(index, 1);
+}
+
+function onAddRequestHeader() {
+  const id = Date.now();
+  requestHeaderList.push({
+    id,
+    key: '',
+    value: '',
+    checked: false,
+  });
+}
+function onChangeRequestHeaderChecked(e: any) {
+  const list = e.detail?.value ?? [];
+
+  Object.assign(
+    requestHeaderList,
+    requestHeaderList.map((item) => {
+      return { ...item, checked: list?.includes(item.id) };
+    }),
+  );
+}
+
+function onChangeRequestHeader(e: any, key: 'key' | 'value', index: number) {
+  requestHeaderList[index][key] = e.detail.value;
+}
+
+function onAddResponseHeader() {
+  const id = Date.now();
+  responseHeaderList.push({
+    id,
+    key: '',
+    value: '',
+    checked: false,
+  });
+}
+
+function onChangeResponseHeaderChecked(e: any) {
+  const list = e.detail?.value ?? [];
+
+  Object.assign(
+    responseHeaderList,
+    responseHeaderList.map((item) => {
+      return { ...item, checked: list?.includes(item.id) };
+    }),
+  );
+}
+
+function onChangeResponseHeader(e: any, key: 'key' | 'value', index: number) {
+  responseHeaderList[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 handleInterceptConfig() {
+  // 如果没有网络数据或尚未开始，则直接返回
+  if (!props.network || !props.network.url) return;
+
+  // 设置基础请求信息
+  state.url = props.network.url;
+  state.method = props.network.method?.toUpperCase() ?? 'GET';
+  state.status = props.network.status;
+
+  // 初始化请求头
+  const requestHeaders =
+    props.network.headers?.requestHeader?.map((item, index) => {
+      return {
+        ...item,
+        id: index,
+        checked: true,
+      };
+    }) ?? [];
+
+  requestHeaderList.splice(0, requestHeaderList.length, ...requestHeaders);
+
+  const responseHeaders =
+    props.network.headers?.responseHeader?.map((item, index) => {
+      return {
+        ...item,
+        id: index,
+        checked: true,
+      };
+    }) ?? [];
+
+  responseHeaderList.splice(0, responseHeaderList.length, ...responseHeaders);
+
+  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);
+  }
+
+  if (props.network.response?.data) {
+    try {
+      state.responseText = JSON.stringify(props.network.response.data);
+    } catch (error) {
+      state.responseText = props.network.response.data;
+    }
+  }
+}
+
+onMounted(() => {
+  handleInterceptConfig();
+});
+</script>
+
+<style scoped>
+.intercept-config {
+  position: fixed;
+  width: 100vw;
+  height: 100%;
+  z-index: 5;
+  top: 0;
+  left: 0;
+  padding: 0 16px;
+  /* #ifdef H5 */
+  padding: 50px 16px;
+  /* #endif */
+  overflow: auto;
+
+  background-color: var(--dev-tool-bg3-color);
+  box-sizing: border-box;
+}
+
+.intercept-config-tip {
+  font-size: 12px;
+  color: var(--dev-tool-info-color);
+}
+.intercept-config-form {
+  height: calc(100% - 32px - 42px);
+  overflow: auto;
+}
+
+.intercept-config-control {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 32px;
+  border-bottom: 1px solid transparent;
+  box-sizing: border-box;
+}
+
+.intercept-config-control :deep(.tag) {
+  margin-right: 16px;
+}
+.intercept-config-control :deep(.tag):last-child {
+  margin-right: 0;
+}
+
+.radio-group {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.radio-group-item {
+  display: flex;
+  align-items: center;
+  width: 25%;
+  margin-bottom: 6px;
+
+  font-size: 12px;
+}
+
+.intercept-input {
+  padding: 0 6px;
+  height: 24px;
+  font-size: 12px;
+  border: 1px solid var(--dev-tool-border-color);
+}
+.intercept-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;
+}
+
+.intercept-header-list {
+}
+
+.intercept-header-item {
+  display: flex;
+  align-items: center;
+}
+
+.intercept-empty {
+  color: var(--dev-tool-info-color);
+  text-align: center;
+}
+
+.intercept-param-list {
+}
+.intercept-param-item {
+  display: flex;
+  align-items: center;
+}
+
+.intercept-body-data {
+}
+.intercept-body-data-item {
+  display: flex;
+  align-items: center;
+}
+
+.intercept-config-buttons {
+  position: sticky;
+  display: flex;
+  justify-content: space-between;
+  /* gap: 6px; */
+  width: 100%;
+  margin-top: 12px;
+  background-color: var(--dev-tool-bg3-color);
+}
+.intercept-config-buttons button {
+  width: 100%;
+  margin-right: 6px;
+}
+.intercept-config-buttons button:last-child {
+  margin: 0;
+}
+</style>