@cmstops/pro-compo 0.1.9 → 0.1.11

package/es/uploadBefore/style/index.css

@@ -0,0 +1,111 @@
+.tooltip-button {
+  height: auto;
+  padding: 20px;
+}
+.table_wrp {
+  height: 50vh;
+}
+/** 上传列表面板 */
+.panel_wrp {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+}
+.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.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/es/uploadBefore/style/index.d.ts

@@ -0,0 +1 @@
+import './index.less';

package/es/uploadBefore/style/index.js

@@ -0,0 +1 @@
+import "./index.less";

package/es/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/es/uploadStep/component.js

@@ -1,13 +1,148 @@
-import { defineComponent, openBlock, createElementBlock } from "vue";
+import { defineComponent, toRef, computed, watch, withDirectives, openBlock, createElementBlock, normalizeClass, createVNode, unref, withCtx, createElementVNode, toDisplayString, createBlock, createCommentVNode, Fragment, renderList, vShow, createTextVNode } from "vue";
+import { IconDown, IconUp, IconShrink, IconExpand, IconClose } from "@arco-design/web-vue/es/icon";
+import { Card, Tooltip, Progress } from "@arco-design/web-vue";
+import _sfc_main$1 from "../typeIcons/component.js";
+import { useToggle } from "../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 = 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 = toRef(props, "fileList");
+    const { state: expend, toggle: toggleExp } = useToggle(true);
+    const { state: scale, toggle: toggleSca } = useToggle();
+    const cardBodyStyle = computed(() => expend.value ? {} : { padding: 0 });
+    const titleTxt = computed(() => isUploading.value ? "\u6B63\u5728\u5904\u7406" : "\u5904\u7406\u5B8C\u6210");
+    const successCount = computed(
+      () => showList.value.filter((it) => !uploadingFilter(it.state)).length
+    );
+    const isUploading = computed(
+      () => !showList.value.some((item) => !uploadingFilter(item.state))
+    );
+    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 openBlock(), createElementBlock("div", null, "uploadStep");
+      return withDirectives((openBlock(), createElementBlock("div", {
+        class: normalizeClass(["panel_wrp", { global: _ctx.global }])
+      }, [
+        createVNode(unref(Card), {
+          hoverable: "",
+          class: normalizeClass(["panel_card", { expend: unref(scale) }]),
+          "body-style": cardBodyStyle.value
+        }, {
+          cover: withCtx(() => [
+            createElementVNode("div", _hoisted_1, [
+              createElementVNode("div", _hoisted_2, toDisplayString(titleTxt.value) + "\uFF08" + toDisplayString(successCount.value) + "/" + toDisplayString(showList.value.length) + "\uFF09 ", 1),
+              createElementVNode("div", _hoisted_3, [
+                createElementVNode("div", {
+                  class: "bar",
+                  onClick: _cache[0] || (_cache[0] = (...args) => unref(toggleExp) && unref(toggleExp)(...args))
+                }, [
+                  unref(expend) ? (openBlock(), createBlock(unref(IconDown), { key: 0 })) : (openBlock(), createBlock(unref(IconUp), { key: 1 }))
+                ]),
+                createElementVNode("div", {
+                  class: "bar",
+                  onClick: _cache[1] || (_cache[1] = (...args) => unref(toggleSca) && unref(toggleSca)(...args))
+                }, [
+                  unref(scale) ? (openBlock(), createBlock(unref(IconShrink), { key: 0 })) : (openBlock(), createBlock(unref(IconExpand), { key: 1 }))
+                ]),
+                !isUploading.value ? (openBlock(), createElementBlock("div", {
+                  key: 0,
+                  class: "bar",
+                  onClick: closeListPanel
+                }, [
+                  createVNode(unref(IconClose))
+                ])) : createCommentVNode("v-if", true)
+              ])
+            ])
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass(["panel_list", { un_expend: !unref(expend) }])
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.fileList, (file) => {
+                return openBlock(), createElementBlock("div", {
+                  key: file.id,
+                  class: "panel_item"
+                }, [
+                  createElementVNode("div", _hoisted_4, [
+                    createVNode(_sfc_main$1, {
+                      doc: true,
+                      resource: true,
+                      type: file.type
+                    }, null, 8, ["type"]),
+                    createVNode(unref(Tooltip), {
+                      content: file.name
+                    }, {
+                      default: withCtx(() => [
+                        createElementVNode("span", _hoisted_5, toDisplayString(file.name), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["content"])
+                  ]),
+                  withDirectives(createElementVNode("div", { class: "panel_column flex-1" }, toDisplayString(getSttType(file.state)), 513), [
+                    [vShow, unref(scale)]
+                  ]),
+                  createElementVNode("div", _hoisted_6, [
+                    createTextVNode(toDisplayString([2, 0].includes(file.state) ? 100 : file.percent * 100) + " % ", 1),
+                    createVNode(unref(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)), [
+        [vShow, _ctx.visable]
+      ]);
     };
   }
 });

package/es/uploadStep/script/fileTypeAdapter.d.ts

@@ -0,0 +1,20 @@
+export interface CFileItem {
+    file: File;
+    id: string;
+    url?: string;
+    dirId?: string;
+}
+export interface SFileItem {
+    name: string;
+    size: number;
+    sizeCN: string;
+    type: string;
+    typeCN?: string;
+    id: string;
+    dirId?: string;
+}
+export interface LFileItem extends SFileItem {
+    percent: number;
+    state: number;
+    count?: number;
+}

package/es/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/es/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;
+}