officialblock 1.0.8 → 1.1.0

package/src/components/TableTwo/setting.vue

@@ -0,0 +1,558 @@
+<template>
+  <a-drawer
+    :width="500"
+    :visible="show"
+    :footer="false"
+    @cancel="handleCancel"
+    unmountOnClose
+  >
+    <template #title> {{ data?.type }}组件编辑 </template>
+    <div class="seting-box">
+      <div class="part_title">表格头部</div>
+      <div v-if="!data.headers.length">暂无数据</div>
+      <div class="setting-header items-center">
+        <draggable
+          v-model="data.headers"
+          :component-data="{
+            tag: 'div',
+            type: 'transition-group',
+            name: !drag ? 'flip-list' : null,
+          }"
+          v-bind="linkDragOptions"
+          :disabled="false"
+          @start="drag = true"
+          @end="drag = false"
+          item-key="id"
+        >
+          <template #item="{ element: link }">
+            <div class="draggable_box">
+              <!-- <div class="btn-group">
+                <div class="drag-handle">
+                  <icon-drag-arrow class="drag-icon" />
+                </div>
+                <icon-delete class="btn-delete" />
+              </div> -->
+              <div class="drag_top_box">
+                <div @click="toggleCollapse(link)">
+                  <icon-drag-dot style="margin-right: 10px" />{{ link.title }}
+                </div>
+                <div>
+                  <icon-drag-arrow class="icon_drag" />
+                  <icon-delete
+                    class="btn-delete"
+                    @click.stop="handleDelete(link.id)"
+                  />
+                </div>
+              </div>
+              <!-- {{ link }} -->
+              <transition name="collapse">
+                <div v-show="!isCollapsed(link)">
+                  <p class="item-title" style="margin-top: 20px">Title</p>
+                  <a-input
+                    v-model="link.title"
+                    placeholder="请输入标题"
+                    allow-clear
+                  />
+                </div>
+              </transition>
+            </div>
+          </template>
+        </draggable>
+      </div>
+      <a-button type="primary" @click="handleClickAdd">
+        <template #icon>
+          <icon-plus />
+        </template>
+        新增
+      </a-button>
+      <!-- 表格数据 -->
+      <div style="margin-top: 30px" class="part_title">表格行</div>
+      <div v-if="!data.rows.length">暂无数据</div>
+      <div class="setting-header items-center">
+        <draggable
+          v-model="data.rows"
+          :component-data="{
+            tag: 'div',
+            type: 'transition-group',
+            name: !drag ? 'flip-list' : null,
+          }"
+          v-bind="linkDragOptions"
+          :disabled="false"
+          @start="drag = true"
+          @end="drag = false"
+          item-key="id"
+        >
+          <template #item="{ element: link }">
+            <div class="draggable_box">
+              <!-- <div class="btn-group">
+                <div class="drag-handle">
+                  <icon-drag-arrow class="drag-icon" />
+                </div>
+                <icon-delete class="btn-delete" />
+              </div> -->
+              <div class="drag_top_box">
+                <div @click="toggleCollapserow(link)">
+                  <icon-drag-dot style="margin-right: 10px" />{{ link.title }}
+                </div>
+                <div>
+                  <icon-drag-arrow class="icon_drag" />
+                  <icon-delete
+                    class="btn-delete"
+                    @click.stop="handleDeleterows(link.id)"
+                  />
+                </div>
+              </div>
+              <!-- {{ link }} -->
+              <transition name="collapse">
+                <div v-show="!isCollapsedRow(link)">
+                  <p class="item-title" style="margin-top: 20px">Title</p>
+                  <a-input
+                    v-model="link.title"
+                    placeholder="请输入"
+                    allow-clear
+                  />
+                  <p class="item-title" style="margin-top: 20px">First</p>
+                  <a-input
+                    v-model="link.first"
+                    placeholder="请输入"
+                    allow-clear
+                  />
+                  <p class="item-title" style="margin-top: 20px">Second</p>
+                  <a-input
+                    v-model="link.second"
+                    placeholder="请输入"
+                    allow-clear
+                  />
+                  <p class="item-title" style="margin-top: 20px">Third</p>
+                  <a-input
+                    v-model="link.third"
+                    placeholder="请输入"
+                    allow-clear
+                  />
+                  <p class="item-title" style="margin-top: 20px">Forth</p>
+                  <a-input
+                    v-model="link.forth"
+                    placeholder="请输入"
+                    allow-clear
+                  />
+                </div>
+              </transition>
+            </div>
+          </template>
+        </draggable>
+      </div>
+      <a-button type="primary" @click="handleClickAddrows">
+        <template #icon>
+          <icon-plus />
+        </template>
+        新增
+      </a-button>
+    </div>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import draggable from "vuedraggable";
+import { ref, computed, nextTick } from "vue";
+import iconEmailUrl from "@/assets/icon-email.svg";
+import RichTextEditor from "@/components/RichTextEditor";
+import { randomString } from "@/utils/common";
+// 不同类型的拖拽配置选项
+const linkDragOptions = computed(() => ({
+  animation: 200,
+  group: "links", // 链接专用分组
+  disabled: false,
+  ghostClass: "ghost",
+}));
+// 拖拽相关状态
+const drag = ref(false);
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+
+  data: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+// 折叠状态管理 - 使用Set存储已折叠项的ID
+const collapsedItems = ref(new Set());
+const collapsedItemsRow = ref(new Set());
+
+const toggleCollapserow = (item: any) => {
+  if (collapsedItemsRow.value.has(item.id)) {
+    collapsedItemsRow.value.delete(item.id);
+  } else {
+    collapsedItemsRow.value.add(item.id);
+  }
+};
+
+// 切换指定项的折叠状态
+const toggleCollapse = (item: any) => {
+  if (collapsedItems.value.has(item.id)) {
+    collapsedItems.value.delete(item.id);
+  } else {
+    collapsedItems.value.add(item.id);
+  }
+};
+const handleDelete = (id: string) => {
+  props.data.headers = props.data.headers.filter((item: any) => item.id !== id);
+};
+const handleDeleterows = (id: string) => {
+  props.data.rows = props.data.rows.filter((item: any) => item.id !== id);
+};
+
+const handleClickAddrows = () => {
+  props.data.rows.push({
+    title: "请输入",
+    first: "",
+    second: "",
+    third: "",
+    forth: "",
+    id: randomString(),
+  });
+};
+const handleClickAdd = () => {
+  const detail = props.data;
+  detail.headers.push({
+    title: "请输入",
+    id: randomString(),
+  });
+  nextTick(() => {
+    const drawerContent = document.querySelector(".arco-drawer-body");
+    if (drawerContent) {
+      drawerContent.scrollTop = drawerContent.scrollHeight;
+    }
+  });
+};
+
+// 检查指定项是否已折叠
+const isCollapsed = (item: any) => {
+  return collapsedItems.value.has(item.id);
+};
+const isCollapsedRow = (item: any) => {
+  return collapsedItemsRow.value.has(item.id);
+};
+
+const emit = defineEmits(["update:show"]);
+
+const handleCancel = () => {
+  emit("update:show", false);
+};
+
+// 检查是否应该显示拖拽图标
+const shouldShowDragHandle = (list: any[]) => {
+  return list && list.length > 1;
+};
+</script>
+
+<style lang="scss" scoped>
+.part_title {
+  font-size: 15px;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+.icon_drag {
+  margin-right: 15px;
+  cursor: pointer;
+  &:hover {
+    opacity: 0.8;
+  }
+}
+.drag_top_box {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  display: flex;
+  justify-content: space-between;
+  padding: 8px;
+  cursor: pointer;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+
+  &:hover {
+    background-color: #e8e8e8;
+  }
+}
+
+// 折叠动画
+.collapse-enter-active,
+.collapse-leave-active {
+  transition: all 0.3s ease;
+  max-height: 500px;
+  overflow: hidden;
+  opacity: 1;
+}
+
+.collapse-enter-from,
+.collapse-leave-to {
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+
+.draggable_box {
+  margin-bottom: 25px;
+  background: #fff;
+  padding: 10px;
+  position: relative;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  &:hover {
+    transform: translateY(-2px);
+  }
+}
+// :deep(.arco-input-wrapper) {
+//   background-color: #ffffff;
+// }
+.item-title {
+  padding: 12px 0 8px 0;
+  font-size: 14px;
+  font-weight: 600;
+  margin-top: 10px;
+}
+.item-img {
+  height: 100px;
+}
+.seting-box {
+  padding: 20px;
+  background: #f0f2f5;
+  border-radius: 3px;
+  // .arco-input-wrapper {
+  //   background: #ffffff;
+  // }
+}
+.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/TableTwo/type.ts

@@ -0,0 +1,17 @@
+export interface TableTwoProps {
+  /** 双向绑定的值 */
+  modelValue: any
+}
+
+export interface TableTwoEmits {
+  (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[]
+// }

package/src/components/index.ts

@@ -8,6 +8,8 @@ export { default as BtnList } from './BtnList/index.vue'
 export { default as GalleryList } from './GalleryList/index.vue'
 export { default as LinkList } from './LinkLIst/index.vue'
 export { default as QuoteText } from './QuoteText/index.vue'
+export { default as CountDown } from './CountDown/index.vue'
+export { default as CustomIframe } from './CustomIframe/index.vue'
 
 // 导出组件插件
 export { default as ArticleListPlugin } from './ArticleList/index'
@@ -19,6 +21,13 @@ export { default as BtnListPlugin } from './BtnList/index'
 export { default as GalleryListPlugin } from './GalleryList/index'
 export { default as LinkListPlugin } from './LinkLIst/index'
 export { default as QuoteTextPlugin } from './QuoteText/index'
+export { default as CountDownPlugin } from './CountDown/index'
+export { default as CustomIframePlugin } from './CustomIframe/index'
+export { default as BannerImageWithLinkPlugin } from './BannerImageWithLink/index'
+export { default as ContactUsListPlugin } from './ContactUsList/index'
+export { default as TableTwoPlugin } from './TableTwo/index'
+export { default as ScrollKeyInfoPlugin } from './ScrollKeyInfo/index'
+
 
 // 导出类型定义
 export type { ArticleListProps, ArticleListEmits } from './ArticleList/type'
@@ -30,3 +39,11 @@ export type { BtnListProps, BtnListEmits } from './BtnList/type'
 export type { GalleryListProps, GalleryListEmits } from './GalleryList/type'
 export type { LinkListProps, LinkListEmits } from './LinkLIst/type'
 export type { QuoteTextProps, QuoteTextEmits } from './QuoteText/type'
+export type { CountDownProps, CountDownEmits } from './CountDown/type'
+export type { CustomIframeProps, CustomIframeEmits } from './CustomIframe/type'
+export type { BannerImageWithLinkProps, BannerImageWithLinkEmits } from './BannerImageWithLink/type'
+export type { ContactUsListProps, ContactUsListEmits } from './ContactUsList/type'
+export type { TableTwoProps, TableTwoEmits } from './TableTwo/type'
+export type { ScrollKeyInfoProps, ScrollKeyInfoEmits } from './ScrollKeyInfo/type'
+
+

package/src/styles/component-isolation.scss

@@ -4,7 +4,8 @@
  */
 
 // 导入样式隔离 mixins
-@import './mixins/style-isolation.scss';
+// @import './mixins/style-isolation.scss';
+@use './mixins/style-isolation.scss' as *;
 
 // 创建一个组件隔离容器
 .component-isolation {