oxy-uni-ui 2.1.1 → 2.1.2

package/oxy-dev-tools/page/components/listItem/jsRunnerItem.vue

@@ -0,0 +1,236 @@
+<template>
+  <view class="jsRunnerItem">
+    <view class="card">
+      <view class="codeInput">
+        <view class="sectionTag input">输入</view>
+        <image src="../../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="../../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/oxy-dev-tools/page/components/listItem/logItem.vue

@@ -0,0 +1,185 @@
+<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>