oxy-uni-ui 2.1.1 → 2.1.2

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

@@ -0,0 +1,292 @@
+<template>
+  <view
+    class="errorItem"
+    :class="['type-' + item.type]"
+  >
+    <view class="card">
+      <view class="content">
+        <view
+          v-for="(row, index) in [item.m, item.tr]"
+          :key="index"
+          class="rowWrap"
+        >
+          <template v-if="isObj(row)">
+            <objectAnalysis
+              :data="row"
+              :width="670"
+            />
+          </template>
+          <template v-else>
+            <view>
+              <text class="context">{{ getText(row) }}</text>
+            </view>
+          </template>
+        </view>
+
+        <view class="msgBar">
+          <text
+            class="logType"
+            :class="['type-' + item.type]"
+          >
+            {{ getType(item.type) }}
+          </text>
+          <text class="time">{{ item.date }}</text>
+          <text class="page">{{ item.p }}</text>
+        </view>
+
+        <view class="actionBar">
+          <view
+            class="actionBtn"
+            @click.stop="copyList"
+          >
+            <text class="actionText">复制</text>
+          </view>
+          <view
+            class="actionBtn more"
+            @click.stop="openMenu"
+          >
+            <text class="actionText">更多</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import devCache from "../../../core/libs/devCache";
+import objectAnalysis from "./objectAnalysis.vue";
+import devUi from "../../../core/libs/devUi.js";
+export default {
+  components: {
+    objectAnalysis,
+  },
+  props: {
+    /**
+     * console单行数据
+     */
+    item: {
+      type: Object,
+      default() {
+        return {
+          m: "",
+          tr: "",
+          date: "", // 打印的日期
+          p: "", // 打印的页面
+          type: "", // 打印类型
+        };
+      },
+    },
+  },
+  methods: {
+    /**
+     * 是否为对象类型
+     */
+    isObj(data) {
+      return typeof data == "object";
+    },
+    /**
+     * 获取数据文字
+     */
+    getText(data) {
+      switch (typeof data) {
+        case "string":
+          return data;
+        case "boolean":
+          return data ? "true" : "false";
+        case "undefined":
+          return "undefined";
+        case "function":
+          return "js:function";
+        case "symbol":
+          return "js:symbol";
+        default:
+          return data;
+      }
+    },
+    /**
+     * 复制列表
+     */
+    copyList() {
+      let that = this;
+      that.copyToClipboard(JSON.stringify([that.item.m, that.item.tr]));
+    },
+    copyToClipboard(data) {
+      uni.setClipboardData({
+        data,
+        success: () => {
+          devUi.showToast({
+            title: "复制成功",
+            icon: "success",
+          });
+        },
+      });
+    },
+    /**
+     * 获取类型
+     */
+    getType(type) {
+      let t = {
+        ve: "vue error",
+        vw: "vue warn",
+        oe: "App.vue onError",
+        n: "unknown",
+      };
+      return t[type];
+    },
+    /**
+     * 更多菜单
+     */
+    openMenu() {
+      let that = this;
+
+      let menu = [
+        {
+          text: `复制日志信息`,
+          click() {
+            that.copyToClipboard(JSON.stringify(that.item));
+          },
+        },
+        {
+          text: `删除此记录`,
+          click() {
+            uni.$emit("devTools_delError", that.item);
+            let logs = devCache.get("errorReport");
+            if (!logs) logs = [];
+            let i = logs.findIndex(
+              (x) =>
+                x.type == that.item.type &&
+                x.t == that.item.t &&
+                x.m == that.item.m &&
+                x.tr == that.item.tr &&
+                x.p == that.item.p
+            );
+            if (i != -1) {
+              logs.splice(i, 1);
+              devCache.set("errorReport", logs);
+            }
+            devUi.showToast({
+              title: "删除成功！",
+              icon: "success",
+            });
+          },
+        },
+      ];
+
+      devUi.showActionSheet({
+        itemList: menu.map((x) => x.text),
+        success({ tapIndex }) {
+          menu[tapIndex].click();
+        },
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.errorItem {
+  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(239, 68, 68, 0.32);
+    background: #fff6f6;
+    box-shadow: 0 4rpx 16rpx rgba(185, 28, 28, 0.08);
+  }
+  &.type-vw .card {
+    border-color: rgba(245, 158, 11, 0.4);
+    background: #fffaf0;
+  }
+  &.type-n .card {
+    border-color: rgba(148, 163, 184, 0.3);
+    background: #f8fafc;
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+    .rowWrap {
+      width: 100%;
+    }
+    .context {
+      font-size: 23rpx;
+      color: #7f1d1d;
+      line-height: 32rpx;
+      word-break: break-all;
+    }
+    .msgBar {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 10rpx;
+      .time {
+        font-size: 20rpx;
+        color: #64748b;
+      }
+      .page {
+        font-size: 20rpx;
+        color: #64748b;
+        max-width: 420rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .logType {
+        font-size: 20rpx;
+        line-height: 28rpx;
+        padding: 2rpx 10rpx;
+        border-radius: 999rpx;
+      }
+      .type-ve {
+        color: #fff;
+        background-color: #fd0add;
+      }
+      .type-n {
+        color: #fff;
+        background-color: #82848a;
+      }
+      .type-vw {
+        color: #fff;
+        background-color: #ff9900;
+      }
+      .type-oe {
+        color: #fff;
+        background-color: #ff0000;
+      }
+    }
+    .actionBar {
+      margin-top: 4rpx;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      gap: 12rpx;
+      .actionBtn {
+        height: 42rpx;
+        border-radius: 999rpx;
+        border: 1px solid #fecaca;
+        background: #fee2e2;
+        padding: 0 14rpx;
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        &:active {
+          background: #fecaca;
+        }
+        &.more {
+          border-color: #cbd5e1;
+          background: #f8fafc;
+        }
+        .actionText {
+          font-size: 20rpx;
+          line-height: 20rpx;
+          color: #b91c1c;
+        }
+      }
+    }
+  }
+}
+</style>