oxy-uni-ui 2.1.0 → 2.1.2

package/devTools/page/components/dialog/addStorage.vue

@@ -0,0 +1,204 @@
+<template>
+  <view>
+    <view
+      class="editMask"
+      v-if="isShow"
+      :style="{
+        height: height + 'px',
+      }"
+      @click.stop
+    >
+      <view
+        class="editDialog"
+        @click.stop
+      >
+        <text class="title">新增缓存</text>
+        <input
+          type="text"
+          placeholder="请输入Key"
+          class="input"
+          v-model="key"
+        />
+        <input
+          type="text"
+          placeholder="请输入Value"
+          class="input"
+          v-model="value"
+        />
+        <view class="btnGroup">
+          <view
+            class="btnItem left"
+            @click="hide"
+          >
+            <text class="btnText">取消</text>
+          </view>
+          <view
+            class="btnItem right"
+            @click="save"
+          >
+            <text class="btnText">提交</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import devUi from "../../../core/libs/devUi.js";
+let success, error;
+export default {
+  props: {
+    /**
+     * 默认缓存类型
+     */
+    storageType: {
+      type: String,
+      default: "localStorage",
+    },
+  },
+  data() {
+    return {
+      /**
+       * 是否展示
+       */
+      isShow: false,
+      /**
+       * 键名称
+       */
+      key: "",
+      /**
+       * 值
+       */
+      value: "",
+      /**
+       * 屏幕高度
+       */
+      height: uni.getSystemInfoSync().windowHeight,
+    };
+  },
+  mounted() {
+    let that = this;
+    /**
+     * 挂载弹窗打开事件
+     */
+    uni.$on("devTools_showAddStorageDialog", () => {
+      that.key = "";
+      that.value = "";
+      that.isShow = true;
+    });
+  },
+  unmounted() {
+    uni.$off("devTools_showAddStorageDialog");
+  },
+  methods: {
+    /**
+     * 关闭弹窗
+     */
+    hide() {
+      this.isShow = false;
+    },
+    /**
+     * 保存
+     */
+    save() {
+      let that = this;
+      if (that.key == "") {
+        return devUi.showToast({
+          title: "请输入key",
+          icon: "none",
+        });
+      }
+      if (that.storageType == "localStorage") {
+        uni.setStorageSync(that.key, that.value);
+      } else if (that.storageType == "sessionStorage") {
+        sessionStorage.setItem(that.key, that.value);
+      } else if (that.storageType == "cookie") {
+        let key = encodeURIComponent(that.key);
+        let val = encodeURIComponent(that.value);
+        let cookie =
+          `${key}=${val}; path=/; expires=` + new Date(new Date().getTime() + 86400 * 1000 * 365).toGMTString();
+        document.cookie = cookie;
+      }
+      devUi.showToast({
+        title: "添加成功！",
+        icon: "success",
+      });
+      that.hide();
+      setTimeout(() => {
+        that.$emit("getPage");
+      }, 300);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.editMask {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.3);
+  width: 750rpx;
+  flex: 1;
+  /* #ifndef APP-PLUS */
+  height: 100vh;
+  backdrop-filter: blur(1px);
+  /* #endif */
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 999;
+  .editDialog {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 690rpx;
+    background-color: #fff;
+    border-radius: 20rpx;
+    padding: 20rpx;
+    margin-bottom: 300rpx;
+    .title {
+      font-size: 28rpx;
+      color: #333;
+      height: 50rpx;
+      line-height: 50rpx;
+    }
+    .input {
+      margin-top: 20rpx;
+      margin-bottom: 20rpx;
+      width: 640rpx;
+      height: 70rpx;
+      padding: 5rpx;
+      border-radius: 8rpx;
+      border: 1px solid rgba(0, 0, 0, 0.05);
+    }
+    .btnGroup {
+      display: flex;
+      flex-direction: row;
+      width: 640rpx;
+      justify-content: space-between;
+      .btnItem {
+        height: 64rpx;
+        border-radius: 10rpx;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        .btnText {
+          font-size: 24rpx;
+          color: #fff;
+        }
+        &.left {
+          width: 160rpx;
+          background-color: #8799a3;
+        }
+        &.right {
+          width: 450rpx;
+          background-color: #3cbb45;
+        }
+      }
+    }
+  }
+}
+</style>

package/devTools/page/components/dialog/createDir.vue

@@ -0,0 +1,366 @@
+<template>
+  <view>
+    <view
+      class="editMask"
+      v-if="isShow"
+      :style="{
+        height: height + 'px',
+      }"
+      @click.stop
+    >
+      <view
+        class="editDialog"
+        @click.stop
+      >
+        <text class="title">{{ title }}</text>
+        <input
+          type="text"
+          placeholder="请输入"
+          class="input"
+          v-model="value"
+        />
+        <view class="btnGroup">
+          <view
+            class="btn left"
+            @click="hide"
+          >
+            <text class="btnText">取消</text>
+          </view>
+          <view
+            class="btn right"
+            @click="save"
+          >
+            <text class="btnText">提交</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import devUi from "../../../core/libs/devUi.js";
+let success, error;
+export default {
+  props: {
+    /**
+     * 路径列表
+     */
+    dirList: {
+      type: Array,
+      default: () => [],
+    },
+    /**
+     * 路径类型
+     */
+    dirType: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      /**
+       * 是否展示
+       */
+      isShow: false,
+      /**
+       * 是否为操作文件夹
+       */
+      isDir: false,
+      /**
+       * 是否编辑模式
+       */
+      isEdit: true,
+      /**
+       * 输入框的值
+       */
+      value: "",
+      /**
+       * 屏幕高度
+       */
+      height: uni.getSystemInfoSync().windowHeight,
+      /**
+       * 更改前名称
+       */
+      oldValue: "",
+    };
+  },
+  computed: {
+    /**
+     * 获取标题
+     */
+    title() {
+      if (this.isEdit) {
+        return this.isDir ? "更改文件夹名称" : "更改文件名称";
+      } else {
+        return this.isDir ? "创建文件夹" : "创建文件";
+      }
+    },
+  },
+  methods: {
+    /**
+     * 展示弹窗
+     */
+    show(options) {
+      let that = this;
+      return new Promise((yes, err) => {
+        success = yes;
+        error = err;
+
+        this.isDir = options.isDir;
+        this.isEdit = options.isEdit;
+        this.value = String(options.name ? options.name : "");
+        this.oldValue = String(options.name ? options.name : "");
+
+        that.isShow = true;
+      });
+    },
+    /**
+     * 关闭弹窗
+     */
+    hide() {
+      this.isShow = false;
+    },
+    /**
+     * 获取当前文件绝对路径
+     */
+    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;
+      });
+      return path + "/";
+    },
+    /**
+     * 保存
+     */
+    save() {
+      let that = this;
+      that.value = that.value.replace(" ", "");
+      if (that.value == "") {
+        return devUi.showToast({
+          title: "请输入...",
+          icon: "none",
+        });
+      }
+      let path = that.getPath();
+
+      function buildSuccess() {
+        devUi.showToast({
+          title: "操作成功！",
+          icon: "success",
+        });
+        that.isShow = false;
+        that.$emit("getPage");
+      }
+
+      function buildError(e) {
+        let msg = "";
+        if (e && e.message) {
+          msg = e.message;
+        }
+        devUi.showToast({
+          title: "重命名失败！" + msg,
+          icon: "none",
+        });
+      }
+
+      // #ifdef MP-WEIXIN
+      if (1) {
+        let fs = wx.getFileSystemManager();
+        if (that.isEdit) {
+          if (that.isDir) {
+            // ! 重命名文件夹
+            // ! 小程序不支持重命名文件夹
+          } else {
+            // ! 重命名文件
+            fs.rename({
+              oldPath: path + that.oldValue,
+              newPath: path + that.value,
+              success: buildSuccess,
+              fail: buildError,
+            });
+          }
+        } else {
+          if (that.isDir) {
+            // ! 创建目录
+            fs.mkdir({
+              dirPath: path + that.value,
+              recursive: false,
+              success: buildSuccess,
+              fail: buildError,
+            });
+          } else {
+            // ! 创建文件
+            // fs.open({
+            //   filePath: path + that.value,
+            //   flag: "wx+",
+            //   success({ fd }) {
+            //     fs.closeSync({ fd });
+            //     buildSuccess();
+            //   },
+            //   fail: buildError,
+            // });
+            fs.writeFile({
+              filePath: path + that.value,
+              data: "",
+              encoding: "utf8",
+              success() {
+                buildSuccess();
+              },
+              fail: buildError,
+            });
+          }
+        }
+
+        return;
+      }
+      // #endif
+
+      if (that.isEdit) {
+        if (that.isDir) {
+          // ! 重命名文件夹
+          plus.io.resolveLocalFileSystemURL(
+            path + that.oldValue,
+            (entry) => {
+              plus.io.resolveLocalFileSystemURL(
+                path,
+                (faEntry) => {
+                  entry.moveTo(faEntry, that.value, buildSuccess, buildError);
+                },
+                buildError
+              );
+            },
+            buildError
+          );
+        } else {
+          // ! 重命名文件
+          plus.io.resolveLocalFileSystemURL(
+            path + that.oldValue,
+            (entry) => {
+              plus.io.resolveLocalFileSystemURL(
+                path,
+                (faEntry) => {
+                  entry.moveTo(faEntry, that.value, buildSuccess, buildError);
+                },
+                buildError
+              );
+            },
+            buildError
+          );
+        }
+      } else {
+        if (that.isDir) {
+          // ! 创建文件夹
+          plus.io.resolveLocalFileSystemURL(
+            path,
+            (entry) => {
+              entry.getDirectory(that.value, { create: true, exclusive: false }, buildSuccess, buildError);
+            },
+            buildError
+          );
+        } else {
+          // ! 创建文件
+          plus.io.resolveLocalFileSystemURL(
+            path,
+            (entry) => {
+              entry.getFile(that.value, { create: true }, buildSuccess, buildError);
+            },
+            buildError
+          );
+        }
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.editMask {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.3);
+  width: 750rpx;
+  flex: 1;
+  /* #ifndef APP-PLUS */
+  height: 100vh;
+  backdrop-filter: blur(1px);
+  /* #endif */
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 999;
+  .editDialog {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 690rpx;
+    background-color: #fff;
+    border-radius: 20rpx;
+    padding: 20rpx;
+    margin-bottom: 300rpx;
+    .title {
+      font-size: 28rpx;
+      line-height: 28rpx;
+      color: #333;
+    }
+    .input {
+      margin-top: 20rpx;
+      margin-bottom: 20rpx;
+      width: 640rpx;
+      height: 70rpx;
+      padding: 5rpx;
+      border-radius: 8rpx;
+      border: 1px solid rgba(0, 0, 0, 0.05);
+    }
+    .btnGroup {
+      display: flex;
+      flex-direction: row;
+      width: 640rpx;
+      justify-content: space-between;
+      .btn {
+        height: 64rpx;
+        border-radius: 10rpx;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        .btnText {
+          font-size: 24rpx;
+          color: #fff;
+        }
+      }
+      .left {
+        width: 160rpx;
+        background-color: #8799a3;
+      }
+      .right {
+        width: 450rpx;
+        background-color: #3cbb45;
+      }
+    }
+  }
+}
+</style>