oxy-uni-ui 2.1.1 → 2.1.2

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

@@ -0,0 +1,255 @@
+<template>
+  <view class="jsRunnerItem">
+    <view class="card">
+      <view class="codeInput">
+        <view class="sectionTag input">输入</view>
+        <image
+          src="@/devTools/page/static/fold.png"
+          class="fold-left"
+        />
+        <view class="codeView">
+          <text class="codeText">{{ item.code }}</text>
+        </view>
+      </view>
+
+      <view class="codeResult">
+        <view class="sectionTag output">输出</view>
+        <image
+          src="@/devTools/page/static/fold.png"
+          class="fold-right"
+        />
+        <view class="codeResultView">
+          <template v-if="item.isEnd">
+            <template v-if="isObj(item.result)">
+              <objectAnalysis
+                :data="item.result"
+                :showObjProto="true"
+                :width="610"
+              />
+            </template>
+            <template v-else>
+              <view>
+                <text
+                  class="context"
+                  :class="[getTypeClass(item.result)]"
+                  selectable
+                >
+                  {{ getText(item.result) }}
+                </text>
+              </view>
+            </template>
+          </template>
+          <text
+            v-else
+            class="loadingOutput"
+          >
+            运行中...
+          </text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import objectAnalysis from "./objectAnalysis.vue";
+export default {
+  components: {
+    objectAnalysis,
+  },
+  props: {
+    /**
+     * 单行数据
+     */
+    item: {
+      type: Object,
+      default() {
+        return {
+          id: "",
+          code: "",
+          result: "",
+          isEnd: false,
+        };
+      },
+    },
+  },
+  methods: {
+    /**
+     * 是否为对象类型
+     */
+    isObj(data) {
+      return typeof data == "object" && data != null && data != undefined;
+    },
+    /**
+     * 获取对应的类型样式
+     */
+    getTypeClass(obj) {
+      try {
+        let type = typeof obj;
+
+        if (type == "string") {
+          if (obj.indexOf("at ") == 0) {
+            return "t-line";
+          } else if (obj === undefined || obj == "undefined") {
+            return "t-undefined";
+          } else if (obj === null || obj == "null") {
+            return "t-null";
+          } else if (obj == "true" || obj == "false") {
+            return "t-boolean";
+          } else if (Number.isFinite(Number(obj))) {
+            return "t-number";
+          }
+        } else if (type == "function") {
+          return "t-function";
+        }
+        return "t-" + type;
+      } catch (error) {}
+      return "t-string";
+    },
+    /**
+     * 获取数据文字
+     */
+    getText(data) {
+      if (data === null) {
+        return "null";
+      }
+      switch (typeof data) {
+        case "string":
+          // return data.replace(/\n/g, "");
+          return data;
+        case "boolean":
+          return data ? "true" : "false";
+        case "undefined":
+          return "undefined";
+        case "function":
+          return data.toString();
+        case "symbol":
+          return "js:symbol";
+        default:
+          return data;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.jsRunnerItem {
+  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.2);
+    background: #fff;
+    box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.05);
+  }
+
+  .codeInput {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    margin-bottom: 12rpx;
+    .sectionTag {
+      height: 32rpx;
+      min-width: 50rpx;
+      padding: 0 8rpx;
+      border-radius: 999rpx;
+      font-size: 18rpx;
+      line-height: 32rpx;
+      text-align: center;
+      color: #1d4ed8;
+      background: #dbeafe;
+      margin-right: 8rpx;
+      &.output {
+        color: #0f766e;
+        background: #ccfbf1;
+      }
+    }
+    .codeView {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      .codeText {
+        font-size: 23rpx;
+        color: #334155;
+        line-height: 34rpx;
+        word-break: break-all;
+      }
+    }
+  }
+  .codeResult {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    border-top: 1px solid rgba(148, 163, 184, 0.16);
+    padding-top: 12rpx;
+    .sectionTag {
+      height: 32rpx;
+      min-width: 50rpx;
+      padding: 0 8rpx;
+      border-radius: 999rpx;
+      font-size: 18rpx;
+      line-height: 32rpx;
+      text-align: center;
+      color: #0f766e;
+      background: #ccfbf1;
+      margin-right: 8rpx;
+    }
+    .codeResultView {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      .loadingOutput {
+        font-size: 22rpx;
+        color: #94a3b8;
+        line-height: 32rpx;
+      }
+      .context {
+        font-size: 23rpx;
+        color: rgb(227, 54, 46);
+        line-height: 34rpx;
+        word-break: break-all;
+        &.t-number {
+          color: rgb(8, 66, 160);
+        }
+        &.t-boolean {
+          color: rgb(133, 2, 255);
+        }
+        &.t-string {
+          color: rgb(227, 54, 46);
+        }
+        &.t-undefined {
+          color: rgba(0, 0, 0, 0.2);
+        }
+        &.t-null {
+          color: rgba(0, 0, 0, 0.2);
+        }
+        &.t-line {
+          color: rgba(0, 0, 0, 0.5);
+        }
+        &.t-function {
+          color: rgb(121, 38, 117);
+        }
+      }
+    }
+  }
+}
+.fold-left {
+  transform: rotate(90deg);
+  width: 24rpx;
+  height: 24rpx;
+  margin-right: 10rpx;
+  margin-top: 4rpx;
+}
+.fold-right {
+  transform: rotate(-90deg);
+  width: 24rpx;
+  height: 24rpx;
+  margin-right: 10rpx;
+  margin-top: 4rpx;
+}
+</style>

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

@@ -0,0 +1,193 @@
+<template>
+  <view class="logItem">
+    <view class="card">
+      <view class="content">
+        <view>
+          <text class="text-xs">{{ item.m }}</text>
+        </view>
+        <view class="msgBar">
+          <text class="typeTag">log</text>
+          <text class="time">{{ item.date }}</text>
+        </view>
+        <view class="actionBar">
+          <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 devCache from "../../../core/libs/devCache";
+import devUi from "../../../core/libs/devUi.js";
+export default {
+  props: {
+    /**
+     * logs单行数据
+     */
+    item: {
+      type: Object,
+      default() {
+        return {
+          date: "",
+          m: "", //日志内容
+        };
+      },
+    },
+  },
+  methods: {
+    /**
+     * 复制
+     */
+    copyItem() {
+      this.copyToClipboard(this.item.m);
+    },
+    copyToClipboard(data) {
+      uni.setClipboardData({
+        data,
+        success: () => {
+          devUi.showToast({
+            title: "复制成功",
+            icon: "success",
+          });
+        },
+      });
+    },
+    /**
+     * 更多菜单
+     */
+    openMenu() {
+      let that = this;
+
+      let menu = [
+        {
+          text: `复制日志信息`,
+          click() {
+            that.copyToClipboard(JSON.stringify(that.item));
+          },
+        },
+        {
+          text: `删除此记录`,
+          click() {
+            uni.$emit("devTools_delLog", that.item);
+            let logs = devCache.get("logReport");
+            if (!logs) logs = [];
+            let i = logs.findIndex(
+              (x) => x.m == that.item.m && x.t == that.item.t
+            );
+            if (i != -1) {
+              logs.splice(i, 1);
+              devCache.set("logReport", logs);
+            }
+            devUi.showToast({
+              title: "删除成功！",
+              icon: "success",
+            });
+          },
+        },
+      ];
+
+      devUi.showActionSheet({
+        itemList: menu.map((x) => x.text),
+        success({ tapIndex }) {
+          menu[tapIndex].click();
+        },
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.logItem {
+  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.2);
+    background: #fff;
+    box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.05);
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+    .context {
+      font-size: 20rpx;
+      color: #333;
+      line-height: 24rpx;
+    }
+    .msgBar {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 10rpx;
+      .typeTag {
+        font-size: 20rpx;
+        line-height: 28rpx;
+        padding: 2rpx 10rpx;
+        border-radius: 999rpx;
+        color: #1e3a8a;
+        background: #dbeafe;
+      }
+      .time {
+        font-size: 20rpx;
+        color: #64748b;
+      }
+      .page {
+        font-size: 16rpx;
+        color: #888;
+        margin-left: 20rpx;
+      }
+    }
+    .actionBar {
+      margin-top: 4rpx;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      gap: 12rpx;
+      .actionBtn {
+        height: 42rpx;
+        border-radius: 999rpx;
+        border: 1px solid #bfdbfe;
+        background: #eff6ff;
+        padding: 0 14rpx;
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        &:active {
+          background: #dbeafe;
+        }
+        &.more {
+          border-color: #cbd5e1;
+          background: #f8fafc;
+        }
+        .actionText {
+          font-size: 20rpx;
+          line-height: 20rpx;
+          color: #1e3a8a;
+        }
+      }
+    }
+  }
+}
+.text-xs {
+  font-size: 23rpx;
+  line-height: 32rpx;
+  color: #1f2937;
+  word-break: break-all;
+}
+</style>