@neatui/nuxt 0.1.0

package/src/components/display/Image.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <div :class="`mc-img b-solid bk-case b-xs ${imgClass}`" :style="imgStyle">
+      <img :src="src[srcName]" :style="`object-fit: ${fit}`" @click.stop="showPreview" />
+      <div v-if="tools" class="mc-img-tools">
+        <slot name="tools">
+          <div class="mc-img-clean co-risk" @click="delImg"></div>
+        </slot>
+      </div>
+    </div>
+    <Layer :id="`PhotoViewer${layerId}${initialSlide}`" am="as">
+      <PhotoViewer :initialSlide="initialSlide" :files="files" :srcName="srcName" :id="`PhotoViewer${layerId}${initialSlide}`"></PhotoViewer>
+    </Layer>
+  </div>
+</template>
+<script setup lang="ts">
+  import { Layer, LayerById } from '../basic';
+  import PhotoViewer from './PhotoViewer.vue';
+
+  const props: any = defineProps({
+    tools: { type: Boolean, default: true },
+    srcName: { type: String, default: 'imgUrl' },
+    theme: { type: String, default: '@a' },
+    co: { type: String, default: 'note' },
+    imgClass: { type: String, default: '' },
+    imgStyle: { type: String, default: '' },
+    src: {
+      type: Object,
+      default: () => ({})
+    },
+    files: {
+      type: Array as () => any[],
+      default: () => []
+    },
+    // 图片如何适应容器框,同原生object-fit
+    fit: {
+      type: String,
+      default: 'contain'
+    },
+    // 是否开启图片预览放大
+    preview: {
+      type: Boolean,
+      default: true
+    },
+    initialSlide: {
+      type: Number,
+      default: 0
+    }
+  });
+
+  const emit = defineEmits(['delImg']);
+  const layerId = Math.random().toString(36).slice(-6);
+
+  //预览
+  const showPreview = () => {
+    if (!props.preview) return;
+    LayerById(`PhotoViewer${layerId}${props.initialSlide}`).show();
+  };
+  const delImg = () => {
+    emit('delImg', props.src);
+  };
+</script>
+<style lang="scss">
+  .mc-img {
+    height: 8em;
+    width: 8em;
+    padding: 0.5em;
+    border-radius: 0.25em;
+    position: relative;
+    overflow: hidden;
+    // @include theme {
+    //   border: 1px solid var(--co-case);
+    // }
+
+    img {
+      width: 100%;
+      height: 100%;
+      transform: translate3d(0, 0, 0);
+      border-radius: 0.15em;
+    }
+
+    &-tools {
+      position: absolute;
+      height: 1.5em;
+      opacity: 0;
+      right: 0;
+      top: 0;
+      text-align: center;
+      transition: all 0.5s;
+
+      & > * {
+        width: 1.5em;
+        height: 1.5em;
+        border-radius: 50%;
+        text-align: center;
+      }
+    }
+    &-clean {
+      display: inline-block;
+
+      background:
+        linear-gradient(45deg, transparent 40%, #fff 45%, #fff 55%, transparent 60%) no-repeat center/38% 38%,
+        linear-gradient(-45deg, transparent 40%, #fff 45%, #fff 55%, transparent 60%) no-repeat center/38% 38%,
+        radial-gradient(circle at 50% 50%, currentColor 53%, transparent 58%);
+    }
+    &:hover {
+      .mc-img-tools {
+        opacity: 1;
+      }
+    }
+  }
+</style>

package/src/components/display/List.vue

@@ -0,0 +1 @@
+<template><div></div></template>

package/src/components/display/PhotoEditor.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="photo-editor bg-fore n-mm">
+    <div class="mt-mm" ui-note="@b risk">抠图和压缩处理需要较长时间，期间请耐心等待不要关闭本窗口或进行操作，本功能需要付费，请尽量珍惜每一次处理避免不必要的浪费～</div>
+    <div v-if="state.img" class="photo-editor-viewer bg-weak my-mm" ui-flex="row">
+      <div class="mr-mm" style="flex: 1">
+        <vue-cropper ref="cropperRef" :img="state.img" :autoCrop="state.autoCrop" @realTime="realTime"></vue-cropper>
+      </div>
+      <div style="flex: 1" class="photo-editor-transparent">
+        <img :src="state.previews || ''" />
+      </div>
+    </div>
+    <div v-else class="photo-editor-viewer bg-weak my-mm" ui-flex="row cm">
+      <input type="file" class="input pa" @change="change" />
+      <div class="ac input-icon">
+        <i class="icon icon-upload fs-ml"></i>
+        <div class="fs-sl">请先上传图片</div>
+      </div>
+    </div>
+    <div ui-flex="row cm" class="mr-ls-sub">
+      <button ui-btn="@a s none :square" class="nx-mm" @click="reset">还原</button>
+      <button ui-btn="@a s none :square" class="nx-mm" @click="crop">
+        <i v-if="state.cropLoad" className="icon icon-loading am-r360"></i>
+        抠图
+      </button>
+      <button ui-btn="@a s none :square" class="nx-mm" @click="use">使用</button>
+    </div>
+    <div class="fekit-layer-close" @click="LayerById(layerId).hide()"></div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, reactive } from 'vue';
+  import { VueCropper } from 'vue-cropper/next';
+  import Compressor from 'compressorjs';
+  import { LayerById } from '../basic';
+  import axios from 'axios';
+  import 'vue-cropper/next/dist/index.css';
+
+  const props: any = defineProps({
+    layerId: {
+      type: String,
+      default: 'PhotoEditor'
+    }
+  });
+
+  const state = reactive({
+    img: null as any, //blob格式
+    // outputType: 'jepg', // 裁剪生成图片格式
+    autoCrop: true,
+    previews: null, //base格式
+    cropLoad: 0
+  });
+
+  const emit = defineEmits(['fileChange']);
+
+  const cropperRef = ref<any>(null);
+
+  const change = async ({ target: { files = [] } = {} }: any = {}) => {
+    const file = files[0];
+    const blob: any = await new Promise((resolve, reject) => {
+      new Compressor(file, {
+        quality: 1,
+        checkOrientation: false,
+        success: resolve,
+        maxWidth: 1000,
+        maxHeight: 700,
+        error: reject
+      });
+    });
+    const _file = blobToFile(blob);
+    const _blob: any = URL.createObjectURL(_file);
+    state.img = _blob;
+  };
+
+  // 实时响应预览图片
+  const realTime = (data: any) => {
+    cropperRef.value.getCropBlob((data: any) => {
+      blobToDataURI(data, (res: any) => {
+        state.previews = res;
+      });
+    });
+  };
+
+  //还原
+  const reset = () => {
+    cropperRef.value.clearCrop(); // 清除截图信息
+    cropperRef.value.goAutoCrop(); // 自动生成截图框函数
+  };
+
+  //抠图
+  const crop = async () => {
+    if (!state.cropLoad) {
+      state.cropLoad = 1;
+
+      const formData = {
+        image_file_b64: state.previews,
+        image_url: '',
+        size: 'preview',
+        type: 'auto',
+        type_level: '1',
+        format: 'auto',
+        roi: '0% 0% 100% 100%',
+        crop: false,
+        crop_margin: '0',
+        scale: 'original',
+        position: 'original',
+        channels: 'rgba',
+        add_shadow: false,
+        semitransparency: true,
+        bg_color: '',
+        bg_image_url: ''
+      };
+      const res: any = await axios.post(
+        'https://api.remove.bg/v1.0/removebg',
+        { ...formData },
+        { responseType: 'arraybuffer', headers: { 'X-Api-Key': 'kg4jrcKZd6Gjdx5CmBYmksuN' } }
+      );
+      if (res.status === 200) {
+        const blob = new Blob([res.data], { type: 'image/png' });
+        blobToDataURI(blob, (data: any) => {
+          state.previews = data;
+          state.cropLoad = 0;
+        });
+      }
+    }
+  };
+
+  //使用
+  const use = () => {
+    const file = base64ToFile(state.previews);
+    LayerById(props.layerId).hide();
+    emit('fileChange', file);
+  };
+
+  //blob 转 base64
+  const blobToDataURI = (blob: any, callback: any) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(blob);
+    reader.onload = function (e: any) {
+      callback(e.target.result);
+    };
+  };
+  //base64 转 file
+  const base64ToFile = (data: any) => {
+    const arr = data.split(','),
+      mime = arr[0].match(/:(.*?);/)[1],
+      bstr = atob(arr[1]);
+    let n = bstr.length;
+    const u8arr = new Uint8Array(n);
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n);
+    }
+    const blob = new Blob([u8arr], { type: mime });
+    const type = mime.replace(/image\//, '');
+    const file = new File([blob], new Date().getTime() + `.${type}`);
+    return file;
+  };
+  //blob转file
+  const blobToFile = (blob: any) => {
+    const { name = '' } = blob || {};
+    const file = new File([blob], name);
+    return file;
+  };
+</script>
+<style lang="scss">
+  .photo-editor {
+    &-viewer {
+      height: 27rem;
+    }
+    .input {
+      opacity: 0;
+      height: 100%;
+      width: 100%;
+    }
+    .input-icon {
+      line-height: 1.5;
+    }
+    &-transparent {
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIElEQVQoU2NkQAOXLl36jyzESAcF6Hbq6emhWMtIewUAeQ8d3cWD32MAAAAASUVORK5CYII=);
+    }
+  }
+</style>

