officialblock 1.0.7 → 1.0.9

package/src/components/CustomIframe/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <div
+    style="margin-top: 30px; margin-bottom: 30px"
+    class="custom-iframe-container"
+    :style="{ backgroundColor: modelValue?.bgColor }"
+    @mouseenter="isHover = true"
+    @mouseleave="isHover = false"
+  >
+    <div class="custom-iframe">
+      <div class="container-content-middle">
+        <iframe
+          width="450"
+          height="550"
+          frameborder="0"
+          :src="modelValue?.url"
+          allow=""
+          style="border: 0"
+        ></iframe>
+      </div>
+    </div>
+    <Operate
+      v-if="!modelValue?.readOnly"
+      v-model:show="isHover"
+      @handle-edit="showSetting = true"
+      @handle-delete="handleDelete"
+      @handle-copy="handleCopy"
+    ></Operate>
+    <!-- </a-row> -->
+  </div>
+
+  <Setting v-model:show="showSetting" :data="modelValue"></Setting>
+</template>
+
+<script lang="ts" setup>
+import { computed, nextTick, ref } from "vue";
+import { randomString } from "@/utils/common";
+import Setting from "./setting.vue";
+import Operate from "@/components/Operate/index.vue";
+
+// 定义组件名称
+defineOptions({
+  name: "CountDown",
+});
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => {},
+  },
+
+  // 是否预览
+  isPreview: {
+    type: Boolean,
+    default: false,
+  },
+});
+console.log("!!!!", props.modelValue);
+const emit = defineEmits(["update:modelValue", "handleDelete", "handleCopy"]);
+
+const isHover = ref<boolean>(false);
+const showSetting = ref<boolean>(false);
+const timeObj = ref({
+  day: 0,
+  hour: 0,
+  min: 0,
+  sec: 0,
+});
+// const timer = null;
+const timer = ref(null);
+
+const handleDelete = () => {
+  emit("handleDelete", props.modelValue.id);
+};
+
+const handleCopy = () => {
+  emit("handleCopy", props.modelValue);
+};
+
+const handleInit = () => {
+  if (props.modelValue && props.modelValue.height) return; // 检查必要属性是否存在
+  const data = {
+    id: props.modelValue?.id || randomString(),
+    type: "CustomIframe",
+    readOnly: props.modelValue?.readOnly || false,
+    width: "medium",
+    height: 550,
+    url: "https://www.baidu.com",
+  };
+  emit("update:modelValue", data);
+};
+
+handleInit();
+</script>
+
+<style scoped lang="scss">
+.custom-iframe-container {
+  position: relative;
+}
+.custom-iframe,
+.custom-iframe iframe {
+  width: 100%;
+}
+
+.custom-iframe .has-ratio {
+  width: 100%;
+  padding-bottom: 0;
+  padding-bottom: var(--custom-ratio, 0);
+  position: relative;
+}
+
+.custom-iframe .has-ratio iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/CustomIframe/setting.vue

