officialblock 1.0.8 → 1.0.9

package/src/components/ArticleList/setting.vue

@@ -1,8 +1,12 @@
 <template>
-  <a-drawer :width="500" :visible="show" :footer="false" @cancel="handleCancel" unmountOnClose>
-    <template #title>
-      {{data.type}}组件编辑
-    </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">
@@ -23,11 +27,21 @@
       </div>
 
       <a-button-group type="primary">
-        <a-button size="mini" @click="handleAdd('Article')"><template #icon><icon-plus /></template> Article </a-button>
-        <a-button size="mini" @click="handleAdd('Contact')"><template #icon><icon-plus /></template> Contact </a-button>
-        <a-button size="mini" @click="handleAdd('Image')"><template #icon><icon-plus /></template> Image </a-button>
-        <a-button size="mini" @click="handleAdd('ImageList')"><template #icon><icon-plus /></template> ImageList </a-button>
-        <a-button size="mini" @click="handleAdd('Video')"><template #icon><icon-plus /></template> Video </a-button>
+        <a-button size="mini" @click="handleAdd('Article')"
+          ><template #icon><icon-plus /></template> Article
+        </a-button>
+        <a-button size="mini" @click="handleAdd('Contact')"
+          ><template #icon><icon-plus /></template> Contact
+        </a-button>
+        <a-button size="mini" @click="handleAdd('Image')"
+          ><template #icon><icon-plus /></template> Image
+        </a-button>
+        <a-button size="mini" @click="handleAdd('ImageList')"
+          ><template #icon><icon-plus /></template> ImageList
+        </a-button>
+        <a-button size="mini" @click="handleAdd('Video')"
+          ><template #icon><icon-plus /></template> Video
+        </a-button>
       </a-button-group>
 
       <!-- 子组件属性 -->
@@ -37,7 +51,7 @@
           :component-data="{
             tag: 'div',
             type: 'transition-group',
-            name: !drag ? 'flip-list' : null
+            name: !drag ? 'flip-list' : null,
           }"
           v-bind="dragOptions"
           @start="drag = true"
@@ -51,12 +65,19 @@
                 <div class="drag-handle">
                   <icon-drag-arrow class="drag-icon" />
                 </div>
-                <icon-delete class="btn-delete" @click="handleDelete(item.id)" />
+                <icon-delete
+                  class="btn-delete"
+                  @click="handleDelete(item.id)"
+                />
               </div>
 
               <template v-if="item.type === 'Article'">
                 <p class="item-title">标题</p>
-                <a-input v-model="item.title" placeholder="请输入标题" allow-clear />
+                <a-input
+                  v-model="item.title"
+                  placeholder="请输入标题"
+                  allow-clear
+                />
 
                 <p class="item-title">内容</p>
                 <RichTextEditor v-model="item.content"></RichTextEditor>
@@ -67,7 +88,7 @@
                   :component-data="{
                     tag: 'div',
                     type: 'transition-group',
-                    name: !drag ? 'flip-list' : null
+                    name: !drag ? 'flip-list' : null,
                   }"
                   v-bind="buttonDragOptions"
                   :disabled="!shouldShowDragHandle(item.buttonList)"
@@ -78,7 +99,11 @@
                   <template #item="{ element: button }">
                     <div
                       class="item-button draggable-item"
-                      :class="{ 'sortable-disabled': !shouldShowDragHandle(item.buttonList) }"
+                      :class="{
+                        'sortable-disabled': !shouldShowDragHandle(
+                          item.buttonList
+                        ),
+                      }"
                       :key="button.id"
                     >
                       <div class="btn-group">
@@ -88,18 +113,37 @@
                         >
                           <icon-drag-arrow class="drag-icon" />
                         </div>
-                        <icon-delete class="btn-delete" @click="handleDeleteButton(item.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">
-                        <a-input class="action-text" v-model="button.text" placeholder="按钮文本" allow-clear />
-                        <a-input v-model="button.url" placeholder="按钮链接" allow-clear />
+                        <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>
+                      <a-checkbox :model-value="button.isExternal"
+                        >是否外部链接</a-checkbox
+                      >
                     </div>
                   </template>
                 </draggable>
