officialblock 1.0.6 → 1.0.8

package/src/components/ArticleList/setting.vue

@@ -56,21 +56,21 @@
 
               <template v-if="item.type === 'Article'">
                 <p class="item-title">标题</p>
-                <a-input v-model="item.data.title" placeholder="请输入标题" allow-clear />
+                <a-input v-model="item.title" placeholder="请输入标题" allow-clear />
 
                 <p class="item-title">内容</p>
-                <RichTextEditor v-model="item.data.content"></RichTextEditor>
+                <RichTextEditor v-model="item.content"></RichTextEditor>
 
                 <p class="item-title">按钮</p>
                 <draggable
-                  v-model="item.data.buttonList"
+                  v-model="item.buttonList"
                   :component-data="{
                     tag: 'div',
                     type: 'transition-group',
                     name: !drag ? 'flip-list' : null
                   }"
                   v-bind="buttonDragOptions"
-                  :disabled="!shouldShowDragHandle(item.data.buttonList)"
+                  :disabled="!shouldShowDragHandle(item.buttonList)"
                   @start="drag = true"
                   @end="drag = false"
                   item-key="id"
@@ -78,17 +78,17 @@
                   <template #item="{ element: button }">
                     <div
                       class="item-button draggable-item"
-                      :class="{ 'sortable-disabled': !shouldShowDragHandle(item.data.buttonList) }"
+                      :class="{ 'sortable-disabled': !shouldShowDragHandle(item.buttonList) }"
                       :key="button.id"
                     >
                       <div class="btn-group">
                         <div
-                          v-if="shouldShowDragHandle(item.data.buttonList)"
+                          v-if="shouldShowDragHandle(item.buttonList)"
                           class="drag-handle"
                         >
                           <icon-drag-arrow class="drag-icon" />
                         </div>
-                        <icon-delete class="btn-delete" @click="handleDeleteButton(item.data.buttonList, button.id)" />
+                        <icon-delete class="btn-delete" @click="handleDeleteButton(item.buttonList, button.id)" />
                       </div>
                       <a-button type="primary">{{ button.text }}</a-button>
                       <div class="item-action flex items-center">
@@ -99,21 +99,21 @@
                     </div>
                   </template>
                 </draggable>
-                <div class="item-add-btn flex items-center" @click="handleAddButton(item.data.buttonList)">
+                <div class="item-add-btn flex items-center" @click="handleAddButton(item.buttonList)">
                   <icon-plus />
                   <span class="btn-text">添加按钮</span>
                 </div>
 
                 <p class="item-title">链接</p>
                 <draggable
-                  v-model="item.data.linkList"
+                  v-model="item.linkList"
                   :component-data="{
                     tag: 'div',
                     type: 'transition-group',
                     name: !drag ? 'flip-list' : null
                   }"
                   v-bind="linkDragOptions"
-                  :disabled="!shouldShowDragHandle(item.data.linkList)"
+                  :disabled="!shouldShowDragHandle(item.linkList)"
                   @start="drag = true"
                   @end="drag = false"
                   item-key="id"
@@ -121,17 +121,17 @@
                   <template #item="{ element: link }">
                     <div
                       class="item-button draggable-item"
-                      :class="{ 'sortable-disabled': !shouldShowDragHandle(item.data.linkList) }"
+                      :class="{ 'sortable-disabled': !shouldShowDragHandle(item.linkList) }"
                       :key="link.id"
                     >
                       <div class="btn-group">
                         <div
-                          v-if="shouldShowDragHandle(item.data.linkList)"
+                          v-if="shouldShowDragHandle(item.linkList)"
                           class="drag-handle"
                         >
                           <icon-drag-arrow class="drag-icon" />
                         </div>
-                        <icon-delete class="btn-delete" @click="handleDeleteLink(item.data.linkList, link.id)" />
+                        <icon-delete class="btn-delete" @click="handleDeleteLink(item.linkList, link.id)" />
                       </div>
                       
                       <a-link href="link">{{ link.text }}</a-link>
