@cmstops/pro-compo 0.1.10 → 0.1.12

package/lib/uploadBefore/style/index.less

@@ -0,0 +1,144 @@
+.tooltip-button {
+  height: auto;
+  padding: 20px;
+}
+
+.table_wrp {
+  height: 50vh;
+}
+
+._brTop(@p) {
+  border-top-left-radius: @p;
+  border-top-right-radius: @p;
+}
+
+/** 上传列表面板 */
+
+// 布局部分
+.panel_wrp {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+
+  .panel_card {
+    .panel_header {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+
+      .opt {
+        display: flex;
+        flex-direction: row;
+        gap: 15px;
+      }
+    }
+
+    .panel_list {
+      display: flex;
+      flex-direction: column;
+
+      .panel_item {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        .panel_column {
+          display: flex;
+          gap: 10px;
+          align-items: center;
+
+          &.flex-1 {
+            flex: 1;
+          }
+
+          &.flex-3 {
+            flex: 3;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 样式部分
+.panel_wrp {
+  width: auto;
+  overflow: hidden;
+
+  & *::selection {
+    display: none;
+  }
+  ._brTop(12px);
+
+  .panel_card {
+    width: 350px;
+    transition: all 0.3s;
+
+    &.expend {
+      width: 420px;
+    }
+
+    .panel_header {
+      width: 90%;
+      height: 50px;
+      padding: 0 5%;
+      color: white;
+      background-color: rgb(var(--arcoblue-5));
+      ._brTop(10px);
+
+      .title {
+        white-space: nowrap;
+      }
+
+      .opt {
+        font-size: 18px;
+
+        &::selection {
+          display: none;
+        }
+
+        .bar {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .panel_list {
+      width: 100%;
+      height: 120px;
+      overflow-y: scroll;
+      transition: all 0.3s;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      &.un_expend {
+        height: 0;
+        overflow: hidden;
+      }
+
+      .panel_item {
+        height: 35px;
+        padding: 5px 15px;
+
+        .panel_column {
+          white-space: nowrap;
+
+          .media_alias {
+            width: 160px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}
+
+/** 公用 */
+.ellips {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/lib/uploadStep/component.js

@@ -1,14 +1,149 @@
 "use strict";
 var vue = require("vue");
+var icon = require("@arco-design/web-vue/es/icon");
+var webVue = require("@arco-design/web-vue");
+var component = require("../typeIcons/component.js");
+var toggle = require("../hooks/toggle.js");
+const _hoisted_1 = { class: "panel_header" };
+const _hoisted_2 = { class: "title" };
+const _hoisted_3 = { class: "opt" };
+const _hoisted_4 = { class: "panel_column flex-3" };
+const _hoisted_5 = { class: "media_alias ellips" };
+const _hoisted_6 = { class: "panel_column percent flex-1" };
+var stateEnum = /* @__PURE__ */ ((stateEnum2) => {
+  stateEnum2[stateEnum2["UPLOADING"] = 3] = "UPLOADING";
+  stateEnum2[stateEnum2["WATING"] = 5] = "WATING";
+  stateEnum2[stateEnum2["SUCCESS"] = 2] = "SUCCESS";
+  stateEnum2[stateEnum2["ERROR"] = -1] = "ERROR";
+  return stateEnum2;
+})(stateEnum || {});
 const _sfc_main = vue.defineComponent({
   ...{ name: "uploadStep" },
   __name: "component",
   props: {
-    BASE_API: {}
+    BASE_API: {},
+    fileList: {},
+    visable: { type: Boolean },
+    global: { type: Boolean }
   },
-  setup(__props) {
+  emits: ["update:visable"],
+  setup(__props, { emit: __emit }) {
+    const progressEnum = {
+      UPLOADING: "normal",
+      WATING: "normal",
+      SUCCESS: "success",
+      ERROR: "danger"
+    };
+    const stateTxtEnum = {
+      UPLOADING: "\u4E0A\u4F20\u4E2D",
+      WATING: "\u6392\u961F\u4E2D",
+      SUCCESS: "\u4E0A\u4F20\u5B8C\u6210",
+      ERROR: "\u4E0A\u4F20\u5931\u8D25"
+    };
+    const emits = __emit;
+    const props = __props;
+    const showList = vue.toRef(props, "fileList");
+    const { state: expend, toggle: toggleExp } = toggle.useToggle(true);
+    const { state: scale, toggle: toggleSca } = toggle.useToggle();
+    const cardBodyStyle = vue.computed(() => expend.value ? {} : { padding: 0 });
+    const titleTxt = vue.computed(() => isUploading.value ? "\u6B63\u5728\u5904\u7406" : "\u5904\u7406\u5B8C\u6210");
+    const successCount = vue.computed(
+      () => showList.value.filter((it) => !uploadingFilter(it.state)).length
+    );
+    const isUploading = vue.computed(
+      () => !showList.value.some((item) => !uploadingFilter(item.state))
+    );
+    vue.watch(
+      () => scale.value,
+      (n) => n && !expend.value && toggleExp()
+    );
+    const closeListPanel = () => emits("update:visable");
+    const getSttType = (n) => stateTxtEnum[stateEnum[n]];
+    const getPrgType = (n) => progressEnum[stateEnum[n]];
+    const uploadingFilter = (state) => [3, 5].includes(state);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", null, "uploadStep");
+      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["panel_wrp", { global: _ctx.global }])
+      }, [
+        vue.createVNode(vue.unref(webVue.Card), {
+          hoverable: "",
+          class: vue.normalizeClass(["panel_card", { expend: vue.unref(scale) }]),
+          "body-style": cardBodyStyle.value
+        }, {
+          cover: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_1, [
+              vue.createElementVNode("div", _hoisted_2, vue.toDisplayString(titleTxt.value) + "\uFF08" + vue.toDisplayString(successCount.value) + "/" + vue.toDisplayString(showList.value.length) + "\uFF09 ", 1),
+              vue.createElementVNode("div", _hoisted_3, [
+                vue.createElementVNode("div", {
+                  class: "bar",
+                  onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(toggleExp) && vue.unref(toggleExp)(...args))
+                }, [
+                  vue.unref(expend) ? (vue.openBlock(), vue.createBlock(vue.unref(icon.IconDown), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(icon.IconUp), { key: 1 }))
+                ]),
+                vue.createElementVNode("div", {
+                  class: "bar",
+                  onClick: _cache[1] || (_cache[1] = (...args) => vue.unref(toggleSca) && vue.unref(toggleSca)(...args))
+                }, [
+                  vue.unref(scale) ? (vue.openBlock(), vue.createBlock(vue.unref(icon.IconShrink), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(icon.IconExpand), { key: 1 }))
+                ]),
+                !isUploading.value ? (vue.openBlock(), vue.createElementBlock("div", {
+                  key: 0,
+                  class: "bar",
+                  onClick: closeListPanel
+                }, [
+                  vue.createVNode(vue.unref(icon.IconClose))
+                ])) : vue.createCommentVNode("v-if", true)
+              ])
+            ])
+          ]),
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(["panel_list", { un_expend: !vue.unref(expend) }])
+            }, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.fileList, (file) => {
+                return vue.openBlock(), vue.createElementBlock("div", {
+                  key: file.id,
+                  class: "panel_item"
+                }, [
+                  vue.createElementVNode("div", _hoisted_4, [
+                    vue.createVNode(component, {
+                      doc: true,
+                      resource: true,
+                      type: file.type
+                    }, null, 8, ["type"]),
+                    vue.createVNode(vue.unref(webVue.Tooltip), {
+                      content: file.name
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createElementVNode("span", _hoisted_5, vue.toDisplayString(file.name), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["content"])
+                  ]),
+                  vue.withDirectives(vue.createElementVNode("div", { class: "panel_column flex-1" }, vue.toDisplayString(getSttType(file.state)), 513), [
+                    [vue.vShow, vue.unref(scale)]
+                  ]),
+                  vue.createElementVNode("div", _hoisted_6, [
+                    vue.createTextVNode(vue.toDisplayString([2, 0].includes(file.state) ? 100 : file.percent * 100) + " % ", 1),
+                    vue.createVNode(vue.unref(webVue.Progress), {
+                      size: "small",
+                      type: "circle",
+                      width: 20,
+                      "stroke-width": 1,
+                      percent: file.percent,
+                      status: getPrgType(file.state),
+                      "show-text": ![3, 5].includes(file.state)
+                    }, null, 8, ["percent", "status", "show-text"])
+                  ])
+                ]);
+              }), 128))
+            ], 2)
+          ]),
+          _: 1
+        }, 8, ["class", "body-style"])
+      ], 2)), [
+        [vue.vShow, _ctx.visable]
+      ]);
     };
   }
 });

