officialblock 1.0.7 → 1.0.8

package/src/components/HeroSlide/index.vue

@@ -1,161 +1,113 @@
 <template>
-  <div class="hero-slide">
-    <div class="slide-container">
-      <div
-        v-for="(slide, index) in slides"
-        :key="index"
-        class="slide-item"
-        :class="{ active: currentSlide === index }"
-      >
-        <h2>{{ slide.title }}</h2>
-        <p>{{ slide.description }}</p>
-      </div>
-    </div>
-    <div v-if="showIndicators" class="slide-indicators">
-      <span
-        v-for="(_, index) in slides"
-        :key="index"
-        class="indicator"
-        :class="{ active: currentSlide === index }"
-        @click="goToSlide(index)"
-      ></span>
-    </div>
+  <div class="hero-slide has-quick-links is-video-and-image" @mouseenter="isHover = true" @mouseleave="isHover = false">
+    <template v-for="item in modelValue?.data" :key="item.id">
+      <Swiper v-if="item.type === 'Banners'" ref="swiperRef" :data="item.data"></Swiper>
+      <QuickLinks v-if="item.type === 'Links' && item.data.length" :data="item.data"></QuickLinks>
+    </template>
+
+    <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" @updateSwiper="updateSwiper"></Setting>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import type { HeroSlideProps, HeroSlideEmits, SlideItem } from './type'
+import { ref } from 'vue'
+import { randomString } from '@/utils/common'
+import Setting from './setting.vue'
+import Operate from '@/components/Operate/index.vue'
+import QuickLinks from '@/components/QuickLinks/index.vue'
+import Swiper from '@/components/Swiper/index.vue'
 
 // 定义组件名称
 defineOptions({
   name: 'HeroSlide'
 })
 
-const props = withDefaults(defineProps<HeroSlideProps>(), {
-  autoPlayInterval: 3000,
-  showIndicators: true,
-  autoPlay: true
-})
-
-const emit = defineEmits<HeroSlideEmits>()
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => {}
+  },
 
-const currentSlide = ref(0)
-const slides = ref<SlideItem[]>([
-  { title: '轮播图标题 1', description: '这是第一张轮播图的描述内容' },
-  { title: '轮播图标题 2', description: '这是第二张轮播图的描述内容' },
-  { title: '轮播图标题 3', description: '这是第三张轮播图的描述内容' }
-])
+  // 是否预览
+  isPreview: {
+    type: Boolean,
+    default: false
+  }
+})
 
-let autoPlayTimer: number | null = null
+const emit = defineEmits(['update:modelValue', 'handleDelete', 'handleCopy'])
+
+const handleInit = () => {
+  if (props.modelValue && props.modelValue.data) return // 有数据不用初始化
+  const data = {
+    id: props.modelValue?.id || randomString(),
+    type: 'HeroSlide',
+    readOnly: props.modelValue?.readOnly || false,
+    data: [
+      {
+        id: randomString(),
+        type: 'Banners',
+        data: [
+          {
+            id: randomString(),
+            type: 'Image',
+            title: '耀华国际教育学校浙江桐乡',
+            imgSrc: 'https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/high-school-test/home/different_1_optim.png',
+            alt: '',
+            link: 'https://www.baidu.com',
+          },
+          {
+            id: randomString(),
+            type: 'Video',
+            title: '耀华国际教育学校浙江桐乡',
+            imgSrc: 'https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/high-school-test/home/different_1_optim.png',
+            alt: '',
+            link: '',
+            videoSrc: 'https://mvideo.ycyw.com/2e1a9441vodgzp1253458132/a31402d51397757891052265568/SW8B19vOtzMA.mp4'
+          },
+        ]
+      },
+      {
+        id: randomString(),
+        type: 'Links',
+        data: [
+          {
+            id: randomString(),
+            text: '了解更多',
+            url: 'https://www.baidu.com',
+            isExternal: false
+          }
+        ]
+      }
+    ]
+  }
+  emit('update:modelValue', data)
+} 
 
-const goToSlide = (index: number) => {
-  currentSlide.value = index
-  emit('change', index)
-}
+const isHover = ref<boolean>(false);
+const showSetting = ref<boolean>(false);
 