@@ -143,7 +143,7 @@
                     </div>
                   </template>
                 </draggable>
-                <div class="item-add-btn flex items-center" @click="handleAddLink(item.data.linkList)">
+                <div class="item-add-btn flex items-center" @click="handleAddLink(item.linkList)">
                   <icon-plus />
                   <span class="btn-text">添加链接</span>
                 </div>
@@ -151,21 +151,21 @@
 
               <template v-if="item.type === 'Contact'">
                 <p class="item-title">标题</p>
-                <a-input v-model="item.data.title" placeholder="请输入标题" allow-clear />
+                <a-input v-model="item.title" placeholder="请输入标题" allow-clear />
 
                 <p class="item-title">内容</p>
-                <RichTextEditor v-model="item.data.content"></RichTextEditor>
+                <RichTextEditor v-model="item.content"></RichTextEditor>
 
                 <p class="item-title">分类</p>
                 <draggable
-                  v-model="item.data.categories"
+                  v-model="item.categories"
                   :component-data="{
                     tag: 'div',
                     type: 'transition-group',
                     name: !drag ? 'flip-list' : null
                   }"
                   v-bind="categoryDragOptions"
-                  :disabled="!shouldShowDragHandle(item.data.categories)"
+                  :disabled="!shouldShowDragHandle(item.categories)"
                   @start="drag = true"
                   @end="drag = false"
                   item-key="id"
@@ -173,19 +173,19 @@
                   <template #item="{ element: category }">
                     <div
                       class="item-button draggable-item"
-                      :class="{ 'sortable-disabled': !shouldShowDragHandle(item.data.categories) }"
+                      :class="{ 'sortable-disabled': !shouldShowDragHandle(item.categories) }"
                       :key="category.id"
                     >
                       <div class="btn-group">
                         <div
-                          v-if="shouldShowDragHandle(item.data.categories)"
+                          v-if="shouldShowDragHandle(item.categories)"
                           class="drag-handle"
                         >
                           <icon-drag-arrow class="drag-icon" />
                         </div>
-                        <icon-delete class="btn-delete" @click="handleDeleteCategory(item.data.categories, category.id)" />
+                        <icon-delete class="btn-delete" @click="handleDeleteCategory(item.categories, category.id)" />
                       </div>
-                      <icon-delete class="btn-delete" @click="handleDeleteCategory(item.data.categories, category.id)" />
+                      <icon-delete class="btn-delete" @click="handleDeleteCategory(item.categories, category.id)" />
                       <a-link href="link">{{ category.text }}</a-link>
                       <div class="item-action flex items-center">
                         <a-input v-model="category.text" placeholder="分类名称" allow-clear />
@@ -193,21 +193,21 @@
                     </div>
                   </template>
                 </draggable>
-                <div class="item-add-btn flex items-center" @click="handleAddCategory(item.data.categories)">
+                <div class="item-add-btn flex items-center" @click="handleAddCategory(item.categories)">
                   <icon-plus />
                   <span class="btn-text">添加分类</span>
                 </div>
 
                 <p class="item-title">链接</p>
                 <draggable
-                  v-model="item.data.linkList"
+                  v-model="item.linkList"
                   :component-data="{
                     tag: 'div',
                     type: 'transition-group',
                     name: !drag ? 'flip-list' : null
                   }"
                   v-bind="linkDragOptions"
-                  :disabled="!shouldShowDragHandle(item.data.linkList)"
+                  :disabled="!shouldShowDragHandle(item.linkList)"
                   @start="drag = true"
                   @end="drag = false"
                   item-key="id"
@@ -215,17 +215,17 @@
                   <template #item="{ element: link }">
                     <div
                       class="item-button draggable-item"
