oxy-uni-ui 2.1.1 → 2.1.2

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

@@ -0,0 +1,511 @@
+<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/oxy-dev-tools/page/components/listItem/infoList.vue

@@ -0,0 +1,89 @@
+<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()
+  },
+  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>