oxy-uni-ui 2.1.1 → 2.1.2

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

@@ -0,0 +1,533 @@
+<template>
+  <view
+    class="fileItem"
+    @click="fileClick"
+  >
+    <view class="card">
+      <view class="icon">
+        <image
+          class="iconImg"
+          :src="icon"
+          mode="aspectFit"
+        />
+      </view>
+      <view class="fileInfo">
+        <text
+          class="fileName"
+          :style="{
+            color: item.type == 'back' ? '#64748b' : '#0f172a',
+          }"
+        >
+          {{ item.name }}
+        </text>
+        <view
+          v-if="item.type != 'back'"
+          class="fileMeta"
+        >
+          <text class="textItem">{{ item.date }}</text>
+          <text
+            v-if="item.type == 'file'"
+            class="textItem"
+          >
+            {{ item.sizeText }}
+          </text>
+        </view>
+        <view
+          v-if="item.type != 'back'"
+          class="actionBar"
+        >
+          <view
+            class="actionBtn"
+            @click.stop="quickCopyPath"
+          >
+            <text class="actionText">复制路径</text>
+          </view>
+          <view
+            class="actionBtn more"
+            @click.stop="openMenu"
+          >
+            <text class="actionText">更多</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import appDelDir from "../libs/appDelDir";
+import devUi from "../../../core/libs/devUi.js";
+import iconBack from "../../static/fold.png";
+import iconDir from "../../static/fileSys/wenjianjia.png";
+import iconUnknown from "../../static/fileSys/weizhiwenjian.png";
+import iconDwg from "../../static/fileSys/DWG.png";
+import iconExcel from "../../static/fileSys/excel.png";
+import iconExe from "../../static/fileSys/EXE.png";
+import iconGif from "../../static/fileSys/GIF.png";
+import iconHtml from "../../static/fileSys/HTML.png";
+import iconPdf from "../../static/fileSys/pdf.png";
+import iconPpt from "../../static/fileSys/pptl.png";
+import iconPsd from "../../static/fileSys/PSD.png";
+import iconRvt from "../../static/fileSys/RVT.png";
+import iconVideo from "../../static/fileSys/shipin.png";
+import iconSkp from "../../static/fileSys/SKP.png";
+import iconSvg from "../../static/fileSys/SVG.png";
+import iconImage from "../../static/fileSys/tupian.png";
+import iconTxt from "../../static/fileSys/txt.png";
+import iconWord from "../../static/fileSys/word.png";
+import iconZip from "../../static/fileSys/yasuo.png";
+import iconAudio from "../../static/fileSys/yinpin.png";
+
+const fileTypeIconMap = {
+  dwg: iconDwg,
+  xls: iconExcel,
+  xlsx: iconExcel,
+  csv: iconExcel,
+  exe: iconExe,
+  gif: iconGif,
+  html: iconHtml,
+  pdf: iconPdf,
+  ppt: iconPpt,
+  psd: iconPsd,
+  rvt: iconRvt,
+  skp: iconSkp,
+  svg: iconSvg,
+  png: iconImage,
+  jpeg: iconImage,
+  jpg: iconImage,
+  webp: iconImage,
+  bmp: iconImage,
+  txt: iconTxt,
+  sql: iconTxt,
+  js: iconTxt,
+  css: iconTxt,
+  log: iconTxt,
+  json: iconTxt,
+  word: iconWord,
+  zip: iconZip,
+  rar: iconZip,
+  gz: iconZip,
+  "7z": iconZip,
+  mp3: iconAudio,
+  wma: iconAudio,
+  wav: iconAudio,
+  aac: iconAudio,
+  flac: iconAudio,
+  mp4: iconVideo,
+  avi: iconVideo,
+  wmv: iconVideo,
+  mpg: iconVideo,
+  mpeg: iconVideo,
+  mov: iconVideo,
+  flv: iconVideo,
+  "3gp": iconVideo,
+  mp3gp: iconVideo,
+  mkv: iconVideo,
+  rmvb: iconVideo,
+};
+
+export default {
+  props: {
+    /**
+     * 当前文件路径类型
+     */
+    dirType: {
+      type: String,
+      default: "",
+    },
+    /**
+     * 文件路径列表
+     */
+    dirList: {
+      type: Array,
+      default: () => [],
+    },
+    /**
+     * 单个列表对象
+     */
+    item: {
+      type: Object,
+      default() {
+        return {
+          type: "", // 对象类型  dir back file
+          name: "",
+          fileType: "", // 文件后缀名称
+          size: "", // 文件大小
+          icon: "", //图标
+          time: "", // 最后更改日期
+          date: "",
+          fileCount: 0, //文件夹下的文件数量
+          directoryCount: 0, //文件夹下的目录数量
+        };
+      },
+    },
+  },
+  computed: {
+    icon() {
+      if (this.item.type == "back") return iconBack;
+      if (this.item.type == "dir") return iconDir;
+      // #ifdef APP-PLUS
+      // IOS端直接访问本地图片会报跨域，所以仅支持安卓预览图片
+      if (
+        uni.getSystemInfoSync().platform == "android" &&
+        this.item.type == "file" &&
+        ["jpg", "jpeg", "png", "gif", "webp", "bmp"].indexOf(this.item.fileType) > -1
+      ) {
+        let path = this.getPath();
+        return path;
+      }
+      // #endif
+      if (this.item.type == "file") {
+        const ext = String(this.item.fileType || "").toLowerCase();
+        return fileTypeIconMap[ext] || iconUnknown;
+      }
+      return iconUnknown;
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    /**
+     * 点击事件
+     */
+    fileClick() {
+      let that = this;
+      if (this.item.type == "dir") {
+        this.$emit("goChildDir", this.item.name);
+      } else if (this.item.type == "back") {
+        this.$emit("goChildDir", "__back__");
+      } else {
+        if (
+          //? 使用文本编辑器快捷打开文件
+          ["txt", "sql", "js", "css", "html", "log", "json"].indexOf(this.item.fileType) != -1
+        ) {
+          this.openInEdit();
+        } else if (["jpg", "jpeg", "png", "gif", "webp", "bmp"].indexOf(this.item.fileType) != -1) {
+          let path = that.getPath();
+          uni.previewImage({
+            urls: [path],
+          });
+        } else {
+          this.openMenu();
+        }
+      }
+    },
+    /**
+     * 使用文本编辑器打开
+     */
+    openInEdit() {
+      let that = this;
+      let path = that.getPath();
+      that.$emit("openEditFileDialog", {
+        title: that.item.name,
+        canSave: that.dirType != "PRIVATE_WWW",
+        path,
+        size: that.item.size,
+      });
+    },
+    /**
+     * 获取当前文件绝对路径
+     */
+    getPath() {
+      let that = this;
+      let path = "";
+      switch (that.dirType) {
+        case "wx":
+          path = wx.env.USER_DATA_PATH;
+          break;
+        case "PRIVATE_DOC":
+          path = "_doc";
+          break;
+        case "PRIVATE_WWW":
+          path = "_www";
+          break;
+        case "PUBLIC_DOCUMENTS":
+          path = "_documents";
+          break;
+        case "PUBLIC_DOWNLOADS":
+          path = "_downloads";
+          break;
+        default:
+          break;
+      }
+      that.dirList.map((x) => {
+        path += "/" + x;
+      });
+      path = path + "/" + that.item.name;
+      return path;
+    },
+    /**
+     * 更多菜单
+     */
+    openMenu() {
+      let that = this;
+      let path = that.getPath();
+
+      let menu = [
+        {
+          text: `复制绝对路径`,
+          click() {
+            // #ifdef APP-PLUS
+            path = plus.io.convertLocalFileSystemURL(path);
+            // #endif
+            that.copyToClipboard(path);
+          },
+        },
+        {
+          text: `删除`,
+          click() {
+            devUi.showModal({
+              title: "警告",
+              content: "是否确认删除" + (that.item.type == "dir" ? "文件夹:" : "文件:") + that.item.name + "?",
+              success(res) {
+                if (res.confirm) {
+                  devUi.showLoading({
+                    title: "删除中",
+                  });
+
+                  function delSuccess() {
+                    devUi.hideLoading();
+                    devUi.showToast({
+                      title: "删除成功！",
+                      icon: "success",
+                    });
+                    that.$emit("getPage");
+                  }
+                  function delError() {
+                    devUi.hideLoading();
+                    devUi.showToast({
+                      title: "删除失败",
+                      icon: "none",
+                    });
+                  }
+
+                  // #ifdef MP-WEIXIN
+                  if (1) {
+                    let fs = wx.getFileSystemManager();
+
+                    if (that.item.type == "file") {
+                      // ! 删除文件
+                      fs.unlink({
+                        filePath: path,
+                        success: delSuccess,
+                        fail: delError,
+                      });
+                    } else {
+                      // ! 删除文件夹
+                      fs.rmdir({
+                        dirPath: path,
+                        recursive: true,
+                        success: delSuccess,
+                        fail: delError,
+                      });
+                    }
+
+                    return;
+                  }
+                  // #endif
+
+                  if (that.item.type == "file") {
+                    // ! 删除文件
+                    plus.io.resolveLocalFileSystemURL(
+                      path,
+                      (entry) => {
+                        // 可通过entry对象操作test.html文件
+                        entry.remove(delSuccess, delError);
+                      },
+                      delError
+                    );
+                  } else {
+                    // ! 删除文件夹
+                    appDelDir(path + "/")
+                      .then(delSuccess)
+                      .catch(delError);
+                  }
+                }
+              },
+            });
+          },
+        },
+      ];
+
+      let isMp = false;
+      // #ifdef MP-WEIXIN
+      isMp = true;
+      // #endif
+
+      if (!isMp || that.item.type != "dir") {
+        menu.push({
+          text: "重命名",
+          click() {
+            that.$emit("editDirName", {
+              isDir: that.item.type == "dir",
+              isEdit: true,
+              name: that.item.name,
+            });
+          },
+        });
+      }
+
+      // #ifdef APP-PLUS
+      if (that.item.type == "file") {
+        menu.push({
+          text: "调用外部程序打开此文件",
+          click() {
+            plus.runtime.openFile(path, null, (e) => {
+              devUi.showToast({
+                title: "文档打开失败！" + e.message,
+                icon: "none",
+              });
+            });
+          },
+        });
+      }
+      // #endif
+
+      // #ifdef MP-WEIXIN
+      if (["doc", "xls", "ppt", "pdf", "docx", "xlsx", "pptx"].indexOf(that.item.fileType) != -1) {
+        menu.unshift({
+          text: "打开该文档",
+          click() {
+            let path = that.getPath();
+            uni.openDocument({
+              filePath: path,
+              fail() {
+                devUi.showToast({
+                  title: "文档打开失败！",
+                  icon: "none",
+                });
+              },
+            });
+          },
+        });
+      }
+      // #endif
+
+      if (that.item.type == "file") {
+        menu.unshift({
+          text: `用文本编辑器打开`,
+          click() {
+            that.openInEdit();
+          },
+        });
+      }
+
+      devUi.showActionSheet({
+        itemList: menu.map((x) => x.text),
+        success({ tapIndex }) {
+          menu[tapIndex].click();
+        },
+      });
+    },
+    quickCopyPath() {
+      let path = this.getPath();
+      // #ifdef APP-PLUS
+      path = plus.io.convertLocalFileSystemURL(path);
+      // #endif
+      this.copyToClipboard(path);
+    },
+    copyToClipboard(data) {
+      uni.setClipboardData({
+        data,
+        success: () => {
+          devUi.showToast({
+            title: "复制成功",
+            icon: "success",
+          });
+        },
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.fileItem {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10rpx 20rpx;
+  /* #ifndef APP-PLUS */
+  min-height: 96rpx;
+  /* #endif */
+  .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);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .icon {
+    width: 56rpx;
+    height: 56rpx;
+    border-radius: 12rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(59, 130, 246, 0.08);
+    .iconImg {
+      width: 42rpx;
+      height: 42rpx;
+    }
+  }
+  .fileInfo {
+    margin-left: 14rpx;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    .fileName {
+      width: 100%;
+      lines: 1;
+      overflow: hidden;
+      font-size: 24rpx;
+      color: #0f172a;
+      line-height: 32rpx;
+    }
+    .fileMeta {
+      margin-top: 4rpx;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      width: 100%;
+      .textItem {
+        margin-right: 16rpx;
+        font-size: 20rpx;
+        line-height: 28rpx;
+        color: #64748b;
+      }
+    }
+    .actionBar {
+      margin-top: 8rpx;
+      display: flex;
+      flex-direction: row;
+      .actionBtn {
+        margin-right: 10rpx;
+        height: 40rpx;
+        border-radius: 999rpx;
+        border: 1px solid #bfdbfe;
+        background: #eff6ff;
+        padding: 0 12rpx;
+        display: flex;
+        align-items: center;
+        &:active {
+          background: #dbeafe;
+        }
+        &.more {
+          border-color: #cbd5e1;
+          background: #f8fafc;
+        }
+        .actionText {
+          font-size: 20rpx;
+          color: #1e3a8a;
+          line-height: 20rpx;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,100 @@
+<template>
+  <view class="storageList">
+    <objectAnalysis
+      v-if="isLoaded"
+      :data="data"
+      :isOpenFirst="true"
+      :width="710"
+    />
+    <view
+      v-else
+      class="dataLoading"
+    >
+      <text class="status">加载中</text>
+    </view>
+  </view>
+</template>
+<script>
+import objectAnalysis from "./objectAnalysis.vue";
+import getRuntimeInfo from "../libs/getRuntimeInfo";
+export default {
+  components: {
+    objectAnalysis,
+  },
+  data() {
+    return {
+      /**
+       * 是否完成加载
+       */
+      isLoaded: false,
+      /**
+       * 缓存里的数据
+       */
+      data: {},
+      loadToken: 0,
+      loadingTimer: 0,
+    };
+  },
+  beforeUnmount() {
+    this.clearLoadingTimer();
+  },
+  beforeDestroy() {
+    this.clearLoadingTimer();
+  },
+  methods: {
+    clearLoadingTimer() {
+      if (this.loadingTimer) {
+        clearTimeout(this.loadingTimer);
+        this.loadingTimer = 0;
+      }
+    },
+    /**
+     * 加载数据
+     */
+    async getData() {
+      let that = this;
+      const loadToken = ++that.loadToken;
+      that.isLoaded = false;
+      that.clearLoadingTimer();
+      let data = await getRuntimeInfo();
+      return new Promise((resolve) => {
+        that.loadingTimer = setTimeout(() => {
+          that.loadingTimer = 0;
+          if (loadToken != that.loadToken) {
+            resolve(false);
+            return;
+          }
+          that.data = data;
+          that.isLoaded = true;
+          resolve(true);
+        }, 80);
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.storageList {
+  padding: 16rpx 20rpx;
+  width: 100%;
+  box-sizing: border-box;
+}
+.dataLoading {
+  width: 100%;
+  box-sizing: border-box;
+  height: 220rpx;
+  margin: 10rpx 0;
+  border-radius: 16rpx;
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  background: #f8fafc;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  .status {
+    font-size: 24rpx;
+    color: #64748b;
+    line-height: 34rpx;
+  }
+}
+</style>