officialblock 1.0.6 → 1.0.8

package/src/components/GalleryList/index.vue

@@ -0,0 +1,311 @@
+<template>
+  <div class="gallery-list" @mouseenter="isHover = true" @mouseleave="isHover = false">
+    <div class="gallery-container gallery-caption container-content" :style="{backgroundColor: modelValue?.bgColor}">
+      <a-row class="caption-row">
+        <a-col v-for="item in modelValue?.data" :key="item.id" :sm="{span: 24 / modelValue?.mobileCol}" :md="{span: 24 / modelValue?.desktopCol}">
+          <div class="gallery-caption" :class="[item.url && 'has-url', item.profile && 'has-profile']" @click="handleClick(item)">
+            <div class="gallery-caption__img">
+              <img :src="item.imgSrc" :alt="item.alt">
+            </div>
+            <div class="gallery-caption__title tx-subtitle text-blue text-center mt-3 mt-md-4 px-3">{{ item.title }}</div>
+            <div v-if="item.text" class="tx-body text-teal-darkest text-center mt-2 mt-md-3 mb-3">{{ item.text }}</div>
+          </div>
+        </a-col>
+      </a-row>
+    </div> 
+
+    <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>
+  <ProfileModel v-model:show="showProfile" :data="profileData"></ProfileModel>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { randomString } from '@/utils/common'
+import Setting from './setting.vue'
+import Operate from '@/components/Operate/index.vue'
+import ProfileModel from '@/components/Profile/modal.vue'
+
+// 定义组件名称
+defineOptions({
+  name: 'GalleryList'
+})
+
+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: 'GalleryList',
+    readOnly: props.modelValue?.readOnly || false,
+    bgColor: '',
+    desktopCol: 4,
+    mobileCol: 2,
+    data: [
+      {
+        id: randomString(),
+        type: 'GalleryListItem',
+        title: '耀华国际教育学校浙江桐乡',
+        text: '123',
+        imgSrc: 'https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/high-school-test/home/different_1_optim.png',
+        alt: '',
+        url: 'https://www.baidu.com',
+      },
+      {
+        id: randomString(),
+        type: 'GalleryListProfile',
+        title: '耀华国际教育学校浙江桐乡',
+        text: '123',
+        imgSrc: 'https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/high-school-test/home/different_1_optim.png',
+        alt: '',
+        url: '',
+        profile: {
+          title: '耀华国际教育学校浙江桐乡',
+          subTitle: '耀华国际教育学校浙江桐乡',
+          name: '耀华国际教育学校浙江桐乡',
+          label: '123',
+          imgSrc: 'https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg',
+          alt: '',
+          buttonList: {
+            id: randomString(),
+            type: 'BtnList',
+            readOnly: true,
+            width: '',
+            bgColor: '',
+            data: [
+              {
+                id: randomString(),
+                type: 'white',
+                text: '了解更多',
+                url: 'https://www.baidu.com',
+                isExternal: false
+              },
+              {
+                id: randomString(),
+                type: 'light',
+                text: '了解更多',
+                url: 'https://www.baidu.com',
+                isExternal: false
+              }
+            ]
+          },
+          paragraphs: [{
+            id: randomString(),
+            title: '123',
+            content: '123'
+          }]
+        }
+      },
+    ]
+  }
+  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)
+}
+
+const showProfile = ref<boolean>(false)
+const profileData = ref<any>({})
+const handleClick = (item: any) => {
+ if (item.type !== 'GalleryListProfile') return 
+  profileData.value = item.profile
+  showProfile.value = true
+}
+
+handleInit()
+</script>
+
+<style lang="scss" scoped>
+.gallery-list {
+  position: relative;
+  width: 100%;
+}
+
+.gallery-list .default-row {
+  --bs-gutter-x: 12px;
+  --bs-gutter-y: 12.79px;
+}
+
+@media (max-width: 767.98px) {
+  .gallery-list .default-row {
+    --bs-gutter-x: 8px;
+    --bs-gutter-y: 8.37px;
+  }
+}
+
+.gallery-list .wide-row {
+  --bs-gutter-y: 12.79px;
+}
+
+@media (max-width: 767.98px) {
+  .gallery-list .wide-row {
+    --bs-gutter-y: 8.37px;
+  }
+}
+
+.gallery-list .caption-row {
+  --bs-gutter-x: 16px;
+  --bs-gutter-y: 24px;
+}
+
+.gallery-list .gallery-container.gallery-four-box,
+.gallery-list .gallery-container.gallery-gallery {
+  padding-left: 0;
+  padding-right: 0;
+  max-width: 1280px;
+}
+
+.gallery-list .gallery-container.gallery-gallery .gallery-row {
+  --bs-gutter-x: 12px;
+  --bs-gutter-y: 12px;
+}
+
+@media (max-width: 767.98px) {
+  .gallery-list .gallery-container.gallery-gallery .gallery-row {
+    --bs-gutter-x: 8px;
+    --bs-gutter-y: 8px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .gallery-list .gallery-container.gallery-caption {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+@media (min-width: 1280px) {
+  .gallery-list .gallery-container.gallery-caption-round {
+    --max-width: clamp(952px, calc(76.27765vw - 24.35393px), 1440px);
+  }
+}
+
+.gallery-list .gallery-container.gallery-caption-round .caption-row {
+  --bs-gutter-x: 18px;
+  --bs-gutter-y: 24px;
+}
+
+@media (max-width: 767.98px) {
+  .gallery-list .gallery-container.gallery-caption-round .caption-row {
+    --bs-gutter-x: 10px;
+    --bs-gutter-y: 13.14px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .gallery-list .gallery-container.gallery-circle {
+    max-width: 1064px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .gallery-list .gallery-container.gallery-timeline,
+  .gallery-list .gallery-container.gallery-timeline-col {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.gallery-list .gallery-container.gallery-timeline-col .row {
+  --bs-gutter-x: 48px;
+  --bs-gutter-y: 24px;
+}
+
+@media (max-width: 767.98px) {
+  .gallery-list .gallery-container.gallery-timeline-col .row {
+    --bs-gutter-x: 24px;
+  }
+}
+
+.gallery-list .gallery-container .gallery-row {
+  --bs-gutter-x: 8px;
+  --bs-gutter-y: 8px;
+}
+
+@media (max-width: 767.98px) {
+  .gallery-list .gallery-container .gallery-row {
+    --bs-gutter-x: 4px;
+    --bs-gutter-y: 4px;
+  }
+}
+
+.gallery-list .row-center {
+  justify-content: center;
+}
+
+.gallery-caption {
+  width: 100%;
+  height: 100%;
+}
+
+.gallery-caption.has-profile {
+  cursor: pointer;
+}
+
+.gallery-caption__img img {
+  width: 100%;
+  height: auto;
+  -o-object-fit: contain;
+  object-fit: contain;
+  transition: transform .3s ease-in-out;
+}
+
+.gallery-caption__title {
+  text-decoration: none;
+  display: block;
+}
+
+.gallery-caption__img {
+  display: block;
+  overflow: hidden;
+}
+
+.gallery-caption .has-url .gallery-caption__img img {
+  &:hover {
+    transform: scale(1.05);
+  }
+}
+
+.arco-row {
+  --bs-gutter-x: 16px;
+  --bs-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(var(--bs-gutter-y)*-1);
+  margin-right: calc(var(--bs-gutter-x)*-0.5);
+  margin-left: calc(var(--bs-gutter-x)*-0.5);
+}
+
+.arco-row > * {
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 100%;
+  padding-right: calc(var(--bs-gutter-x)*0.5);
+  padding-left: calc(var(--bs-gutter-x)*0.5);
+  margin-top: var(--bs-gutter-y);
+}
+</style>

package/src/components/GalleryList/setting.vue

@@ -0,0 +1,268 @@
+<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.bgColor" placeholder="请选择" allow-clear>
+          <a-option value="#ffffff">白色</a-option>
+          <a-option value="#F7F7FA">灰色</a-option>
+        </a-select>
+      </div>
+
+      <div class="setting-header flex items-center">
+        <span class="header-title">pc列数</span>
+        <a-input v-model="data.desktopCol" placeholder="请输入" allow-clear />
+      </div>
+
+      <div class="setting-header flex items-center">
+        <span class="header-title">移动端列数</span>
+        <a-input v-model="data.mobileCol" placeholder="请输入" allow-clear />
+      </div>
+
+      <a-button-group type="primary">
+        <a-button size="mini" @click="handleAdd('GalleryListItem')"><template #icon><icon-plus /></template> 普通项目 </a-button>
+        <a-button size="mini" @click="handleAdd('GalleryListProfile')"><template #icon><icon-plus /></template> 文章项目 </a-button>
+      </a-button-group>
+
+      <!-- 子组件属性 -->
+      <div class="setting-body">
+        <div class="setting-item">
+          <draggable
+            v-model="data.data"
+            :component-data="{
+              tag: 'div',
+              type: 'transition-group',
+              name: !drag ? 'flip-list' : null
+            }"
+            v-bind="galleryDragOptions"
+            :disabled="!shouldShowDragHandle(data.data)"
+            @start="drag = true"
+            @end="drag = false"
+            item-key="id"
+          >
+            <template #item="{ element: gallery }">
+              <div
+                class="item-button draggable-item"
+                :class="{ 'sortable-disabled': !shouldShowDragHandle(data.data) }"
+                :key="gallery.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(gallery.id)" />
+                </div>
+                <p class="item-title">标题</p>
+                <a-input v-model="gallery.title" placeholder="请输入标题" allow-clear />
+                <p class="item-title">文本</p>
+                <a-input v-model="gallery.text" placeholder="请输入文本" allow-clear />
+                <p class="item-title">图片</p>
+                <img class="item-img" :src="gallery.imgSrc" />
+                <div class="item-uplaod flex items-center">
+                  <a-input v-model="gallery.imgSrc" placeholder="请输入图片链接" allow-clear />
+                  <a-upload class="fit-content" :show-file-list="false" action="/" />
+                </div>
+                <a-input class="mt-2" v-model="gallery.alt" placeholder="图片alt" allow-clear />
+                <p class="item-title">网址</p>
+                <a-input v-model="gallery.url" placeholder="请输入网址" allow-clear />
+                <p class="item-title">Profile Information</p>
+                <ProfileSetting v-if="gallery.profile" :data="gallery.profile" :showLogo="false" :canAddParagraph="true"></ProfileSetting>
+              </div>
+            </template>
+          </draggable>
+        </div>
+      </div>
+    </div>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import draggable from 'vuedraggable'
+import ProfileSetting from '@/components/Profile/setting.vue'
+import { randomString } from '@/utils/common'
+
+// 拖拽相关状态
+const drag = ref(false)
+
+// 不同类型的拖拽配置选项
+const galleryDragOptions = computed(() => ({
+  animation: 200,
+  group: 'gallerys', // 链接专用分组
+  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,
+    isLight: 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;
+        }
+      }
+
+      .item-img {
+        height: 100px;
+      }
+    }
+  }
+
+  .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/GalleryList/type.ts

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

package/src/components/HeroSlide/index.ts

@@ -8,4 +8,4 @@ export default {
 } satisfies Plugin
 
 export { default as HeroSlide } from './index.vue'
-export type { HeroSlideProps, HeroSlideEmits, SlideItem } from './type'
+export type { HeroSlideProps, HeroSlideEmits } from './type'