package/lib/uploadStep/style/index.css

@@ -2,3 +2,116 @@
   height: auto;
   padding: 20px;
 }
+.table_wrp {
+  height: 50vh;
+}
+/** 上传列表面板 */
+.panel_wrp {
+  position: relative;
+}
+.panel_wrp.global {
+  position: absolute;
+  right: 20px;
+  bottom: 20px;
+}
+.panel_wrp .panel_card .panel_header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.panel_wrp .panel_card .panel_header .opt {
+  display: flex;
+  flex-direction: row;
+  gap: 15px;
+}
+.panel_wrp .panel_card .panel_list {
+  display: flex;
+  flex-direction: column;
+}
+.panel_wrp .panel_card .panel_list .panel_item {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.panel_wrp .panel_card .panel_list .panel_item .panel_column {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+.panel_wrp .panel_card .panel_list .panel_item .panel_column.percent {
+  justify-content: end;
+}
+.panel_wrp .panel_card .panel_list .panel_item .panel_column.flex-1 {
+  flex: 1;
+}
+.panel_wrp .panel_card .panel_list .panel_item .panel_column.flex-3 {
+  flex: 3;
+}
+.panel_wrp {
+  width: auto;
+  overflow: hidden;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+.panel_wrp *::selection {
+  display: none;
+}
+.panel_wrp .panel_card {
+  width: 350px;
+  transition: all 0.3s;
+}
+.panel_wrp .panel_card.expend {
+  width: 420px;
+}
+.panel_wrp .panel_card .panel_header {
+  width: 90%;
+  height: 50px;
+  padding: 0 5%;
+  color: white;
+  background-color: rgb(var(--arcoblue-5));
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+.panel_wrp .panel_card .panel_header .title {
+  white-space: nowrap;
+}
+.panel_wrp .panel_card .panel_header .opt {
+  font-size: 18px;
+}
+.panel_wrp .panel_card .panel_header .opt::selection {
+  display: none;
+}
+.panel_wrp .panel_card .panel_header .opt .bar {
+  cursor: pointer;
+}
+.panel_wrp .panel_card .panel_list {
+  width: 100%;
+  height: 120px;
+  overflow-y: scroll;
+  transition: all 0.3s;
+}
+.panel_wrp .panel_card .panel_list::-webkit-scrollbar {
+  display: none;
+}
+.panel_wrp .panel_card .panel_list.un_expend {
+  height: 0;
+  overflow: hidden;
+}
+.panel_wrp .panel_card .panel_list .panel_item {
+  height: 35px;
+  padding: 5px 15px;
+}
+.panel_wrp .panel_card .panel_list .panel_item .panel_column {
+  white-space: nowrap;
+}
+.panel_wrp .panel_card .panel_list .panel_item .panel_column .media_alias {
+  width: 160px;
+  cursor: pointer;
+}
+/** 公用 */
+.ellips {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/lib/uploadStep/style/index.less

@@ -2,3 +2,151 @@
   height: auto;
   padding: 20px;
 }
+
+.table_wrp {
+  height: 50vh;
+}
+
+._brTop(@p) {
+  border-top-left-radius: @p;
+  border-top-right-radius: @p;
+}
+
+/** 上传列表面板 */
+
+// 布局部分
+.panel_wrp {
+  position: relative;
+
+  &.global {
+    position: absolute;
+    right: 20px;
+    bottom: 20px;
+  }
+
+  .panel_card {
+    .panel_header {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+
+      .opt {
+        display: flex;
+        flex-direction: row;
+        gap: 15px;
+      }
+    }
+
+    .panel_list {
+      display: flex;
+      flex-direction: column;
+
+      .panel_item {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        .panel_column {
+          display: flex;
+          gap: 10px;
+          align-items: center;
+
+          &.percent {
+            justify-content: end;
+          }
+
+          &.flex-1 {
+            flex: 1;
+          }
+
+          &.flex-3 {
+            flex: 3;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 样式部分
+.panel_wrp {
+  width: auto;
+  overflow: hidden;
+
+  & *::selection {
+    display: none;
+  }
+  ._brTop(12px);
+
+  .panel_card {
+    width: 350px;
+    transition: all 0.3s;
+
+    &.expend {
+      width: 420px;
+    }
+
+    .panel_header {
+      width: 90%;
+      height: 50px;
+      padding: 0 5%;
+      color: white;
+      background-color: rgb(var(--arcoblue-5));
+      ._brTop(10px);
+
+      .title {
+        white-space: nowrap;
+      }
+
+      .opt {
+        font-size: 18px;
+
+        &::selection {
+          display: none;
+        }
+
+        .bar {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .panel_list {
+      width: 100%;
+      height: 120px;
+      overflow-y: scroll;
+      transition: all 0.3s;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      &.un_expend {
+        height: 0;
+        overflow: hidden;
+      }
+
+      .panel_item {
+        height: 35px;
+        padding: 5px 15px;
+
+        .panel_column {
+          white-space: nowrap;
+
+          .media_alias {
+            width: 160px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}
+
+/** 公用 */
+.ellips {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}