@@ -0,0 +1,323 @@
+<template>
+  <a-drawer
+    :width="500"
+    :visible="show"
+    :footer="false"
+    @cancel="handleCancel"
+    unmountOnClose
+  >
+    <template #title> {{ data?.type }}组件编辑 </template>
+    <div class="seting-box">
+      <div class="setting-header flex items-center">
+        <span class="header-title">组件宽度</span>
+        <a-select v-model="data.width" placeholder="请选择" allow-clear>
+          <a-option value="default">默认</a-option>
+          <a-option value="small">小</a-option>
+          <a-option value="medium">中</a-option>
+          <a-option value="large">大</a-option>
+        </a-select>
+      </div>
+      <div class="setting-header flex items-center">
+        <span class="header-title">组件高度</span>
+        <a-slider
+          v-model="data.height"
+          :min="320"
+          :max="1080"
+          :default-value="10"
+          show-input
+        />
+      </div>
+      <div class="setting-header flex items-center">
+        <span class="header-title">网址</span>
+        <a-input
+          v-model="data.url"
+          :style="{ background: '#ffffff' }"
+          placeholder="请输入"
+          allow-clear
+        />
+      </div>
+    </div>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+import RichTextEditor from "@/components/RichTextEditor";
+import { randomString } from "@/utils/common";
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+
+  data: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const emit = defineEmits(["update:show"]);
+
+const handleCancel = () => {
+  emit("update:show", false);
+};
+</script>
+
+<style lang="scss" scoped>
+.setting-header {
+  padding-bottom: 12px;
+
+  .header-title {
+    width: 120px;
+    padding-right: 12px;
+    text-align: right;
+  }
+}
+.setting-header :deep(.arco-select-view-single) {
+  background-color: #fff !important;
+}
+.setting-header :deep(.arco-input-wrapper) {
+  background-color: #fff !important;
+}
+.item-img {
+  height: 100px;
+}
+.seting-box {
+  padding: 20px;
+  background: #f0f2f5;
+  border-radius: 3px;
+  .arco-input-wrapper {
+    background: #ffffff;
+  }
+}
+.setting-content {
+  .setting-header {
+    padding-bottom: 12px;
+
+    .header-title {
+      width: 120px;
+      padding-right: 12px;
+      text-align: right;
+    }
+  }
+
+  .setting-body {
+    margin-top: 12px;
+
+    .setting-item {
+      position: relative;
+      padding: 16px 12px;
+      background: #f0f2f5;
+      border-radius: 8px;
+      margin-bottom: 20px;
+
+      .btn-group {
+        position: absolute;
+        right: 0;
+        top: 0;
+        display: flex;
+        align-items: center;
+        padding: 4px;
+
+        .btn-delete {
+          padding: 4px;
+          font-size: 24px;
+          cursor: pointer;
+        }
+      }
+
+      .item-name {
+        font-size: 16px;
+        font-weight: 600;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #fff;
+      }
+
+      .item-title {
+        padding: 12px 0 8px 0;
+        font-size: 14px;
+        font-weight: 600;
+      }
+
+      .arco-input-wrapper {
+        background: #fff;
+      }
+
+      .item-button {
+        position: relative;
+        padding: 12px 8px 4px;
+        background: #fff;
+        border-radius: 4px;
+        margin: 4px 0;
+        transition: all 0.3s ease;
+
+        &.draggable-item {
+          cursor: move;
+
+          &:hover {
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            transform: translateY(-1px);
+          }
+
+          // 当禁用拖拽时，不显示拖拽效果
+          &.sortable-disabled {
+            cursor: default;
+
+            &:hover {
+              box-shadow: none;
+              transform: none;
+            }
+          }
+        }
+
+        .arco-input-wrapper {
+          background: #f2f3f5;
+        }
+      }
+
+      // 拖拽相关样式
+      .flip-list-move {
+        transition: transform 0.5s;
+      }
+
+      .no-move {
+        transition: transform 0s;
+      }
+
+      .ghost {
+        opacity: 0.5;
+        background: #c8ebfb;
+      }
+
+      .list-group {
+        min-height: 20px;
+      }
+
+      .list-group-item {
+        cursor: move;
+      }
+
+      .list-group-item i {
+        cursor: pointer;
+      }
+
+      .item-action {
+        padding: 10px 0;
+
+        .action-text {
+          width: 150px;
+          margin-right: 8px;
+        }
+      }
+
+      .item-add-btn {
+        display: inline-block;
+        padding: 2px 8px;
+        margin-top: 5px;
+        font-size: 11px;
+        color: #165dff;
+        border-radius: 4px;
+        font-weight: 600;
+        border: 1px solid #165dff;
+        cursor: pointer;
+      }
+
+      .item-img {
+        margin-top: 12px;
+        height: 160px;
+      }
+
+      .fit-content {
+        width: fit-content;
+      }
+
+      .item-img-list {
+        .img-list-item {
+          margin: 4px 0;
+          position: relative;
+          padding: 8px;
+          border-radius: 4px;
+          transition: all 0.3s ease;
+          background: #fff;
+          border-radius: 4px;
+
+          &.draggable-item {
+            cursor: move;
+
+            &:hover {
+              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+              transform: translateY(-1px);
+            }
+
+            // 当禁用拖拽时，不显示拖拽效果
+            &.sortable-disabled {
+              cursor: default;
+
+              &:hover {
+                box-shadow: none;
+                transform: none;
+              }
+            }
+          }
+
+          .arco-input-wrapper {
+            background: #f2f3f5;
+          }
+
+          .img-drag-handle {
+            top: 0 !important;
+          }
+        }
+
+        .item-img-box {
+          margin-right: 12px;
+          position: relative;
+          width: 133px;
+          height: 100px;
+
+          .item-img-dlete {
+            position: absolute;
+            padding: 8px;
+            font-size: 32px;
+            top: -16px;
+            right: -16px;
+            color: red;
+            cursor: pointer;
+          }
+        }
+
+        .small-img {
+          margin: 0;
+          height: 100px;
+          object-fit: cover;
+        }
+
+        .item-right {
+          padding-top: 24px;
+        }
+      }
+    }
+  }
+
+  .drag-handle {
+    padding: 4px;
+    cursor: grab;
+    padding: 4px;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: #f0f2f5;
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    .drag-icon {
+      font-size: 16px;
+      color: #86909c;
+    }
+  }
+}
+</style>

