officialblock 1.0.6 → 1.0.8

package/src/components/BtnList/setting.vue

@@ -0,0 +1,255 @@
+<template>
+  <a-drawer :width="500" :visible="show" :footer="false" @cancel="handleCancel" unmountOnClose>
+    <template #title>
+      {{data.type}}组件编辑
+    </template>
+    <div class="setting-content">
+      <!-- 组件自身属性 -->
+      <div class="setting-header flex items-center">
+        <span class="header-title">组件宽度</span>
+        <a-select v-model="data.width" placeholder="请选择" allow-clear>
+          <a-option value="">默认</a-option>
+          <a-option value="small">小</a-option>
+          <a-option value="middle">中</a-option>
+          <a-option value="max">大</a-option>
+        </a-select>
+      </div>
+      <div class="setting-header flex items-center">
+        <span class="header-title">组件背景</span>
+        <a-select v-model="data.bgColor" placeholder="请选择" allow-clear>
+          <a-option value="#ffffff">白色</a-option>
+          <a-option value="#F7F7FA">灰色</a-option>
+        </a-select>
+      </div>
+
+      <a-button-group type="primary">
+        <a-button size="mini" @click="handleAdd('')"><template #icon><icon-plus /></template> 默认按钮 </a-button>
+        <a-button size="mini" @click="handleAdd('white')"><template #icon><icon-plus /></template> 白色按钮 </a-button>
+        <a-button size="mini" @click="handleAdd('light')"><template #icon><icon-plus /></template> 亮色按钮 </a-button>
+        <a-button size="mini" @click="handleAdd('blue')"><template #icon><icon-plus /></template> 蓝色按钮 </a-button>
+      </a-button-group>
+
+      <!-- 子组件属性 -->
+      <div class="setting-body">
+        <div class="setting-item">
+          <p class="item-name">按钮</p>
+          <draggable
+            v-model="data.data"
+            :component-data="{
+              tag: 'div',
+              type: 'transition-group',
+              name: !drag ? 'flip-list' : null
+            }"
+            v-bind="buttonDragOptions"
+            :disabled="!shouldShowDragHandle(data.data)"
+            @start="drag = true"
+            @end="drag = false"
+            item-key="id"
+          >
+            <template #item="{ element: button }">
+              <div
+                class="item-button draggable-item"
+                :class="{ 'sortable-disabled': !shouldShowDragHandle(data.data) }"
+                :key="button.id"
+              >
+                <div class="btn-group">
+                  <div
+                    v-if="shouldShowDragHandle(data.data)"
+                    class="drag-handle"
+                  >
+                    <icon-drag-arrow class="drag-icon" />
+                  </div>
+                  <icon-delete class="btn-delete" @click="handleDelete(button.id)" />
+                </div>
+                <a-button type="primary">{{ button.text }}</a-button>
+                <div class="item-action flex items-center">
+                  <a-input class="action-text" v-model="button.text" placeholder="按钮文本" allow-clear />
+                  <a-input v-model="button.url" placeholder="按钮链接" allow-clear />
+                </div>
+                <a-checkbox :model-value="button.isExternal">是否外部链接</a-checkbox>
+              </div>
+            </template>
+          </draggable>
+        </div>
+      </div>
+    </div>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import draggable from 'vuedraggable'
+import { randomString } from '@/utils/common'
+
+// 拖拽相关状态
+const drag = ref(false)
+
+// 不同类型的拖拽配置选项
+const buttonDragOptions = computed(() => ({
+  animation: 200,
+  group: 'buttons', // 按钮专用分组
+  disabled: false,
+  ghostClass: 'ghost'
+}))
+
+// 检查是否应该显示拖拽图标
+const shouldShowDragHandle = (list: any[]) => {
+  return list && list.length > 1
+}
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+
+  data: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+const emit = defineEmits(['update:show']);
+
+const handleCancel = () => {
+  emit('update:show', false);
+}
+
+const handleAdd = (type: string) => {
+  const detail = props.data;
+  detail.data.push({
+    id: randomString(),
+    type,
+    text: '查看更多',
+    url: undefined,
+    isExternal: false
+  })
+}
+
+const handleDelete = (id: string) => {
+  props.data.data = props.data.data.filter((item: any) => item.id !== id)
+}
+</script>
+
+<style lang="scss" scoped>
+.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-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;
+      }
+
+      .item-action {
+        padding: 10px 0;
+
+        .action-text {
+          width: 150px;
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+
+  .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/BtnList/type.ts

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

package/src/components/Button/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="type === 'button'" class="button-primary flex-inline flex-center"  @click="handleButtonClick">
+  <div v-if="type === 'button'" class="button-primary flex-inline flex-center" :class="[hasHoverBg && 'button-hover-bg']"  @click="handleButtonClick">
     <span class="button-text">{{ data.text }}</span>
     <span class="button-icon"></span>
   </div>
@@ -20,6 +20,11 @@ const props = defineProps({
     type: Object,
     default: () => {},
   },
+
+  hasHoverBg: {
+    type: Boolean,
+    default: true
+  },
 })
 
 // TODO: 内部跳转
@@ -40,7 +45,8 @@ const handleButtonClick = () => {
   transition: background-color $transition-normal;
   flex-shrink: 0;
 
-  &::before, &::after { 
+  &::before,
+  &::after {
     content: "";
     width: 6px;
     height: 9px;
@@ -52,22 +58,23 @@ const handleButtonClick = () => {
     background-size: cover;
     background-repeat: no-repeat;
     background-color: hsla(0,0%,100%,0);
-    transition: transform .3s ease-in-out
+    transition: transform .3s ease-in-out;
   }
 
   &::before {
-    transform: translate(-260%,-50%)
+    transform: translate(-260%,-50%);
   }
 
   &::after {
-    transform: translate(-50%,-50%)
+    transform: translate(-50%,-50%);
   }
 }
 
 .link-icon {
   background-color: $primary-color;
 
-  &::before, &::after { 
+  &::before,
+  &::after {
     background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
   }
 }
@@ -100,24 +107,25 @@ const handleButtonClick = () => {
     transition: all $transition-normal;
     z-index: -1;
     -webkit-clip-path: circle(100% at -80% 90%);
-    clip-path: circle(100% at -80% 90%)
+    clip-path: circle(100% at -80% 90%);
   }
 
   &:hover::before {
     -webkit-clip-path: circle(100% at 50% 50%);
-    clip-path: circle(100% at 50% 50%)
+    clip-path: circle(100% at 50% 50%);
   }
 
   &:hover {
     .button-icon:before {
-      transform: translate(-50%,-50%)
+      transform: translate(-50%,-50%);
     }
 
     .button-icon:after {
-      transform: translate(150%,-50%)
+      transform: translate(150%,-50%);
     }
 
-    .button-icon:after, .button-icon:before {
+    .button-icon:after,
+    .button-icon:before {
       background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
       background-position: 50%;
       background-size: cover;
@@ -142,58 +150,62 @@ const handleButtonClick = () => {
     transition: color $transition-normal;
   }
 
-  &::before {
-    background: $button-hover-bg;
+  .button-icon:after,
+  .button-icon:before {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IiMwMDFFNjAiLz4KPC9zdmc+Cgo=) !important;
   }
+}
 
-  .button-icon:after, .button-icon:before {
-    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IiMwMDFFNjAiLz4KPC9zdmc+Cgo=) !important;
+.button-hover-bg {
+  &::before {
+    background: $button-hover-bg;
   }
 }
 
-@media(max-width: 1023.98px) {
+@media (max-width: 1023.98px) {
   .button-primary {
-    padding:11px 15px;
-    min-width: 100px
+    padding: 11px 15px;
+    min-width: 100px;
   }
 }
 
-@media(max-width: 767.98px) {
+@media (max-width: 767.98px) {
   .button-primary {
-    padding:8px 12px;
-    min-width: 80px
+    padding: 8px 12px;
+    min-width: 80px;
   }
 }
 
-@media(max-width: 1023.98px) {
+@media (max-width: 1023.98px) {
   .button-primary {
-    padding:11px 15px;
-    min-width: 100px
+    padding: 11px 15px;
+    min-width: 100px;
   }
 }
 
-@media(max-width: 767.98px) {
+@media (max-width: 767.98px) {
   .button-primary {
-    padding:8px 12px;
-    min-width: 80px
+    padding: 8px 12px;
+    min-width: 80px;
   }
 }
 
-@media(max-width: 767.98px) {
+@media (max-width: 767.98px) {
   .button-icon {
-    width:12px;
+    width: 12px;
     height: 12px;
-    margin-left: 4px
+    margin-left: 4px;
   }
 
-  .button-icon:after, .button-icon:before {
-    width:4.7px;
+  .button-icon:after,
+  .button-icon:before {
+    width: 4.7px;
     height: 6px;
     background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgNCA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAxTDMuMDU3MTQgMy4wNTcxNEwxIDUuMTE0MjkiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
     background-position: 50%;
     background-size: cover;
     background-repeat: no-repeat;
-    background-color: hsla(0,0%,100%,0)
+    background-color: hsla(0,0%,100%,0);
   }
 }
 </style>

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'