oxy-uni-ui 2.1.1 → 2.1.2

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

@@ -0,0 +1,319 @@
+<template>
+  <view
+    v-if="isShow"
+    class="pagesList"
+  >
+    <!-- <objectAnalysis
+      v-if="isLoaded"
+      :data="pages"
+      :isOpenFirst="true"
+      :width="710"
+    /> -->
+    <template v-if="isLoaded">
+      <view
+        v-for="(item, index) in pages"
+        :key="index"
+        class="pageItem"
+      >
+        <view class="card">
+          <text
+            v-if="pages.length === index + 1"
+            class="t-red"
+          >
+            当前页面
+          </text>
+          <view class="routeInfo">
+            <text class="path">{{ item.route }}</text>
+            <text class="options">{{ item.options || "无参数" }}</text>
+          </view>
+          <view class="actionBar">
+            <view
+              class="actionBtn"
+              @click.stop="copyRoute(item)"
+            >
+              <text class="actionText">复制路径</text>
+            </view>
+            <view
+              class="actionBtn"
+              @click.stop="copyRouteWithOptions(item)"
+            >
+              <text class="actionText">复制完整</text>
+            </view>
+            <view
+              class="actionBtn more"
+              @click.stop="openMenu(item)"
+            >
+              <text class="actionText">更多</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </template>
+    <view
+      v-else
+      class="dataLoading"
+    >
+      <text class="status">加载中</text>
+    </view>
+  </view>
+</template>
+
+<script>
+import devUi from '../../../core/libs/devUi.js'
+
+export default {
+  props: {
+    /**
+     * 是否渲染
+     */
+    isShow: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      /**
+       * 是否完成加载
+       */
+      isLoaded: false,
+      /**
+       * 页面路由数据
+       */
+      pages: [],
+    }
+  },
+  watch: {
+    isShow(val) {
+      if (val) {
+        this.getData()
+      }
+    },
+  },
+  mounted() {
+    if (this.isShow) {
+      this.getData()
+    }
+  },
+  methods: {
+    /**
+     * 加载数据
+     */
+    getData() {
+      this.isLoaded = false
+
+      try {
+        const currentPages = typeof getCurrentPages === 'function' ? getCurrentPages() : []
+        const pageList = currentPages
+          .map((x) => {
+            const route = this.resolvePageRoute(x)
+            const optionsObj = this.resolvePageOptions(x)
+            let options = ''
+            if (optionsObj && typeof optionsObj === 'object') {
+              Object.keys(optionsObj).forEach((key) => {
+                options = `${options + (options === '' ? '' : '&') + key}=${optionsObj[key]}`
+              })
+            }
+            return {
+              route,
+              options,
+            }
+          })
+          .filter(x => !!x.route)
+
+        this.pages = pageList
+      }
+      catch (error) {
+        this.pages = []
+      }
+
+      this.isLoaded = true
+    },
+    /**
+     * 解析页面路由（兼容不同平台页面实例结构）
+     */
+    resolvePageRoute(page) {
+      try {
+        if (!page)
+          return ''
+        if (page.route)
+          return String(page.route)
+        if (page.$page && page.$page.route)
+          return String(page.$page.route)
+        if (page.$page && page.$page.fullPath)
+          return String(page.$page.fullPath).replace(/^\//, '')
+      }
+      catch (error) {}
+      return ''
+    },
+    /**
+     * 解析页面参数（兼容不同平台页面实例结构）
+     */
+    resolvePageOptions(page) {
+      try {
+        if (!page)
+          return {}
+        if (page.options && typeof page.options === 'object')
+          return page.options
+        if (page.$page && page.$page.options && typeof page.$page.options === 'object')
+          return page.$page.options
+      }
+      catch (error) {}
+      return {}
+    },
+    /**
+     * 更多菜单
+     */
+    openMenu(item) {
+      const that = this
+      const menu = [
+        {
+          text: `复制路径`,
+          click() {
+            that.copyToClipboard(item.route)
+          },
+        },
+        ...(item.options
+          ? [
+              {
+                text: `复制参数`,
+                click() {
+                  that.copyToClipboard(item.options)
+                },
+              },
+              {
+                text: `复制路径+参数`,
+                click() {
+                  that.copyToClipboard(item.route + (item.options ? `?${item.options}` : ''))
+                },
+              },
+            ]
+          : []),
+      ]
+
+      devUi.showActionSheet({
+        itemList: menu.map(x => x.text),
+        success({ tapIndex }) {
+          menu[tapIndex].click()
+        },
+      })
+    },
+    copyRoute(item) {
+      this.copyToClipboard(item.route)
+    },
+    copyRouteWithOptions(item) {
+      this.copyToClipboard(item.route + (item.options ? `?${item.options}` : ''))
+    },
+    copyToClipboard(data) {
+      uni.setClipboardData({
+        data,
+        success: () => {
+          devUi.showToast({
+            icon: 'success',
+            title: '复制成功',
+          })
+        },
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.pagesList {
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  .pageItem {
+    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);
+    }
+    .t-red {
+      display: inline-flex;
+      width: fit-content;
+      font-size: 18rpx;
+      color: #fff;
+      padding: 2rpx 10rpx;
+      background-color: #3b82f6;
+      border-radius: 999rpx;
+      margin-bottom: 8rpx;
+      line-height: 24rpx;
+    }
+    .routeInfo {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      .path {
+        font-size: 24rpx;
+        line-height: 32rpx;
+        color: #0f172a;
+        width: 100%;
+        /* #ifndef APP-PLUS */
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        white-space: normal;
+        /* #endif */
+      }
+      .options {
+        margin-top: 6rpx;
+        font-size: 20rpx;
+        line-height: 28rpx;
+        color: #64748b;
+        width: 100%;
+        /* #ifndef APP-PLUS */
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        white-space: normal;
+        /* #endif */
+      }
+    }
+    .actionBar {
+      margin-top: 10rpx;
+      display: flex;
+      justify-content: flex-end;
+      gap: 10rpx;
+      .actionBtn {
+        height: 40rpx;
+        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;
+      }
+    }
+  }
+}
+.dataLoading {
+  width: 100%;
+  height: 100rpx;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  .status {
+    font-size: 20rpx;
+    color: #888;
+    line-height: 20rpx;
+  }
+}
+</style>

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

@@ -0,0 +1,153 @@
+<template>
+  <view
+    class="routeItem"
+    @click.stop="showMenu"
+  >
+    <view class="card">
+      <text class="label">路由路径</text>
+      <text class="routeText">{{ item.path }}</text>
+      <view class="actionBar">
+        <view
+          class="actionBtn"
+          @click.stop="copyPath"
+        >
+          <text class="actionText">复制路径</text>
+        </view>
+        <view
+          v-if="!isTabBar"
+          class="actionBtn"
+          @click.stop="goRoute"
+        >
+          <text class="actionText">跳转页面</text>
+        </view>
+        <view
+          class="actionBtn more"
+          @click.stop="showMenu"
+        >
+          <text class="actionText">更多</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import devUi from "../../../core/libs/devUi.js";
+
+export default {
+  props: {
+    item: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    isTabBar() {
+      return !!(this.item.meta && this.item.meta.isTabBar);
+    },
+  },
+  methods: {
+    /**
+     * 展示菜单
+     */
+    showMenu() {
+      let that = this;
+
+      let menuList = [];
+
+      let p = that.item.path.substr(0, 20);
+      if (p.length == 20) {
+        p = p + "...";
+      }
+      menuList.push(`复制路径(${p})`);
+
+      if (!that.isTabBar) {
+        menuList.push("跳转至此页面");
+      }
+
+      devUi.showActionSheet({
+        itemList: menuList,
+        success({ tapIndex }) {
+          if (tapIndex == 0) {
+            that.copyToClipboard(that.item.path);
+          } else {
+            uni.$emit("devTools_showRouteDialog", that.item.path);
+          }
+        },
+      });
+    },
+    copyPath() {
+      this.copyToClipboard(this.item.path);
+    },
+    copyToClipboard(data) {
+      uni.setClipboardData({
+        data,
+        success: () => {
+          devUi.showToast({
+            title: "复制成功",
+            icon: "success",
+          });
+        },
+      });
+    },
+    goRoute() {
+      uni.$emit("devTools_showRouteDialog", this.item.path);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.routeItem {
+  padding: 10rpx 20rpx;
+  display: flex;
+  flex-direction: column;
+  .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);
+  }
+  .label {
+    display: block;
+    font-size: 18rpx;
+    color: #64748b;
+    line-height: 24rpx;
+    margin-bottom: 4rpx;
+  }
+  .routeText {
+    width: 100%;
+    font-size: 22rpx;
+    line-height: 30rpx;
+    color: #1f2937;
+    word-break: break-all;
+  }
+  .actionBar {
+    margin-top: 10rpx;
+    display: flex;
+    justify-content: flex-end;
+    gap: 10rpx;
+    .actionBtn {
+      height: 40rpx;
+      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;
+      }
+    }
+  }
+}
+</style>