-                <div class="item-add-btn flex items-center" @click="handleAddButton(item.buttonList)">
+                <div
+                  class="item-add-btn flex items-center"
+                  @click="handleAddButton(item.buttonList)"
+                >
                   <icon-plus />
                   <span class="btn-text">添加按钮</span>
                 </div>
@@ -110,7 +154,7 @@
                   :component-data="{
                     tag: 'div',
                     type: 'transition-group',
-                    name: !drag ? 'flip-list' : null
+                    name: !drag ? 'flip-list' : null,
                   }"
                   v-bind="linkDragOptions"
                   :disabled="!shouldShowDragHandle(item.linkList)"
@@ -121,7 +165,11 @@
                   <template #item="{ element: link }">
                     <div
                       class="item-button draggable-item"
-                      :class="{ 'sortable-disabled': !shouldShowDragHandle(item.linkList) }"
+                      :class="{
+                        'sortable-disabled': !shouldShowDragHandle(
+                          item.linkList
+                        ),
+                      }"
                       :key="link.id"
                     >
                       <div class="btn-group">
@@ -131,19 +179,36 @@
                         >
                           <icon-drag-arrow class="drag-icon" />
                         </div>
-                        <icon-delete class="btn-delete" @click="handleDeleteLink(item.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">
-                        <a-input class="action-text" v-model="link.text" placeholder="按钮文本" allow-clear />
-                        <a-input v-model="link.url" placeholder="按钮链接" allow-clear />
+                        <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>
+                      <a-checkbox :model-value="link.isExternal"
+                        >是否外部链接</a-checkbox
+                      >
                     </div>
                   </template>
                 </draggable>
-                <div class="item-add-btn flex items-center" @click="handleAddLink(item.linkList)">
+                <div
+                  class="item-add-btn flex items-center"
+                  @click="handleAddLink(item.linkList)"
+                >
                   <icon-plus />
                   <span class="btn-text">添加链接</span>
                 </div>
@@ -151,7 +216,11 @@
 
               <template v-if="item.type === 'Contact'">
                 <p class="item-title">标题</p>
-                <a-input v-model="item.title" placeholder="请输入标题" allow-clear />
+                <a-input
+                  v-model="item.title"
+                  placeholder="请输入标题"
+                  allow-clear
+                />
 
                 <p class="item-title">内容</p>
                 <RichTextEditor v-model="item.content"></RichTextEditor>
@@ -162,7 +231,7 @@
                   :component-data="{
                     tag: 'div',
                     type: 'transition-group',
-                    name: !drag ? 'flip-list' : null
+                    name: !drag ? 'flip-list' : null,
                   }"
                   v-bind="categoryDragOptions"
                   :disabled="!shouldShowDragHandle(item.categories)"
@@ -173,7 +242,11 @@
                   <template #item="{ element: category }">
                     <div
                       class="item-button draggable-item"
-                      :class="{ 'sortable-disabled': !shouldShowDragHandle(item.categories) }"
+                      :class="{
+                        'sortable-disabled': !shouldShowDragHandle(
+                          item.categories
+                        ),
+                      }"
                       :key="category.id"
                     >
                       <div class="btn-group">
@@ -183,17 +256,34 @@
                         >
                           <icon-drag-arrow class="drag-icon" />
                         </div>
-                        <icon-delete class="btn-delete" @click="handleDeleteCategory(item.categories, category.id)" />
+                        <icon-delete
+                          class="btn-delete"
+                          @click="
+                            handleDeleteCategory(item.categories, category.id)
+                          "
+                        />
                       </div>
-                      <icon-delete class="btn-delete" @click="handleDeleteCategory(item.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 />
+                        <a-input
+                          v-model="category.text"
+                          placeholder="分类名称"
+                          allow-clear
+                        />
                       </div>
                     </div>
                   </template>
                 </draggable>
