officialblock 1.0.8 → 1.0.9

package/src/components/TabDefault/setting.vue

@@ -0,0 +1,581 @@
+<template>
+  <a-drawer width="50%" :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.width" placeholder="请选择" allow-clear>
+          <a-option value="default">默认</a-option>
+          <a-option value="small">小</a-option>
+          <a-option value="medium">中</a-option>
+          <a-option value="max">大</a-option>
+        </a-select>
+      </div>
+
+      <div class="setting-header flex items-center">
+        <span class="header-title">组件背景</span>
+        <a-select v-model="data.background" placeholder="请选择" allow-clear>
+          <a-option value="white">白色</a-option>
+          <a-option value="grey">灰色</a-option>
+        </a-select>
+      </div>
+
+      <div class="setting-header flex items-center">
+        <span class="header-title">居中</span>
+        <a-select v-model="data.isCenter" placeholder="请选择" allow-clear>
+          <a-option value="yes">是</a-option>
+          <a-option value="no">否</a-option>
+        </a-select>
+      </div>
+
+      <!-- 子组件属性 -->
+      <!-- 子组件属性 -->
+      <div class="setting-body">
+        <div class="setting-toolbar">
+          <h4>List</h4>
+          <div class="tools">
+            <a-button type="primary" @click="handleAdd('Video')">
+              <template #icon>
+                <icon-plus />
+              </template>
+              添加 Tab
+            </a-button>
+            <a-button type="primary" @click="handleAdd('Video')">粘贴 Tab</a-button>
+          </div>
+        </div>
+
+        <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="item-header">
+                  <div>
+                    <h5>{{ gallery.name }}</h5>
+                    <span>{{ gallery.key }}</span>
+                  </div>
+
+                  <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)" />
+                    <a-button size="mini" type="primary" @click="handleAdd('Video')">复制 Tab</a-button>
+                  </div>
+                </div>
+
+                <p class="item-title">Tab名称</p>
+                <a-input v-model="gallery.name" placeholder="请输入标题" allow-clear />
+
+                <p class="item-title">Key</p>
+                <a-input v-model="gallery.key" placeholder="请输入key" allow-clear />
+
+                <p>components</p>
+                <div class="components-content">
+                  <PageContent
+                    v-bind:data="gallery.componentsDataJson"
+                    @update="(val) => (gallery.componentsDataJson = val)"
+                  />
+
+                  <!-- <div v-if="gallery.componentsDataJson?.length">
+                    <draggable
+                      v-model="gallery.componentsDataJson"
+                      :component-data="{
+                        tag: 'div',
+                        type: 'transition-group',
+                        name: !drag ? 'flip-list' : null,
+                      }"
+                      v-bind="buttonDragOptions"
+                      :disabled="!shouldShowDragHandle(gallery.componentsDataJson)"
+                      @start="drag = true"
+                      @end="drag = false"
+                      item-key="id"
+                    >
+                      <template #item="{ element: compData }">
+                        <div
+                          class="item-button draggable-item"
+                          :class="{ 'sortable-disabled': !shouldShowDragHandle(gallery.componentsDataJson) }"
+                          :key="compData.id"
+                        >
+                          ceshi
+                        </div>
+                      </template>
+                    </draggable>
+                  </div>
+                  <div v-else style="text-align: center">
+                    <a-button type="primary" @click="handleAdd('Video')">添加组件</a-button>
+                  </div> -->
+                </div>
+
+                <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 RichTextEditor from "@/components/RichTextEditor";
+import { randomString } from "@/utils/common";
+import PageContent from "./components/PageContent.vue";
+
+// 拖拽相关状态
+const drag = ref(false);
+
+// 不同类型的拖拽配置选项
+const galleryDragOptions = computed(() => ({
+  animation: 200,
+  group: "gallerys", // 链接专用分组
+  disabled: false,
+  ghostClass: "ghost",
+}));
+
+// 不同类型的拖拽配置选项
+const dragOptions = computed(() => ({
+  animation: 200,
+  group: "item",
+  disabled: false,
+  ghostClass: "ghost",
+}));
+
+const buttonDragOptions = computed(() => ({
+  animation: 200,
+  group: "buttons", // 按钮专用分组
+  disabled: false,
+  ghostClass: "ghost",
+}));
+
+const linkDragOptions = computed(() => ({
+  animation: 200,
+  group: "links", // 链接专用分组
+  disabled: false,
+  ghostClass: "ghost",
+}));
+
+const categoryDragOptions = computed(() => ({
+  animation: 200,
+  group: "categories", // 分类专用分组
+  disabled: false,
+  ghostClass: "ghost",
+}));
+
+const imageDragOptions = computed(() => ({
+  animation: 200,
+  group: "images", // 图片专用分组
+  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;
+
+  if (type === "Article") {
+    detail.data.push({
+      id: randomString(),
+      type: "Article",
+      title: "",
+      content: "",
+      buttonList: [],
+      linkList: [],
+    });
+  } else if (type === "Contact") {
+    detail.data.push({
+      id: randomString(),
+      type: "Contact",
+      title: "",
+      content: "",
+      categories: [],
+      linkList: [],
+    });
+  } else if (type === "Image") {
+    detail.data.push({
+      id: randomString(),
+      type: "Image",
+      imgSrc: "",
+      caption: "",
+      alt: "",
+      isRound: false,
+    });
+  } else if (type === "ImageList") {
+    detail.data.push({
+      id: randomString(),
+      type: "ImageList",
+      imageList: [],
+    });
+  } else if (type === "Video") {
+    detail.data.push({
+      id: randomString(),
+      type: "Video",
+      videoSrc: "",
+      imgSrc: "",
+    });
+  }
+};
+
+const handleDelete = (id: string) => {
+  props.data.data = props.data.data.filter((item: any) => item.id !== id);
+};
+
+const handleAddButton = (list: any[]) => {
+  list.push({
+    id: randomString(),
+    text: "查看更多",
+    url: undefined,
+    isExternal: false,
+  });
+};
+
+const handleDeleteButton = (list: any[], id: string) => {
+  list.splice(
+    list.findIndex((item) => item.id === id),
+    1
+  );
+};
+
+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
+  );
+};
+
+const handleAddCategory = (list: any[]) => {
+  list.push({
+    id: randomString(),
+    text: "分类",
+  });
+};
+
+const handleDeleteCategory = (list: any[], id: string) => {
+  list.splice(
+    list.findIndex((item) => item.id === id),
+    1
+  );
+};
+
+const handleAddImage = (list: any[]) => {
+  list.push({
+    id: randomString(),
+    src: "",
+  });
+};
+
+const handleDeleteImage = (list: any[], img: string) => {
+  list.splice(
+    list.findIndex((item) => item === img),
+    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;
+    background: #f0f2f5;
+    padding: 8px 12px 16px;
+    border-radius: 8px;
+
+    .setting-toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-bottom: 8px;
+
+      button {
+        margin-left: 8px;
+      }
+    }
+
+    .setting-item {
+      position: relative;
+      margin-bottom: 20px;
+
+      .btn-group {
+        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;
+      }
+
+      .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;
+
+        .item-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+
+        &.draggable-item {
+          margin-bottom: 8px;
+          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;
+            }
+          }
+
+          .components-content {
+            background: #f2f3f5;
+            padding: 8px;
+            border-radius: 4px;
+          }
+        }
+
+        .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/TabDefault/type.ts

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

package/src/components/TableTwo/index.ts

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