package/src/components/display/PhotoViewer.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="full nx-mm">
+    <Swiper
+      :slidesPerView="1"
+      :initialSlide="initialSlide"
+      :spaceBetween="30"
+      :keyboard="{
+        enabled: true
+      }"
+      :pagination="{
+        clickable: true
+      }"
+      :navigation="true"
+      :modules="[Keyboard, Pagination, Navigation]"
+      class="mySwiper"
+    >
+      <SwiperSlide v-for="item in files" :key="item.id" class="ac" ui-flex="col cm">
+        <img :src="item[srcName]" class="vc" />
+      </SwiperSlide>
+    </Swiper>
+    <div class="fekit-layer-close close-img m-mm" @click="LayerById(id).hide()"></div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { Swiper, SwiperSlide } from 'swiper/vue';
+  import { Keyboard, Pagination, Navigation } from 'swiper/modules';
+  import { LayerById } from '../basic';
+  import 'swiper/css';
+  import 'swiper/css/pagination';
+  import 'swiper/css/navigation';
+
+  const props: any = defineProps({
+    srcName: {
+      type: String,
+      default: 'imgUrl'
+    },
+    id: {
+      type: String,
+      default: 'PhotoViewer'
+    },
+    initialSlide: {
+      type: Number,
+      default: 0
+    },
+    files: {
+      type: Array as () => any[],
+      default: () => []
+    }
+  });
+</script>

package/src/components/display/Popover.vue

@@ -0,0 +1 @@
+<template><div></div></template>

package/src/components/display/QRCode.vue

@@ -0,0 +1 @@
+<template><div></div></template>

package/src/components/display/Segmented.vue

@@ -0,0 +1 @@
+<template><div></div></template>

package/src/components/display/Statistic.vue

@@ -0,0 +1 @@
+<template><div></div></template>

package/src/components/display/Table.vue

@@ -0,0 +1 @@
+<template><div></div></template>

package/src/components/display/Tabs.vue

@@ -0,0 +1 @@
+<template><div></div></template>

package/src/components/display/Tag.vue

@@ -0,0 +1 @@
+<template><div></div></template>

package/src/components/display/Timeline.vue

@@ -0,0 +1 @@
+<template><div></div></template>

package/src/components/display/Tooltip.vue

@@ -0,0 +1 @@
+<template><div></div></template>

package/src/components/display/Tour.vue

@@ -0,0 +1 @@
+<template><div></div></template>