-const nextSlide = () => {
-  currentSlide.value = (currentSlide.value + 1) % slides.value.length
-  emit('change', currentSlide.value)
+const handleDelete = () => {
+  emit('handleDelete', props.modelValue.id)
 }
 
-const startAutoPlay = () => {
-  if (props.autoPlay) {
-    autoPlayTimer = window.setInterval(nextSlide, props.autoPlayInterval)
-  }
+const handleCopy = () => {
+  emit('handleCopy', props.modelValue)
 }
 
-const stopAutoPlay = () => {
-  if (autoPlayTimer) {
-    clearInterval(autoPlayTimer)
-    autoPlayTimer = null
-  }
+const swiperRef = ref<typeof Swiper>()
+const updateSwiper = () => {
+  swiperRef.value?.initSwiper()
 }
 
-onMounted(() => {
-  startAutoPlay()
-})
-
-onUnmounted(() => {
-  stopAutoPlay()
-})
+handleInit()
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .hero-slide {
   position: relative;
-  width: 100%;
-  height: 300px;
   overflow: hidden;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.slide-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.slide-item {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  opacity: 0;
-  transition: opacity 0.5s ease-in-out;
-  text-align: center;
-  padding: 20px;
-  box-sizing: border-box;
-}
-
-.slide-item.active {
-  opacity: 1;
-}
-
-.slide-item h2 {
-  margin: 0 0 16px 0;
-  font-size: 2rem;
-  font-weight: 600;
-}
-
-.slide-item p {
-  margin: 0;
-  font-size: 1.1rem;
-  opacity: 0.9;
-  max-width: 600px;
-}
-
-.slide-indicators {
-  position: absolute;
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 8px;
-}
-
-.indicator {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.5);
-  cursor: pointer;
-  transition: background 0.3s ease;
-}
-
-.indicator.active {
-  background: white;
-}
-
-.indicator:hover {
-  background: rgba(255, 255, 255, 0.8);
 }
 </style>

package/src/components/HeroSlide/setting.vue

@@ -0,0 +1,435 @@
+<template>
+  <a-drawer :width="500" :visible="show" :footer="false" @cancel="handleCancel" unmountOnClose>
+    <template #title>
+      {{data.type}}组件编辑
+    </template>
+    <div class="setting-content">
+      <!-- 子组件属性 -->
+      <div class="setting-body">
+        <div class="setting-item" v-for="item in data.data" :key="item.id">
+          <p class="item-name">{{ item.type }}</p>
+
+          <template v-if="item.type === 'Banners'">
+            <draggable
+              v-model="item.data"
+              :component-data="{
+                tag: 'div',
+                type: 'transition-group',
+                name: !drag ? 'flip-list' : null
+              }"
+              v-bind="bannerDragOptions"
+              :disabled="!shouldShowDragHandle(item.data)"
+              @start="drag = true"
+              @end="drag = false"
+              item-key="id"
+            >
+              <template #item="{ element: banner }">
+                <div
+                  class="item-button draggable-item"
+                  :class="{ 'sortable-disabled': !shouldShowDragHandle(item.data) }"
+                  :key="item.id"
+                >
+                  <div class="btn-group">
+                    <div
+                      v-if="shouldShowDragHandle(item.data)"
+                      class="drag-handle"
+                    >
+                      <icon-drag-arrow class="drag-icon" />
+                    </div>
+                    <icon-delete class="btn-delete" @click="handleDeleteBanner(item.data, item.id)" />
+                  </div>
+                  
+                  <p class="item-name">{{ banner.type }}</p>
+                  <a-input class="mt-2" v-model="banner.title" placeholder="标题" allow-clear />
+                  <a-input class="mt-2" v-model="banner.alt" placeholder="图片alt" allow-clear />
+                  <a-input class="mt-2" v-model="banner.link" placeholder="链接" allow-clear />
+
+                  <template v-if="banner.type === 'Image'">
+                    <img class="item-img" :src="banner.imgSrc" />
+                    <div class="mt-2 flex items-center">
+                      <a-input v-model="banner.imgSrc" placeholder="请输入图片链接" allow-clear />
+                      <a-upload class="fit-content" :show-file-list="false" action="/" />
+                    </div>
+                  </template>
+                  <template v-else>
+                    <video class="item-img" :src="banner.videoSrc" controls></video>
+                    <div class="mt-2 flex items-center">
+                      <a-input v-model="banner.videoSrc" placeholder="请输入视频链接" allow-clear />
+                      <a-upload class="fit-content" :show-file-list="false" action="/" />
+                    </div>
+                    <img class="item-img" :src="banner.imgSrc" />
+                    <div class="mt-2 flex items-center">
+                      <a-input v-model="banner.imgSrc" placeholder="视频封面" allow-clear />
+                      <a-upload class="fit-content" :show-file-list="false" action="/" />
+                    </div>
+                  </template>
+                  <a-checkbox class="mt-2" :model-value="banner.isExternal">是否外部链接</a-checkbox>
+                </div>
+              </template>
+            </draggable>
+            <a-button-group class="mt-2" type="primary">
+              <a-button size="mini" type="outline" @click="handleAddBanner(item.data, 'Image')"><template #icon><icon-plus /></template> 图片 </a-button>
+              <a-button size="mini" type="outline" @click="handleAddBanner(item.data, 'Video')"><template #icon><icon-plus /></template> 视频 </a-button>
+            </a-button-group>
+          </template>
+          
+          <template v-if="item.type === 'Links'"> 
+            <draggable
+              v-model="item.data"
+              :component-data="{
+                tag: 'div',
+                type: 'transition-group',
+                name: !drag ? 'flip-list' : null
+              }"
+              v-bind="linkDragOptions"
+              :disabled="!shouldShowDragHandle(item.data)"
+              @start="drag = true"
+              @end="drag = false"
+              item-key="id"
+            >
+              <template #item="{ element: link }">
+                <div
+                  class="item-button draggable-item"
+                  :class="{ 'sortable-disabled': !shouldShowDragHandle(item.data) }"
+                  :key="link.id"
+                >
+                  <div class="btn-group">
+                    <div
+                      v-if="shouldShowDragHandle(item.data)"
+                      class="drag-handle"
+                    >
+                      <icon-drag-arrow class="drag-icon" />
+                    </div>
+                    <icon-delete class="btn-delete" @click="handleDeleteLink(item.data, link.id)" />
+                  </div>
+                  
+                  <a-link href="link">{{ link.text }}</a-link>
+                  <div class="item-action flex items-center">
+                    <a-input class="action-text" v-model="link.text" placeholder="按钮文本" allow-clear />
+                    <a-input v-model="link.url" placeholder="按钮链接" allow-clear />
+                  </div>
+                  <a-checkbox :model-value="link.isExternal">是否外部链接</a-checkbox>
+                </div>
+              </template>
+            </draggable>
+            <div class="item-add-btn flex items-center" @click="handleAddLink(item.data)">
+              <icon-plus />
+              <span class="btn-text">添加链接</span>
+            </div>
+          </template>
+        </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 bannerDragOptions = computed(() => ({
+  animation: 200,
+  group: 'banners', // banner专用分组
+  disabled: false,
+  ghostClass: 'ghost'
+}))
+
+const linkDragOptions = computed(() => ({
+  animation: 200,
+  group: 'links', // 链接专用分组
+  disabled: false,
+  ghostClass: 'ghost'
+}))
+
+// 检查是否应该显示拖拽图标
+const shouldShowDragHandle = (list: any[]) => {
+  return list && list.length > 1
+}
+
+defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+
+  data: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+const emit = defineEmits(['update:show', 'updateSwiper']);
+
+const handleCancel = () => {
+  emit('update:show', false);
+}
+
+const handleAddBanner = (list: any[], type: string) => {
+  list.push({
+    id: randomString(),
+    type,
+    imgSrc: '',
+    title: '',
+    alt: '',
+    link: '',
+    videoSrc: type === 'Video' ? '' : undefined
+  })
+
+  emit('updateSwiper')
+}
+
+const handleDeleteBanner = (list: any[], id: string) => {
+  list.splice(list.findIndex(item => item.id === id), 1)
+  emit('updateSwiper')
+}
+
+const handleAddLink = (list: any[]) => {
+  list.push({
+    id: randomString(),
+    text: '查看更多',
+    url: undefined,
+    isExternal: false
+  })
+}
+
+const handleDeleteLink = (list: any[], id: string) => {
+  list.splice(list.findIndex(item => item.id === id), 1)
+}
+</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-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/HeroSlide/type.ts

@@ -1,19 +1,10 @@
 export interface HeroSlideProps {
-  /** 自动播放间隔时间（毫秒） */
-  autoPlayInterval?: number
-  /** 是否显示指示器 */
-  showIndicators?: boolean
-  /** 是否启用自动播放 */
-  autoPlay?: boolean
+  /** 双向绑定的值 */
+  modelValue: any
 }
 
 export interface HeroSlideEmits {
-  (e: 'change', index: number): void
-  (e: 'click', index: number): void
-}
-
-export interface SlideItem {
-  title: string
-  description: string
-  image?: string
+  (e: 'update:modelValue', value: any): void
+  (e: 'handleDelete', value: string | number): void
+  (e: 'handleCopy', value: any): void
 }