oxy-uni-ui 2.1.1 → 2.1.2

package/devTools/page/components/listItem/networkItem.vue

@@ -0,0 +1,398 @@
+<template>
+  <view
+    class="networkItem"
+    :class="['type-' + item.type]"
+  >
+    <view class="card">
+      <view class="content">
+        <view class="head">
+          <view
+            class="method"
+            :class="'type-' + item.method"
+          >
+            <text
+              class="methodText"
+              :class="'type-' + item.method"
+            >
+              {{ item.method }}
+            </text>
+          </view>
+          <view class="path">
+            <text class="pageText">{{ getPath(item.url) }}</text>
+          </view>
+        </view>
+        <objectAnalysis
+          :data="getItem(item)"
+          :width="670"
+        />
+        <view class="msgBar">
+          <text
+            class="status"
+            :class="'s-' + item.type"
+          >
+            {{ getTypeName(item.type) }}
+          </text>
+          <text
+            class="time"
+            :style="{ color: getTimeColor }"
+          >
+            {{ item.useTime }}s
+          </text>
+          <text class="data">
+            {{ item.date }}
+          </text>
+          <text
+            v-if="item.type == 1"
+            class="size"
+            :style="{ color: getSizeColor }"
+          >
+            {{ getByteSize }}
+          </text>
+        </view>
+        <view class="actionBar">
+          <view
+            class="actionBtn"
+            @click.stop="$emit('goSendRequest', item)"
+          >
+            <text class="actionText">重发</text>
+          </view>
+          <view
+            class="actionBtn"
+            @click.stop="$emit('goOpenRequest', item)"
+          >
+            <text class="actionText">编辑</text>
+          </view>
+          <view
+            class="actionBtn"
+            @click.stop="copyItem"
+          >
+            <text class="actionText">复制</text>
+          </view>
+          <view
+            class="actionBtn more"
+            @click.stop="openMenu"
+          >
+            <text class="actionText">更多</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import objectAnalysis from "./objectAnalysis.vue";
+import devUi from "../../../core/libs/devUi.js";
+export default {
+  components: {
+    objectAnalysis,
+  },
+  props: {
+    /**
+     * console单行数据
+     */
+    item: {
+      type: Object,
+      default() {
+        return {
+          id: 0, //请求id
+          type: 0, // 0发起请求中  1请求成功  2请求失败
+          date: "", //请求日期
+          sendTime: 0, //发送请求的时间
+          responseTime: 0, //响应时间
+          useTime: 0, //请求总耗时
+
+          url: "", //请求地址
+          header: "", //请求头
+          method: "get", //请求方式
+          data: "", //请求参数
+
+          responseBody: "", //响应主体
+          responseHeader: "", //响应头
+          responseStatus: "", //响应编码
+          responseMsg: "", //响应报错信息
+          responseBodySize: 0, //请求主体大小
+        };
+      },
+    },
+  },
+  computed: {
+    /**
+     * 获取请求时间的颜色
+     */
+    getTimeColor() {
+      if (this.item.useTime == 0) {
+        return "#eeeeee";
+      } else if (this.item.useTime > 3) {
+        return "#fa3534";
+      } else if (this.item.useTime > 1) {
+        return "#ff9900";
+      } else {
+        return "#909399";
+      }
+    },
+    /**
+     * 获取字节大小,b转kb mb
+     */
+    getByteSize() {
+      let size = Number(this.item.responseBodySize);
+      if (null == size || size == "") return "0.00 KB";
+      var unitArr = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+      var index = 0;
+      var srcsize = parseFloat(size);
+      index = Math.floor(Math.log(srcsize) / Math.log(1024));
+      size = srcsize / Math.pow(1024, index);
+      size = size.toFixed(2); //保留的小数位数
+      if (Number(this.item.responseBodySize) < 1024) {
+        return (size / 1000).toFixed(2) + "KB";
+      }
+      return size + unitArr[index];
+    },
+    /**
+     * 获取响应大小的颜色
+     */
+    getSizeColor() {
+      let size = this.item.responseBodySize;
+      if (size == 0) {
+        return "#fa3534";
+      } else if (size > 256 * 1024) {
+        return "#ff9900";
+      } else if (size > 1024 * 1024) {
+        return "#fa3534";
+      } else {
+        return "#909399";
+      }
+    },
+  },
+  methods: {
+    /**
+     * 通过url获取路径
+     */
+    getPath(url) {
+      if (!url) return "无";
+      function getPathFromUrl(url) {
+        const pathStart = url.indexOf("//") + 2;
+        const pathEnd = url.indexOf("?", pathStart) >= 0 ? url.indexOf("?", pathStart) : url.length;
+        return url.substring(url.indexOf("/", pathStart), pathEnd);
+      }
+      return getPathFromUrl(url);
+    },
+    /**
+     * 获取请求类型名称
+     */
+    getTypeName(type) {
+      return ["请求中...", "请求完成", "请求失败"][Number(type)];
+    },
+    /**
+     * 精简item
+     */
+    getItem(item) {
+      return {
+        data: item.data,
+        responseMsg: item.responseMsg,
+        responseStatus: item.responseStatus,
+        method: item.method,
+        url: item.url,
+        header: item.header,
+        responseBody: item.responseBody,
+        responseHeader: item.responseHeader,
+        responseBodySize: this.getByteSize,
+      };
+    },
+    copyItem() {
+      this.copyToClipboard(JSON.stringify(this.item));
+    },
+    copyToClipboard(data) {
+      uni.setClipboardData({
+        data,
+        success: () => {
+          devUi.showToast({
+            title: "复制成功",
+            icon: "success",
+          });
+        },
+      });
+    },
+    /**
+     * 更多菜单
+     */
+    openMenu() {
+      let that = this;
+
+      let menu = [
+        {
+          text: `重发此请求`,
+          click() {
+            that.$emit("goSendRequest", that.item);
+          },
+        },
+        {
+          text: `复制请求日志信息`,
+          click() {
+            that.copyToClipboard(JSON.stringify(that.item));
+          },
+        },
+        {
+          text: `在请求构建工具中打开`,
+          click() {
+            that.$emit("goOpenRequest", that.item);
+          },
+        },
+        {
+          text: `删除此记录`,
+          click() {
+            uni.$emit("devTools_delNetworkItemById", that.item.id);
+            devUi.showToast({
+              title: "删除成功！",
+              icon: "success",
+            });
+          },
+        },
+      ];
+
+      devUi.showActionSheet({
+        itemList: menu.map((x) => x.text),
+        success({ tapIndex }) {
+          menu[tapIndex].click();
+        },
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.networkItem {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10rpx 20rpx;
+  .card {
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 16rpx;
+    padding: 14rpx 16rpx 12rpx;
+    border: 1px solid rgba(148, 163, 184, 0.22);
+    background: #fff;
+    box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.05);
+  }
+  &.type-0 .card {
+    border-color: rgba(245, 158, 11, 0.4);
+    background: #fffbf2;
+  }
+  &.type-2 .card {
+    border-color: rgba(239, 68, 68, 0.36);
+    background: #fff5f5;
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+    .head {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-bottom: 2rpx;
+      .method {
+        background-color: #eef2ff;
+        color: #333;
+        padding: 4rpx 10rpx;
+        border-radius: 999rpx;
+        &.type-get {
+          background-color: rgba(59, 130, 246, 0.14);
+        }
+        &.type-post {
+          background-color: rgba(16, 185, 129, 0.14);
+        }
+        .methodText {
+          color: #0f172a;
+          font-size: 20rpx;
+          line-height: 24rpx;
+          font-weight: 600;
+        }
+      }
+      .path {
+        flex: 1;
+        min-width: 0;
+        lines: 1;
+        margin-left: 10rpx;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        .pageText {
+          font-size: 22rpx;
+          color: #334155;
+        }
+      }
+    }
+    .context {
+      font-size: 20rpx;
+      color: #333;
+      line-height: 24rpx;
+    }
+    .msgBar {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 10rpx;
+      .data {
+        font-size: 20rpx;
+        color: #64748b;
+      }
+      .time {
+        font-size: 20rpx;
+        color: #334155;
+      }
+      .size {
+        font-size: 20rpx;
+      }
+      .status {
+        font-size: 20rpx;
+        line-height: 28rpx;
+        padding: 2rpx 10rpx;
+        border-radius: 999rpx;
+        background: #f1f5f9;
+        &.s-0 {
+          color: #a16207;
+          background: #fef3c7;
+        }
+        &.s-1 {
+          color: #065f46;
+          background: #d1fae5;
+        }
+        &.s-2 {
+          color: #b91c1c;
+          background: #fee2e2;
+        }
+      }
+    }
+    .actionBar {
+      margin-top: 4rpx;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      gap: 10rpx;
+      .actionBtn {
+        height: 42rpx;
+        border-radius: 999rpx;
+        border: 1px solid #bfdbfe;
+        background: #eff6ff;
+        padding: 0 14rpx;
+        display: flex;
+        align-items: center;
+        &:active {
+          background: #dbeafe;
+        }
+        &.more {
+          border-color: #cbd5e1;
+          background: #f8fafc;
+        }
+        .actionText {
+          font-size: 20rpx;
+          color: #1e3a8a;
+          line-height: 20rpx;
+        }
+      }
+    }
+  }
+}
+</style>