init

.svn/pristine/b3/b391556143151b195a9f1e509d65f8025300de09.svn-base

@@ -0,0 +1,276 @@
+.layui-carousel {
+  position: relative;
+  left: 0;
+  top: 0;
+  background-color: #f8f8f8;
+}
+
+.layui-carousel > [carousel-item] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.layui-carousel > [carousel-item]:before {
+  position: absolute;
+  content: "\e63d";
+  left: 50%;
+  top: 50%;
+  width: 100px;
+  line-height: 20px;
+  margin: -10px 0 0 -50px;
+  text-align: center;
+  color: var(--global-neutral-color-8);
+  font-family: layui-icon !important;
+  font-size: 30px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.layui-carousel > [carousel-item] > * {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #f8f8f8;
+  transition-duration: 0.3s;
+  -webkit-transition-duration: 0.3s;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.layui-carousel-updown > * {
+  -webkit-transition: 0.3s ease-in-out up;
+  transition: 0.3s ease-in-out up;
+}
+
+.layui-carousel-arrow {
+  display: none\9;
+  opacity: 0;
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  margin-top: -18px;
+  width: 36px;
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  font-size: 20px;
+  border: 0;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.2);
+  color: #fff;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  cursor: pointer;
+}
+
+.layui-carousel-arrow[lay-type="add"] {
+  left: auto !important;
+  right: 10px;
+}
+
+.layui-carousel:hover .layui-carousel-arrow[lay-type="add"],
+.layui-carousel[lay-arrow="always"] .layui-carousel-arrow[lay-type="add"] {
+  right: 20px;
+}
+
+.layui-carousel[lay-arrow="always"] .layui-carousel-arrow {
+  opacity: 1;
+  left: 20px;
+}
+
+.layui-carousel[lay-arrow="none"] .layui-carousel-arrow {
+  display: none;
+}
+
+.layui-carousel-arrow:hover,
+.layui-carousel-ind ul:hover {
+  background-color: rgba(0, 0, 0, 0.35);
+}
+
+.layui-carousel:hover .layui-carousel-arrow {
+  display: block\9;
+  opacity: 1;
+  left: 20px;
+}
+
+.layui-carousel-ind {
+  position: relative;
+  top: -35px;
+  width: 100%;
+  line-height: 0 !important;
+  text-align: center;
+  font-size: 0;
+}
+
+.layui-carousel[lay-indicator="outside"] {
+  margin-bottom: 30px;
+}
+
+.layui-carousel[lay-indicator="outside"] .layui-carousel-ind {
+  top: 10px;
+}
+
+.layui-carousel[lay-indicator="outside"] .layui-carousel-ind ul {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.layui-carousel[lay-indicator="none"] .layui-carousel-ind {
+  display: none;
+}
+
+.layui-carousel-ind ul {
+  display: inline-block;
+  padding: 5px;
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+}
+
+.layui-carousel-ind li {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin: 0 3px;
+  font-size: 14px;
+  background-color: var(--global-neutral-color-3);
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 50%;
+  cursor: pointer;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+}
+
+.layui-carousel-ind li:hover {
+  background-color: rgba(255, 255, 255, 0.7);
+}
+
+.layui-carousel-ind li.layui-this {
+  background-color: #fff;
+}
+
+.layui-carousel > [carousel-item] > .layui-carousel-next,
+.layui-carousel > [carousel-item] > .layui-carousel-prev,
+.layui-carousel > [carousel-item] > .layui-this {
+  display: block;
+}
+
+.layui-carousel > [carousel-item] > .layui-this {
+  left: 0;
+}
+
+.layui-carousel > [carousel-item] > .layui-carousel-prev {
+  left: -100%;
+}
+
+.layui-carousel > [carousel-item] > .layui-carousel-next {
+  left: 100%;
+}
+
+.layui-carousel > [carousel-item] > .layui-carousel-next.layui-carousel-left,
+.layui-carousel > [carousel-item] > .layui-carousel-prev.layui-carousel-right {
+  left: 0;
+}
+
+.layui-carousel > [carousel-item] > .layui-this.layui-carousel-left {
+  left: -100%;
+}
+
+.layui-carousel > [carousel-item] > .layui-this.layui-carousel-right {
+  left: 100%;
+}
+
+.layui-carousel[lay-anim="updown"] .layui-carousel-arrow {
+  left: 50% !important;
+  top: 20px;
+  margin: 0 0 0 -18px;
+}
+
+.layui-carousel[lay-anim="updown"] > [carousel-item] > *,
+.layui-carousel[lay-anim="fade"] > [carousel-item] > * {
+  left: 0 !important;
+}
+
+.layui-carousel[lay-anim="updown"] .layui-carousel-arrow[lay-type="add"] {
+  top: auto !important;
+  bottom: 20px;
+}
+
+.layui-carousel[lay-anim="updown"] .layui-carousel-ind {
+  position: absolute;
+  top: 50%;
+  right: 20px;
+  width: auto;
+  height: auto;
+  transform: translateY(-50%);
+}
+
+.layui-carousel[lay-anim="updown"] .layui-carousel-ind ul {
+  padding: 3px 5px;
+}
+
+.layui-carousel[lay-anim="updown"] .layui-carousel-ind li {
+  display: block;
+  margin: 6px 0;
+}
+
+.layui-carousel[lay-anim="updown"] > [carousel-item] > .layui-this {
+  top: 0;
+}
+
+.layui-carousel[lay-anim="updown"] > [carousel-item] > .layui-carousel-prev {
+  top: -100%;
+}
+
+.layui-carousel[lay-anim="updown"] > [carousel-item] > .layui-carousel-next {
+  top: 100%;
+}
+
+.layui-carousel[lay-anim="updown"]
+  > [carousel-item]
+  > .layui-carousel-next.layui-carousel-left,
+.layui-carousel[lay-anim="updown"]
+  > [carousel-item]
+  > .layui-carousel-prev.layui-carousel-right {
+  top: 0;
+}
+
+.layui-carousel[lay-anim="updown"]
+  > [carousel-item]
+  > .layui-this.layui-carousel-left {
+  top: -100%;
+}
+
+.layui-carousel[lay-anim="updown"]
+  > [carousel-item]
+  > .layui-this.layui-carousel-right {
+  top: 100%;
+}
+
+.layui-carousel[lay-anim="fade"] > [carousel-item] > .layui-carousel-next,
+.layui-carousel[lay-anim="fade"] > [carousel-item] > .layui-carousel-prev {
+  opacity: 0;
+}
+
+.layui-carousel[lay-anim="fade"]
+  > [carousel-item]
+  > .layui-carousel-next.layui-carousel-left,
+.layui-carousel[lay-anim="fade"]
+  > [carousel-item]
+  > .layui-carousel-prev.layui-carousel-right {
+  opacity: 1;
+}
+
+.layui-carousel[lay-anim="fade"]
+  > [carousel-item]
+  > .layui-this.layui-carousel-left,
+.layui-carousel[lay-anim="fade"]
+  > [carousel-item]
+  > .layui-this.layui-carousel-right {
+  opacity: 0;
+}

.svn/pristine/b3/b3a0aef21fed028fbd523c78e483563e514b3c74.svn-base

@@ -0,0 +1,4 @@
+.layui-header {
+  box-sizing: border-box;
+  height: 60px;
+}

.svn/pristine/b3/b3a4f0a439cc802f6ab7a52f751b8e8609cb7f8b.svn-base

@@ -0,0 +1,528 @@
+<script lang="ts">
+export default {
+  name: "LayUpload",
+};
+</script>
+<script lang="ts" setup>
+import "./index.less";
+import { Recordable } from "../../types";
+import { layer } from "@layui/layer-vue";
+import {
+  computed,
+  ComputedRef,
+  getCurrentInstance,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  ref,
+  useSlots,
+  withDefaults,
+  watch,
+} from "vue";
+import { templateRef } from "@vueuse/core";
+import { LayLayer } from "@layui/layer-vue";
+import LayButton from "../button/index.vue";
+import Cropper from "cropperjs";
+import { useI18n } from "../../language";
+
+export interface LayerButton {
+  text: string;
+  callback: Function;
+}
+
+export interface LayerModal {
+  title?: string;
+  resize?: boolean;
+  move?: boolean;
+  maxmin?: boolean;
+  offset?: string[];
+  content?: string;
+  shade?: boolean;
+  shadeClose?: boolean;
+  shadeOpacity?: number;
+  zIndex?: number;
+  type?: "component" | "iframe";
+  closeBtn?: boolean;
+  area: string[];
+  btn?: LayerButton[];
+  btnAlign?: "l" | "r" | "c";
+  anim?: boolean;
+  isOutAnim?: boolean;
+}
+
+export interface CutOptions {
+  layerOption: LayerModal;
+  copperOption?: typeof Cropper;
+}
+
+export interface UploadProps {
+  url?: string;
+  data?: any;
+  headers?: Recordable;
+  acceptMime?: string;
+  field?: string;
+  size?: number;
+  multiple?: boolean;
+  number?: number;
+  drag?: boolean;
+  disabled?: boolean;
+  disabledPreview?: boolean;
+  cut?: boolean;
+  cutOptions?: CutOptions;
+  text?: string;
+  dragText?: string;
+  modelValue?: any;
+  auto?: boolean;
+}
+
+const getCutDownResult = () => {
+  if (_cropper) {
+    const canvas = _cropper.getCroppedCanvas();
+    let imgData = canvas.toDataURL('"image/png"');
+    let currentTimeStamp = new Date().valueOf();
+    let orgInfo = activeUploadFiles.value[0];
+    emit(
+      "cutdone",
+      Object.assign({ currentTimeStamp, cutResult: imgData, orginal: orgInfo })
+    );
+    let newFile = dataURLtoFile(imgData);
+    if (!props.auto) {
+      emit("update:modelValue", [newFile]);
+      clearLightCutEffect();
+      return;
+    }
+    commonUploadTransaction([newFile]);
+    nextTick(() => clearAllCutEffect());
+  } else {
+    errorF(cutInitErrorMsg.value);
+  }
+};
+
+const closeCutDownModal = () => {
+  let currentTimeStamp = new Date().valueOf();
+  emit("cutcancel", Object.assign({ currentTimeStamp }));
+  nextTick(() => clearAllCutEffect());
+};
+
+const clearAllCutEffect = () => {
+  activeUploadFiles.value = [];
+  activeUploadFilesImgs.value = [];
+  innerCutVisible.value = false;
+  (orgFileInput.value as HTMLInputElement).value = "";
+  _cropper = null;
+};
+
+const clearLightCutEffect = () => {
+  activeUploadFiles.value = [];
+  activeUploadFilesImgs.value = [];
+  innerCutVisible.value = false;
+  _cropper = null;
+};
+
+const { t } = useI18n();
+const text = computed(() => {
+  return props.text ? props.text : t("upload.text");
+});
+const dragText = computed(() => {
+  return props.dragText ? props.dragText : t("upload.dragText");
+});
+const defaultErrorMsg = computed(() => t("upload.defaultErrorMsg"));
+const urlErrorMsg = computed(() => t("upload.urlErrorMsg"));
+const numberErrorMsg = computed(() => t("upload.numberErrorMsg"));
+const occurFileSizeErrorMsg = computed(() => t("upload.occurFileSizeErrorMsg"));
+const cutInitErrorMsg = computed(() => t("upload.cutInitErrorMsg"));
+const uploadSuccess = computed(() => t("upload.uploadSuccess"));
+const startUploadMsg = computed(() => t("upload.startUploadMsg"));
+const cannotSupportCutMsg = computed(() => t("upload.cannotSupportCutMsg"));
+const title = computed(() => t("upload.title"));
+const confirmBtn = computed(() => t("upload.confirmBtn"));
+const cancelBtn = computed(() => t("upload.cancelBtn"));
+
+let defaultCutLayerOption = computed<LayerModal>(() => {
+  return {
+    type: "component",
+    title: title.value,
+    shade: true,
+    shadeClose: true,
+    area: ["640px", "640px"],
+    btn: [
+      { text: confirmBtn.value, callback: getCutDownResult },
+      { text: cancelBtn.value, callback: closeCutDownModal },
+    ],
+  };
+});
+
+const props = withDefaults(defineProps<UploadProps>(), {
+  field: "file",
+  acceptMime: "MIME_type",
+  size: 0,
+  multiple: false,
+  number: 0,
+  drag: false,
+  disabled: false,
+  disabledPreview: false,
+  cut: false,
+  cutOptions: void 0,
+  modelValue: null,
+  auto: true,
+});
+
+const slot = useSlots();
+const slots = slot.default && slot.default();
+const context = getCurrentInstance();
+const emit = defineEmits([
+  "choose",
+  "chooseAfter",
+  "before",
+  "done",
+  "error",
+  "cutdone",
+  "cutcancel",
+  "update:modelValue",
+]);
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (!props.modelValue) {
+      clearAllCutEffect();
+    }
+  }
+);
+
+const isDragEnter = ref(false);
+const activeUploadFiles = ref<any[]>([]);
+const activeUploadFilesImgs = ref<any[]>([]);
+const orgFileInput = templateRef<HTMLElement>("orgFileInput");
+
+let _cropper: any = null;
+let computedCutLayerOption: ComputedRef<LayerModal>;
+
+if (props.cutOptions && props.cutOptions.layerOption) {
+  computedCutLayerOption = computed(() =>
+    Object.assign(defaultCutLayerOption, props.cutOptions.layerOption)
+  );
+} else {
+  computedCutLayerOption = computed(() => defaultCutLayerOption.value);
+}
+
+interface localUploadTransaction {
+  url: string;
+  files: File[] | Blob[];
+  [propMame: string]: any;
+}
+
+interface localUploadOption {
+  url: string;
+  [propMame: string]: any;
+}
+
+const innerCutVisible = ref<boolean>(false);
+
+const localUploadTransaction = (option: localUploadTransaction) => {
+  const { url, files } = option;
+  let formData = new FormData();
+  if (url.length <= 5) {
+    errorF(urlErrorMsg.value);
+    return;
+  }
+  if (Array.isArray(files) && files.length > 0) {
+    for (let i = 0; i < files.length; i++) {
+      let _file = files[i];
+      formData.append(props.field + "[" + i + "]", _file);
+    }
+  }
+  if (props.data && props.data instanceof Object) {
+    let _requestDate = props.data;
+    for (const key in _requestDate) {
+      formData.append(key, _requestDate[key]);
+    }
+  }
+  let utimer = window.setTimeout(() => {
+    localUpload({ url, formData }, function () {
+      clearTimeout(utimer);
+    });
+  }, 200);
+};
+
+const dataURLtoFile = (dataurl: string) => {
+  let arr: any[] = dataurl.split(",");
+  let mime = "";
+  if (arr.length > 0) {
+    mime = arr[0].match(/:(.*?);/)[1];
+  }
+  let bstr = atob(arr[1]);
+  let n = bstr.length;
+  let u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new Blob([u8arr], { type: mime });
+};
+
+const errorF = (errorText: string) => {
+  let currentTimeStamp = new Date().valueOf();
+  let errorMsg = errorText ? errorText : defaultErrorMsg;
+  errorMsg = `layui-vue:${errorMsg}`;
+  console.warn(errorMsg);
+  layer.msg(errorMsg, { icon: 2, time: 1000 }, function (res: unknown) {});
+  emit("error", Object.assign({ currentTimeStamp, msg: errorMsg }));
+};
+
+const localUpload = (option: localUploadOption, callback: Function) => {
+  let xhr: XMLHttpRequest = new XMLHttpRequest();
+  let url = option.url;
+  let formData = option.formData;
+  const cb = callback;
+  xhr.onreadystatechange = function () {
+    let currentTimeStamp = new Date().valueOf();
+    if (xhr.readyState === 1) {
+      if (
+        (xhr.status >= 200 && xhr.status <= 300) ||
+        xhr.status === 304 ||
+        xhr.status == 0
+      ) {
+        let successText = startUploadMsg.value;
+        emit(
+          "before",
+          Object.assign({ currentTimeStamp, msg: successText, ...option })
+        );
+      }
+    } else if (xhr.readyState === 4) {
+      let successText = xhr.responseText ? xhr.responseText : uploadSuccess;
+      if (
+        (xhr.status >= 200 && xhr.status <= 300) ||
+        xhr.status === 304 ||
+        xhr.status == 0
+      ) {
+        let data = xhr.responseText;
+        emit("done", { currentTimeStamp, msg: successText, data: data });
+      }
+    }
+  };
+  xhr.open("post", url, true);
+  if (props.headers) {
+    for (let key in props.headers) {
+      xhr.setRequestHeader(key, props.headers[key]);
+    }
+  } else {
+    xhr.setRequestHeader("Accept", "application/json, text/javascript");
+  }
+  let currentTimeStamp = new Date().valueOf();
+  emit("before", Object.assign(option, currentTimeStamp));
+  xhr.send(formData);
+  if (cb && typeof cb == "function") {
+    cb();
+  }
+  clearAllCutEffect();
+};
+
+const filetoDataURL = (file: File, fn: Function) => {
+  const reader = new FileReader();
+  reader.onloadend = function (e: any) {
+    fn(e.target.result);
+  };
+  reader.readAsDataURL(file);
+};
+
+const uploadChange = (e: any) => {
+  e.preventDefault();
+  const _files = [...(e.target.files || e.dataTransfer.files)];
+  if (props.multiple && props.number != 0 && props.number < _files.length) {
+    errorF(numberErrorMsg.value);
+    return;
+  }
+  if (props.size && props.size != 0) {
+    for (let i = 0; i < _files.length; i++) {
+      let _file = _files[i];
+      let _size = _file.size;
+      if (_size > props.size * 1024) {
+        errorF(occurFileSizeErrorMsg.value);
+        return;
+      }
+    }
+  }
+  for (let item of _files) {
+    activeUploadFiles.value.push(item);
+    filetoDataURL(item, function (res: any) {
+      activeUploadFilesImgs.value.push(res);
+    });
+  }
+  let arm1 =
+    props.cut &&
+    props.acceptMime.indexOf("image") != -1 &&
+    props.multiple == false;
+
+  let arm2 =
+    props.cut &&
+    props.acceptMime.indexOf("image") != -1 &&
+    props.multiple == true;
+
+  if (arm1) {
+    innerCutVisible.value = true;
+    setTimeout(() => {
+      let _imgs = document.getElementsByClassName("_lay_upload_img");
+      if (_imgs && _imgs.length > 0) {
+        let _img = _imgs[0];
+        // @ts-ignore
+        _cropper = new Cropper(_img, {
+          aspectRatio: 16 / 9,
+        });
+      } else {
+        clearAllCutEffect();
+      }
+    }, 200);
+  } else {
+    if (arm2) {
+      console.warn(cannotSupportCutMsg.value);
+    }
+    if (!props.auto) {
+      emit("update:modelValue", _files);
+      return;
+    }
+    commonUploadTransaction(_files);
+  }
+};
+
+const commonUploadTransaction = (_files: any[]) => {
+  let currentTimeStamp = new Date().valueOf();
+  let successText = uploadSuccess;
+  if (props.url) {
+    localUploadTransaction({
+      url: props.url,
+      files: _files,
+    });
+  } else {
+    emit("done", { currentTimeStamp, msg: successText, data: _files });
+    clearAllCutEffect();
+  }
+};
+
+const chooseFile = () => {
+  let _target = orgFileInput.value;
+  if (_target) {
+    _target.click();
+  }
+};
+
+const clickOrgInput = () => {
+  let currentTimeStamp = new Date().valueOf();
+  emit("choose", currentTimeStamp);
+};
+
+const dragRef = ref();
+
+function dragEnter(e: any) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragOver(e: any) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+onMounted(() => {
+  nextTick(() => {
+    if (dragRef.value) {
+      dragRef.value.addEventListener("dragenter", dragEnter, false);
+      dragRef.value.addEventListener("dragover", dragOver, false);
+      dragRef.value.addEventListener("drop", uploadChange, false);
+    }
+  });
+});
+
+onUnmounted(() => {
+  if (dragRef.value) {
+    dragRef.value.removeEventListener("dragenter");
+    dragRef.value.removeEventListener("dragover");
+    dragRef.value.removeEventListener("drop");
+  }
+});
+</script>
+
+<template>
+  <div
+    class="layui-upload layui-upload-wrap"
+    :class="disabledPreview ? 'layui-upload-file-disabled' : ''"
+  >
+    <input
+      type="file"
+      class="layui-upload-file"
+      ref="orgFileInput"
+      :name="field"
+      :field="field"
+      :multiple="multiple"
+      :accept="acceptMime"
+      :disabled="disabled"
+      @click="clickOrgInput"
+      @change="uploadChange"
+    />
+    <div v-if="!drag">
+      <div class="layui-upload-btn-box" @click.stop="chooseFile">
+        <template v-if="slot.default">
+          <slot :disabled="disabled"></slot>
+        </template>
+        <template v-else>
+          <lay-button type="primary" :disabled="disabled">{{
+            text
+          }}</lay-button>
+        </template>
+      </div>
+    </div>
+    <div
+      v-else
+      ref="dragRef"
+      class="layui-upload-drag"
+      :class="
+        disabled
+          ? 'layui-upload-drag-disable'
+          : isDragEnter
+          ? 'layui-upload-drag-draging'
+          : ''
+      "
+      @click.stop="chooseFile"
+    >
+      <i class="layui-icon"></i>
+      <p>{{ dragText }}</p>
+      <div class="layui-hide" id="uploadDemoView">
+        <hr />
+        <img src="" alt="上传成功后渲染" style="max-width: 196px" />
+      </div>
+    </div>
+    <lay-layer
+      v-model="innerCutVisible"
+      :title="computedCutLayerOption.title"
+      :move="computedCutLayerOption.move"
+      :resize="computedCutLayerOption.resize"
+      :shade="computedCutLayerOption.shade"
+      :shadeClose="computedCutLayerOption.shadeClose"
+      :shadeOpacity="computedCutLayerOption.shadeOpacity"
+      :zIndex="computedCutLayerOption.zIndex"
+      :btnAlign="computedCutLayerOption.btnAlign"
+      :area="computedCutLayerOption.area"
+      :anim="computedCutLayerOption.anim"
+      :isOutAnim="computedCutLayerOption.isOutAnim"
+      :btn="computedCutLayerOption.btn"
+      @close="clearAllCutEffect"
+    >
+      <div
+        class="copper-container"
+        v-for="(base64str, index) in activeUploadFilesImgs"
+        :key="`file${index}`"
+      >
+        <img
+          :src="base64str"
+          :id="`_lay_upload_img${index}`"
+          class="_lay_upload_img"
+        />
+      </div>
+    </lay-layer>
+    <div
+      class="layui-upload-list"
+      :class="disabledPreview ? 'layui-upload-list-disabled' : ''"
+    >
+      <slot name="preview"></slot>
+    </div>
+  </div>
+</template>