-                      :class="{ 'sortable-disabled': !shouldShowDragHandle(item.data.linkList) }"
+                      :class="{ 'sortable-disabled': !shouldShowDragHandle(item.linkList) }"
                       :key="link.id"
                     >
                       <div class="btn-group">
                         <div
-                          v-if="shouldShowDragHandle(item.data.linkList)"
+                          v-if="shouldShowDragHandle(item.linkList)"
                           class="drag-handle"
                         >
                           <icon-drag-arrow class="drag-icon" />
                         </div>
-                        <icon-delete class="btn-delete" @click="handleDeleteLink(item.data.linkList, link.id)" />
+                        <icon-delete class="btn-delete" @click="handleDeleteLink(item.linkList, link.id)" />
                       </div>
                       <a-link href="link">{{ link.text }}</a-link>
                       <div class="item-action flex items-center">
@@ -236,35 +236,35 @@
                     </div>
                   </template>
                 </draggable>
-                <div class="item-add-btn flex items-center" @click="handleAddLink(item.data.linkList)">
+                <div class="item-add-btn flex items-center" @click="handleAddLink(item.linkList)">
                   <icon-plus />
                   <span class="btn-text">添加链接</span>
                 </div>
               </template>
 
               <template v-if="item.type === 'Image'">
-                <img class="item-img" :src="item.data.imgSrc" />
+                <img class="item-img" :src="item.imgSrc" />
                 <div class="item-uplaod flex items-center">
-                  <a-input v-model="item.data.imgSrc" placeholder="请输入标题" allow-clear />
+                  <a-input v-model="item.imgSrc" placeholder="请输入标题" allow-clear />
                   <a-upload class="fit-content" :show-file-list="false" action="/" />
                 </div>
-                <a-input class="mt-10" v-model="item.data.caption" placeholder="图片描述" allow-clear />
-                <a-input class="mt-10" v-model="item.data.alt" placeholder="图片alt" allow-clear />
-                <a-checkbox class="pt-10" :model-value="item.data.isRound">圆角</a-checkbox>
+                <a-input class="mt-2" v-model="item.caption" placeholder="图片描述" allow-clear />
+                <a-input class="mt-2" v-model="item.alt" placeholder="图片alt" allow-clear />
+                <a-checkbox class="pt-2" :model-value="item.isRound">圆角</a-checkbox>
               </template>
 
               <template v-if="item.type === 'ImageList'">
                 <p class="item-title">图片组</p>
                 <div class="item-img-list">
                   <draggable
-                    v-model="item.data.imageList"
+                    v-model="item.imageList"
                     :component-data="{
                       tag: 'div',
                       type: 'transition-group',
                       name: !drag ? 'flip-list' : null
                     }"
                     v-bind="imageDragOptions"
-                    :disabled="!shouldShowDragHandle(item.data.imageList)"
+                    :disabled="!shouldShowDragHandle(item.imageList)"
                     @start="drag = true"
                     @end="drag = false"
                     item-key="id"
@@ -272,21 +272,21 @@
                     <template #item="{ element: img }">
                       <div
                         class="img-list-item flex draggable-item"
-                        :class="{ 'sortable-disabled': !shouldShowDragHandle(item.data.imageList) }"
+                        :class="{ 'sortable-disabled': !shouldShowDragHandle(item.imageList) }"
                         :key="img.id"
                       > 
                         <div class="btn-group">
                           <div
-                            v-if="shouldShowDragHandle(item.data.imageList)"
+                            v-if="shouldShowDragHandle(item.imageList)"
                             class="drag-handle"
                           >
                             <icon-drag-arrow class="drag-icon" />
                           </div>
-                          <icon-delete class="btn-delete" @click="handleDeleteImage(item.data.imageList, img.id)" />
+                          <icon-delete class="btn-delete" @click="handleDeleteImage(item.imageList, img.id)" />
                         </div>
                         
                         <div class="item-img-box" v-if="img.src">