-                <div class="item-add-btn flex items-center" @click="handleAddCategory(item.categories)">
+                <div
+                  class="item-add-btn flex items-center"
+                  @click="handleAddCategory(item.categories)"
+                >
                   <icon-plus />
                   <span class="btn-text">添加分类</span>
                 </div>
@@ -204,7 +294,7 @@
                   :component-data="{
                     tag: 'div',
                     type: 'transition-group',
-                    name: !drag ? 'flip-list' : null
+                    name: !drag ? 'flip-list' : null,
                   }"
                   v-bind="linkDragOptions"
                   :disabled="!shouldShowDragHandle(item.linkList)"
@@ -215,7 +305,11 @@
                   <template #item="{ element: link }">
                     <div
                       class="item-button draggable-item"
-                      :class="{ 'sortable-disabled': !shouldShowDragHandle(item.linkList) }"
+                      :class="{
+                        'sortable-disabled': !shouldShowDragHandle(
+                          item.linkList
+                        ),
+                      }"
                       :key="link.id"
                     >
                       <div class="btn-group">
@@ -225,18 +319,35 @@
                         >
                           <icon-drag-arrow class="drag-icon" />
                         </div>
-                        <icon-delete class="btn-delete" @click="handleDeleteLink(item.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">
-                        <a-input class="action-text" v-model="link.text" placeholder="按钮文本" allow-clear />
-                        <a-input v-model="link.url" placeholder="按钮链接" allow-clear />
+                        <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>
+                      <a-checkbox :model-value="link.isExternal"
+                        >是否外部链接</a-checkbox
+                      >
                     </div>
                   </template>
                 </draggable>
-                <div class="item-add-btn flex items-center" @click="handleAddLink(item.linkList)">
+                <div
+                  class="item-add-btn flex items-center"
+                  @click="handleAddLink(item.linkList)"
+                >
                   <icon-plus />
                   <span class="btn-text">添加链接</span>
                 </div>
@@ -245,12 +356,32 @@
               <template v-if="item.type === 'Image'">
                 <img class="item-img" :src="item.imgSrc" />
                 <div class="item-uplaod flex items-center">
-                  <a-input v-model="item.imgSrc" placeholder="请输入标题" allow-clear />
-                  <a-upload class="fit-content" :show-file-list="false" action="/" />
+                  <a-input
+                    v-model="item.imgSrc"
+                    placeholder="请输入标题"
+                    allow-clear
+                  />
+                  <a-upload
+                    class="fit-content"
+                    :show-file-list="false"
+                    action="/"
+                  />
                 </div>
-                <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>
+                <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'">
@@ -261,7 +392,7 @@
                     :component-data="{
                       tag: 'div',
                       type: 'transition-group',
-                      name: !drag ? 'flip-list' : null
+                      name: !drag ? 'flip-list' : null,
                     }"
                     v-bind="imageDragOptions"
                     :disabled="!shouldShowDragHandle(item.imageList)"
@@ -272,9 +403,13 @@
                     <template #item="{ element: img }">
                       <div
                         class="img-list-item flex draggable-item"
-                        :class="{ 'sortable-disabled': !shouldShowDragHandle(item.imageList) }"
+                        :class="{
+                          'sortable-disabled': !shouldShowDragHandle(
+                            item.imageList
+                          ),
+                        }"
                         :key="img.id"
-                      > 
+                      >
                         <div class="btn-group">
                           <div
                             v-if="shouldShowDragHandle(item.imageList)"
@@ -282,39 +417,66 @@
                           >
                             <icon-drag-arrow class="drag-icon" />
                           </div>
-                          <icon-delete class="btn-delete" @click="handleDeleteImage(item.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.imageList, img.id)" /> -->
                           <img class="item-img small-img" :src="img.src" />
                         </div>
 
                         <div class="item-right flex-1">