package/src/components/CustomIframe/type.ts

@@ -0,0 +1,17 @@
+export interface CustomIframeProps {
+  /** 双向绑定的值 */
+  modelValue: any
+}
+
+export interface CustomIframeEmits {
+  (e: 'update:modelValue', value: any): void
+  (e: 'handleDelete', value: string | number): void
+  (e: 'handleCopy', value: any): void
+}
+
+// export type ComponentSlots = {
+//   /** 默认插槽内容 */
+//   default?: (props: { value: string | number }) => VNode[]
+//   /** 头部内容 */
+//   header?: (props: { title: string }) => VNode[]
+// }

package/src/components/CustomSpace/index.ts

@@ -0,0 +1,11 @@
+import type { App, Plugin } from 'vue'
+import CustomSpace from './index.vue'
+
+export default {
+  install: (app: App) => {
+    app.component('CustomSpace', CustomSpace)
+  },
+} satisfies Plugin
+
+export { default as CustomSpace } from './index.vue'
+export type { CustomSpaceProps, CustomSpaceEmits } from './type'

package/src/components/CustomSpace/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <div :id="modelValue?.data?.id" class="custom-space" 
+    :style="{'--desktop-height': modelValue?.data?.desktopHeight + 'px', '--mobile-height': modelValue?.data?.mobileHeight + 'px', '--bg-color': modelValue?.data?.bgColor}"
+    @mouseenter="isHover = true" @mouseleave="isHover = false">
+    <Operate v-if="!modelValue?.readOnly" v-model:show="isHover" @handle-edit="showSetting = true" @handle-delete="handleDelete" @handle-copy="handleCopy"></Operate>
+  </div>
+
+  <Setting v-model:show="showSetting" :data="modelValue"></Setting>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { randomString } from '@/utils/common'
+import Operate from '@/components/Operate/index.vue'
+import Setting from './setting.vue'
+
+// 定义组件名称
+defineOptions({
+  name: 'CustomSpace'
+})
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => {}
+  },
+
+  // 是否预览
+  isPreview: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'handleDelete', 'handleCopy'])
+
+const handleInit = () => {
+  if (props.modelValue && props.modelValue.data) return // 有数据不用初始化
+  const data = {
+    id: props.modelValue?.id || randomString(),
+    type: 'CustomSpace',
+    readOnly: props.modelValue?.readOnly || false,
+    data: {
+      id: '',
+      desktopHeight: '49',
+      mobileHeight: '24',
+      bgColor: ''
+    }
+  }
+  emit('update:modelValue', data)
+} 
+
+const isHover = ref<boolean>(false);
+const showSetting = ref<boolean>(false);
+
+const handleDelete = () => {
+  emit('handleDelete', props.modelValue.id)
+}
+
+const handleCopy = () => {
+  emit('handleCopy', props.modelValue)
+}
+
+handleInit()
+</script>
+
+<style scoped>
+.custom-space {
+  position: relative;
+  width: 100%;
+  height: 160px;
+  height: var(--desktop-height, 0);
+  background-color: transparent;
+  background-color: var(--bg-color, transparent);
+}
+
+@media (max-width: 767.98px) {
+  .custom-space {
+    height: var(--mobile-height, 0);
+  }
+}
+</style>