-                          <!-- <icon-close-circle-fill class="item-img-dlete" @click="handleDeleteImage(item.data.imageList, img.id)" /> -->
+                          <!-- <icon-close-circle-fill class="item-img-dlete" @click="handleDeleteImage(item.imageList, img.id)" /> -->
                           <img class="item-img small-img" :src="img.src" />
                         </div>
 
@@ -298,7 +298,7 @@
                     </template>
                   </draggable>
                 </div>
-                <div class="item-add-btn flex items-center" @click="handleAddImage(item.data.imageList)">
+                <div class="item-add-btn flex items-center" @click="handleAddImage(item.imageList)">
                   <icon-plus />
                   <span class="btn-text">添加图片</span>
                 </div>          
@@ -306,14 +306,14 @@
 
               <template v-if="item.type === 'Video'">
                 <p class="item-title">视频</p>
-                <video class="item-img" :src="item.data.videoSrc" controls></video>
+                <video class="item-img" :src="item.videoSrc" controls></video>
                 <div class="item-uplaod flex items-center">
-                  <a-input v-model="item.data.videoSrc" placeholder="请输入视频链接" allow-clear />
+                  <a-input v-model="item.videoSrc" placeholder="请输入视频链接" allow-clear />
                   <a-upload class="fit-content" :show-file-list="false" action="/" />
                 </div>
-                <img class="item-img" :src="item.data.imgSrc" />
+                <img class="item-img" :src="item.imgSrc" />
                 <div class="item-uplaod flex items-center">
-                  <a-input v-model="item.data.imgSrc" placeholder="视频封面" allow-clear />
+                  <a-input v-model="item.imgSrc" placeholder="视频封面" allow-clear />
                   <a-upload class="fit-content" :show-file-list="false" action="/" />
                 </div>
               </template>
@@ -337,7 +337,7 @@ const drag = ref(false)
 // 不同类型的拖拽配置选项
 const dragOptions = computed(() => ({
   animation: 200,
-  group: 'item', // 按钮专用分组
+  group: 'item',
   disabled: false,
   ghostClass: 'ghost'
 }))
@@ -399,51 +399,41 @@ const handleAdd = (type: string) => {
     detail.data.push({
       id: randomString(),
       type: 'Article',
-      data: {
-        title: '',
-        content: '',
-        buttonList: [],
-        linkList: []
-      }
+      title: '',
+      content: '',
+      buttonList: [],
+      linkList: []
     })
   } else if (type === 'Contact') {
     detail.data.push({
       id: randomString(),
       type: 'Contact',
-      data: {
-        title: '',
-        content: '',
-        categories: [],
-        linkList: []
-      }
+      title: '',
+      content: '',
+      categories: [],
+      linkList: []
     })
   } else if (type === 'Image') {
     detail.data.push({
       id: randomString(),
       type: 'Image',
-      data: {
-        imgSrc: '',
-        caption: '',
-        alt: '',
-        isRound: false
-      }
+      imgSrc: '',
+      caption: '',
+      alt: '',
+      isRound: false
     })
   } else if (type === 'ImageList') {
     detail.data.push({
       id: randomString(),
       type: 'ImageList',
-      data: {
-        imageList: []
-      }
+      imageList: []
     })
   } else if (type === 'Video') {
     detail.data.push({
       id: randomString(),
       type: 'Video',
-      data: {
-        videoSrc: '',
-        imgSrc: ''
-      }
+      videoSrc: '',
+      imgSrc: ''
     })
   }
 }

package/src/components/ArticleList/type.ts