-                          <a-input style="margin-bottom: 12px" v-model="img.src" placeholder="请输入图片路径" allow-clear />
+                          <a-input
+                            style="margin-bottom: 12px"
+                            v-model="img.src"
+                            placeholder="请输入图片路径"
+                            allow-clear
+                          />
                           <a-upload :show-file-list="false" action="/" />
                         </div>
                       </div>
                     </template>
                   </draggable>
                 </div>
-                <div class="item-add-btn flex items-center" @click="handleAddImage(item.imageList)">
+                <div
+                  class="item-add-btn flex items-center"
+                  @click="handleAddImage(item.imageList)"
+                >
                   <icon-plus />
                   <span class="btn-text">添加图片</span>
-                </div>          
+                </div>
               </template>
 
               <template v-if="item.type === 'Video'">
                 <p class="item-title">视频</p>
                 <video class="item-img" :src="item.videoSrc" controls></video>
                 <div class="item-uplaod flex items-center">
-                  <a-input v-model="item.videoSrc" placeholder="请输入视频链接" allow-clear />
-                  <a-upload class="fit-content" :show-file-list="false" action="/" />
+                  <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.imgSrc" />
                 <div class="item-uplaod flex items-center">
-                  <a-input v-model="item.imgSrc" placeholder="视频封面" allow-clear />
-                  <a-upload class="fit-content" :show-file-list="false" action="/" />
+                  <a-input
+                    v-model="item.imgSrc"
+                    placeholder="视频封面"
+                    allow-clear
+                  />
+                  <a-upload
+                    class="fit-content"
+                    :show-file-list="false"
+                    action="/"
+                  />
                 </div>
               </template>
             </div>
@@ -326,168 +488,180 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
-import draggable from 'vuedraggable'
-import RichTextEditor from '@/components/RichTextEditor'
-import { randomString } from '@/utils/common'
+import { ref, computed } from "vue";
+import draggable from "vuedraggable";
+import RichTextEditor from "@/components/RichTextEditor";
+import { randomString } from "@/utils/common";
 
 // 拖拽相关状态
-const drag = ref(false)
+const drag = ref(false);
 
 // 不同类型的拖拽配置选项
 const dragOptions = computed(() => ({
   animation: 200,
-  group: 'item',
+  group: "item",
   disabled: false,
-  ghostClass: 'ghost'
-}))
+  ghostClass: "ghost",
+}));
 
 const buttonDragOptions = computed(() => ({
   animation: 200,
-  group: 'buttons', // 按钮专用分组
+  group: "buttons", // 按钮专用分组
   disabled: false,
-  ghostClass: 'ghost'
-}))
+  ghostClass: "ghost",
+}));
 
 const linkDragOptions = computed(() => ({
   animation: 200,
-  group: 'links', // 链接专用分组
+  group: "links", // 链接专用分组
   disabled: false,
-  ghostClass: 'ghost'
-}))
+  ghostClass: "ghost",
+}));
 
 const categoryDragOptions = computed(() => ({
   animation: 200,
-  group: 'categories', // 分类专用分组
+  group: "categories", // 分类专用分组
   disabled: false,
-  ghostClass: 'ghost'
-}))
+  ghostClass: "ghost",
+}));
 
 const imageDragOptions = computed(() => ({
   animation: 200,
-  group: 'images', // 图片专用分组
+  group: "images", // 图片专用分组
   disabled: false,
-  ghostClass: 'ghost'
-}))
+  ghostClass: "ghost",
+}));
 
 // 检查是否应该显示拖拽图标
 const shouldShowDragHandle = (list: any[]) => {
-  return list && list.length > 1
-}
+  return list && list.length > 1;
+};
 
 const props = defineProps({
   show: {
     type: Boolean,
-    default: false
+    default: false,
   },
 
   data: {
     type: Object,
-    default: () => {}
-  }
-})
+    default: () => {},
+  },
+});
 