package/src/components/CustomSpace/setting.vue

@@ -0,0 +1,89 @@
+<template>
+  <a-drawer :width="500" :visible="show" :footer="false" @cancel="handleCancel" unmountOnClose>
+    <template #title>
+      {{data.type}}组件编辑
+    </template>
+    <div class="setting-content">
+      <p class="item-title">背景颜色</p>
+      <a-select v-model="data.bgColor" placeholder="请选择" allow-clear>
+        <a-option value="#ffffff">白色</a-option>
+        <a-option value="#F7F7FA">灰色</a-option>
+      </a-select>
+
+      <p class="item-title">间距设置</p>
+      <a-select v-model="customSpace" placeholder="请选择" @change="handleChange" allow-clear>
+        <a-option :value="1">制表符起始间距(49px,24px)</a-option>
+        <a-option :value="2">部分间距(80px,40px)</a-option>
+        <a-option :value="3">组件间距(32px,40px)</a-option>
+        <a-option :value="4">链接间距(16px,16px)</a-option>
+        <a-option :value="5">页末间距(160px,80px)</a-option>
+      </a-select>
+
+      <p class="item-title">PC高度（单位：px）</p>
+      <a-input v-model="data.data.desktopHeight" disabled />
+
+      <p class="item-title">移动端高度（单位：px）</p>
+      <a-input v-model="data.data.mobileHeight" disabled />
+
+      <p class="item-title">唯一标识</p>
+      <a-input v-model="data.data.id" placeholder="请输入唯一标识" allow-clear />
+    </div>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+
+  data: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+const emit = defineEmits(['update:show']);
+const handleCancel = () => {
+  emit('update:show', false);
+}
+
+const customSpace = ref<number>(1);
+const handleChange = (value: number) => {
+  if (value === 1) {
+    props.data.data.desktopHeight = 49;
+    props.data.data.mobileHeight = 24;
+  } else if (value === 2) {
+    props.data.data.desktopHeight = 80;
+    props.data.data.mobileHeight = 40;
+  } else if (value === 3) {
+    props.data.data.desktopHeight = 32;
+    props.data.data.mobileHeight = 40;
+  } else if (value === 4) {
+    props.data.data.desktopHeight = 16;
+    props.data.data.mobileHeight = 16;
+  } else if (value === 5) {
+    props.data.data.desktopHeight = 160;
+    props.data.data.mobileHeight = 80;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.setting-content {
+  position: relative;
+
+  .item-title {
+    padding: 12px 0 8px 0;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .item-img {
+    margin-top: 12px;
+    height: 160px;
+  }
+}
+</style>

package/src/components/CustomSpace/type.ts

@@ -0,0 +1,10 @@
+export interface CustomSpaceProps {
+  /** 双向绑定的值 */
+  modelValue: any
+}
+
+export interface CustomSpaceEmits {
+  (e: 'update:modelValue', value: any): void
+  (e: 'handleDelete', value: string | number): void
+  (e: 'handleCopy', value: any): void
+}

package/src/components/GalleryList/index.ts

@@ -0,0 +1,12 @@
+
+import type { App, Plugin } from 'vue'
+import GalleryList from './index.vue'
+
+export default {
+  install: (app: App) => {
+    app.component('GalleryList', GalleryList)
+  },
+} satisfies Plugin
+
+export { default as GalleryList } from './index.vue'
+export type { GalleryListProps, GalleryListEmits } from './type'