@@ -1,23 +1,17 @@
-import type { VNode } from 'vue';
-
-export interface ComponentProps {
-  /** 控制组件尺寸 */
-  size?: 'small' | 'medium' | 'large'
-  /** 是否禁用状态 */
-  disabled?: boolean
+export interface ArticleListProps {
   /** 双向绑定的值 */
-  modelValue: string | number
+  modelValue: any
 }
 
-export interface ComponentEmits {
-  (e: 'update:modelValue', value: string | number): void
-  (e: 'change', value: string | number): void
-  (e: 'focus', event: FocusEvent): void
+export interface ArticleListEmits {
+  (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[]
-}
+// export type ComponentSlots = {
+//   /** 默认插槽内容 */
+//   default?: (props: { value: string | number }) => VNode[]
+//   /** 头部内容 */
+//   header?: (props: { title: string }) => VNode[]
+// }

package/src/components/BannerImage/index.ts

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

package/src/components/BannerImage/index.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="banner-image" @mouseenter="isHover = true" @mouseleave="isHover = false">
+    <div class="banner-image__image" 
+      :style="{backgroundImage: 'url(' + modelValue?.data?.imgSrc + ')', 'background-position': 'center'}"
+    >
+      <div class="banner-image__title is-zh">
+        {{ modelValue?.data?.title }}
+      </div>
+    </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>
+</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: 'BannerImage'
+})
+
+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: 'BannerImage',
+    readOnly: props.modelValue?.readOnly || false,
+    data: {
+      title: 'About YWIES',
+      imgSrc: 'https://osswebsite-test.cedim.cn/ywies-tx/static-images/about-ywies/01_About_YWIES_1_Header.jpg'
+    }
+  }
+  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 lang="scss" scoped>
+.banner-image {
+  position: relative;
+}
+
+.banner-image__image {
+  height: 340px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-image: linear-gradient(184.08deg,rgba(0,0,0,.427) 21.79%,transparent 96.67%),var(--bg-image);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+@media (max-width: 1279.98px) {
+  .banner-image__image {
+    height: clamp(200px,(100vw - 576px)/5 + 200px,340px);
+  }
+}
+
+@media (max-width: 575.98px) {
+  .banner-image__image {
+    height: 200px;
+  }
+}
+
+.banner-image.has-quick-links {
+  padding-bottom: 38px;
+}
+
+.banner-image__title {
+  font-size: 60px;
+  line-height: 1.166;
+  font-weight: 500;
+  color: #fff;
+  text-shadow: 0 0 10px rgba(130,130,140,.12);
+  padding-top: 166px;
+}
+
+@media (max-width: 1279.98px) {
+  .banner-image__title {
+    padding-top: clamp(106px,(100vw - 576px)/11.73 + 106px,166px);
+  }
+}
+
+@media (max-width: 1023.98px) {
+  .banner-image__title {
+    font-size: 36px;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .banner-image__title {
+    font-size: 40px;
+    font-weight: 500;
+    line-height: 1.2;
+    letter-spacing: .02em;
+    padding-top: 106px;
+  }
+}
+
+@media (max-width: 575.98px) and (max-width: 1023.98px) {
+  .banner-image__title {
+    font-size: 32px;
+    font-weight: 500;
+    line-height: 1.2;
+    letter-spacing: .02em;
+  }
+}
+
+@media (max-width: 575.98px) and (max-width: 767.98px) {
+  .banner-image__title {
+    font-size: 24px;
+    line-height: 1.09;
+  }
+}
+
+.banner-image__title.is-zh {
+  font-weight: 700;
+}
+</style>

package/src/components/BannerImage/setting.vue

@@ -0,0 +1,55 @@
+<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-input v-model="data.data.title" placeholder="请输入标题" allow-clear />
+
+      <p class="item-title">图片</p>
+      <img class="item-img" :src="data?.data?.imgSrc" />
+      <div class="item-uplaod flex items-center">
+        <a-input v-model="data.data.imgSrc" placeholder="请输入图片链接" allow-clear />
+        <a-upload class="fit-content" :show-file-list="false" action="/" />
+      </div>
+    </div>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+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-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/BannerImage/type.ts

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

package/src/components/BannerPage/index.ts

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