-const emit = defineEmits(['update:show']);
+const emit = defineEmits(["update:show"]);
 
 const handleCancel = () => {
-  emit('update:show', false);
-}
+  emit("update:show", false);
+};
 
 const handleAdd = (type: string) => {
   const detail = props.data;
-  if (type === 'Article') {
+  if (type === "Article") {
     detail.data.push({
       id: randomString(),
-      type: 'Article',
-      title: '',
-      content: '',
+      type: "Article",
+      title: "",
+      content: "",
       buttonList: [],
-      linkList: []
-    })
-  } else if (type === 'Contact') {
+      linkList: [],
+    });
+  } else if (type === "Contact") {
     detail.data.push({
       id: randomString(),
-      type: 'Contact',
-      title: '',
-      content: '',
+      type: "Contact",
+      title: "",
+      content: "",
       categories: [],
-      linkList: []
-    })
-  } else if (type === 'Image') {
+      linkList: [],
+    });
+  } else if (type === "Image") {
     detail.data.push({
       id: randomString(),
-      type: 'Image',
-      imgSrc: '',
-      caption: '',
-      alt: '',
-      isRound: false
-    })
-  } else if (type === 'ImageList') {
+      type: "Image",
+      imgSrc: "",
+      caption: "",
+      alt: "",
+      isRound: false,
+    });
+  } else if (type === "ImageList") {
     detail.data.push({
       id: randomString(),
-      type: 'ImageList',
-      imageList: []
-    })
-  } else if (type === 'Video') {
+      type: "ImageList",
+      imageList: [],
+    });
+  } else if (type === "Video") {
     detail.data.push({
       id: randomString(),
-      type: 'Video',
-      videoSrc: '',
-      imgSrc: ''
-    })
+      type: "Video",
+      videoSrc: "",
+      imgSrc: "",
+    });
   }
-}
+};
 
 const handleDelete = (id: string) => {
-  props.data.data = props.data.data.filter((item: any) => item.id !== id)
-}
+  props.data.data = props.data.data.filter((item: any) => item.id !== id);
+};
 
 const handleAddButton = (list: any[]) => {
   list.push({
     id: randomString(),
-    text: '查看更多',
+    text: "查看更多",
     url: undefined,
-    isExternal: false
-  })
-}
+    isExternal: false,
+  });
+};
 
 const handleDeleteButton = (list: any[], id: string) => {
-  list.splice(list.findIndex(item => item.id === id), 1)
-}
+  list.splice(
+    list.findIndex((item) => item.id === id),
+    1
+  );
+};
 
 const handleAddLink = (list: any[]) => {
   list.push({
     id: randomString(),
-    text: '查看更多',
+    text: "查看更多",
     url: undefined,
-    isExternal: false
-  })
-}
+    isExternal: false,
+  });
+};
 
 const handleDeleteLink = (list: any[], id: string) => {
-  list.splice(list.findIndex(item => item.id === id), 1)
-}
+  list.splice(
+    list.findIndex((item) => item.id === id),
+    1
+  );
+};
 
 const handleAddCategory = (list: any[]) => {
   list.push({
     id: randomString(),
-    text: '分类'
-  })
-}
+    text: "分类",
+  });
+};
 
 const handleDeleteCategory = (list: any[], id: string) => {
-  list.splice(list.findIndex(item => item.id === id), 1)
-}
+  list.splice(
+    list.findIndex((item) => item.id === id),
+    1
+  );
+};
 const handleAddImage = (list: any[]) => {
   list.push({
     id: randomString(),
-    src: ''
-  })
-}
+    src: "",
+  });
+};
 
 const handleDeleteImage = (list: any[], img: string) => {
-  list.splice(list.findIndex(item => item === img), 1)
-}
+  list.splice(
+    list.findIndex((item) => item === img),
+    1
+  );
+};
 </script>
 
 <style lang="scss" scoped>
@@ -504,7 +678,7 @@ const handleDeleteImage = (list: any[], img: string) => {
 
   .setting-body {
     margin-top: 12px;
-    
+
     .setting-item {
       position: relative;
       padding: 16px 12px;
@@ -720,4 +894,4 @@ const handleDeleteImage = (list: any[], img: string) => {
     }
   }
 }
-</style>
+</style>