officialblock 1.0.8 → 1.1.0

package/src/components/ScrollKeyInfo/setting.vue

@@ -0,0 +1,302 @@
+<template>
+  <a-drawer
+    :width="500"
+    :visible="show"
+    :footer="false"
+    @cancel="handleCancel"
+    unmountOnClose
+  >
+    <template #title> {{ data?.type }}组件编辑 </template>
+    <div class="seting-box">
+      <p class="item-title">标题</p>
+      <a-input v-model="data.title" placeholder="请输入标题" allow-clear />
+
+      <p class="item-title mt-2">内容</p>
+      <RichTextEditor v-model="data.content"></RichTextEditor>
+      <p class="item-title">图片</p>
+      <img class="item-img" :src="paragraph.imgSrc" />
+      <div class="item-uplaod flex items-center">
+        <a-input
+          v-model="paragraph.imgSrc"
+          placeholder="请输入图片链接"
+          allow-clear
+        />
+        <a-upload class="fit-content" :show-file-list="false" action="/" />
+      </div>
+    </div>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+import RichTextEditor from "@/components/RichTextEditor";
+import { randomString } from "@/utils/common";
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+
+  data: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const emit = defineEmits(["update:show"]);
+
+const paragraph = ref({
+  title: "",
+  content: "",
+  imgSrc:
+    "https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg",
+});
+
+const handleCancel = () => {
+  emit("update:show", false);
+};
+</script>
+
+<style lang="scss" scoped>
+.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/ScrollKeyInfo/type.ts

@@ -0,0 +1,17 @@
+export interface ScrollKeyInfoProps {
+  /** 双向绑定的值 */
+  modelValue: any
+}
+
+export interface ScrollKeyInfoEmits {
+  (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/TabDefault/components/ComponentSelector/compsData.js

@@ -0,0 +1,143 @@
+export const compJsonData = [
+  {
+    label: "Common",
+    key: "common",
+    image: "",
+    children: [
+      { label: "CustomSpace", key: "custom_space", image: "" },
+      { label: "CustomText", key: "custom_text", image: "" },
+      { label: "QuoteText", key: "quote_text", image: "" },
+      { label: "ArticleList", key: "article_list", image: "" },
+      { label: "ArticleListPureText", key: "article_list_pure_text", image: "" },
+      { label: "Shared Component", key: "shared_component", image: "" },
+    ],
+  },
+  {
+    label: "Media",
+    key: "media",
+    image: "",
+    children: [
+      { label: "MedialmageFull", key: "media_image_full", image: "" },
+      { label: "MedialmageStatic", key: "media_image_static", image: "" },
+      { label: "MediaVideo", key: "media_video", image: "" },
+    ],
+  },
+  {
+    label: "Links",
+    key: "links",
+    image: "",
+    children: [
+      { label: "BtnList", key: "btn_list", image: "" },
+      { label: "LinkList", key: "link_list", image: "" },
+      { label: "DonorLinks", key: "donor_links", image: "" },
+      { label: "GridLinks", key: "grid_links", image: "" },
+      { label: "DetailLink", key: "detail_link", image: "" },
+      { label: "InformationLink", key: "information_link", image: "" },
+    ],
+  },
+  {
+    label: "Headers",
+    key: "headers",
+    image: "",
+    children: [
+      { label: "BannerPage", key: "banner_page", image: "" },
+      { label: "BannerImage", key: "banner_image", image: "" },
+      { label: "MapStatic", key: "map_static", image: "" },
+      { label: "VrTour", key: "vr_tour", image: "" },
+    ],
+  },
+  {
+    label: "Collections",
+    key: "collections",
+    image: "",
+    children: [
+      { label: "HeroSlide", key: "hero_slide", image: "" },
+      { label: "AccordionText", key: "accordion_text", image: "" },
+      { label: "CardCarousel (Profiles)", key: "card_carousel_profiles", image: "" },
+      { label: "CardCarouselMultiRow (Profiles)", key: "card_carousel_multi_row_profiles", image: "" },
+      { label: "CardList (Circle)", key: "card_list_circle", image: "" },
+      { label: "CardList (Programme)", key: "card_list_programme", image: "" },
+      { label: "CardList (School)", key: "card_list_school", image: "" },
+      { label: "CardShowcaseProfile", key: "card_showcase_profile", image: "" },
+      { label: "CarouselLogo", key: "carousel_logo", image: "" },
+      { label: "Resources", key: "resources", image: "" },
+      { label: "ResourcesTwo", key: "resources_two", image: "" },
+      { label: "Process", key: "process", image: "" },
+      { label: "TableTwo", key: "table_two", image: "" },
+      { label: "GalleryList (Default)", key: "gallery_list_default", image: "" },
+      { label: "GalleryList (Caption)", key: "gallery_list_caption", image: "" },
+      { label: "GalleryList (Caption - Round)", key: "gallery_list_caption_round", image: "" },
+      { label: "GalleryList (Timeline - One Column)", key: "gallery_list_timeline_one_column", image: "" },
+      { label: "GalleryList (Timeline - Two Columns)", key: "gallery_list_timeline_two_columns", image: "" },
+      { label: "TabDefault", key: "tab_default", image: "" },
+      { label: "TabTimeline", key: "tab_timeline", image: "" },
+      { label: "Disc", key: "disc", image: "" },
+      { label: "BasicCollapse", key: "basic_collapse", image: "" },
+      { label: "TableCollapse", key: "table_collapse", image: "" },
+      { label: "MediaLogo", key: "media_logo", image: "" },
+      { label: "CollapseCustom", key: "collapse_custom", image: "" },
+      { label: "ScrollKeyInfo", key: "scroll_key_info", image: "" },
+      { label: "CardCarouselMultiRow (Articles)", key: "card_carousel_multi_row_articles", image: "" },
+      { label: "Publications", key: "publications", image: "" },
+    ],
+  },
+  {
+    label: "Contact Information",
+    key: "contact_information",
+    image: "",
+    children: [
+      { label: "ContactUsInfo", key: "contact_us_info", image: "" },
+      { label: "ContactUsList", key: "contact_us_list", image: "" },
+    ],
+  },
+  {
+    label: "Sections",
+    key: "sections",
+    image: "",
+    children: [
+      { label: "Sections (Pages, updating URL)", key: "sections_pages_updating_url", image: "" },
+      { label: "Sections (Logos, not updating URL)", key: "sections_logos_not_updating_url", image: "" },
+    ],
+  },
+  {
+    label: "Others",
+    key: "others",
+    image: "",
+    children: [
+      { label: "Articleitem", key: "article_item", image: "" },
+      { label: "CountDown", key: "count_down", image: "" },
+      { label: "Customlframe", key: "custom_iframe", image: "" },
+      { label: "TheHistoryCarousel", key: "the_history_carousel", image: "" },
+      { label: "TimelineStory", key: "timeline_story", image: "" },
+      { label: "RegisterForm (Event)", key: "register_form_event", image: "" },
+    ],
+  },
+  {
+    label: "YCYW 90th",
+    key: "ycyw_90th",
+    image: "",
+    children: [
+      { label: "BackgroundWrapper", key: "background_wrapper", image: "" },
+      { label: "BannerQuote", key: "banner_quote", image: "" },
+      { label: "BannerlmageWithLink", key: "banner_image_with_link", image: "" },
+      { label: "BlessingMessage", key: "blessing_message", image: "" },
+      { label: "BlessingSlider", key: "blessing_slider", image: "" },
+      { label: "GalleryBlock", key: "gallery_block", image: "" },
+      { label: "RibbonBlock", key: "ribbon_block", image: "" },
+    ],
+  },
+  {
+    label: "API-related Components",
+    key: "api_related_components",
+    image: "",
+    children: [
+      { label: "NewsList", key: "news_list", image: "" },
+      { label: "ExploreLinks", key: "explore_links", image: "" },
+      { label: "CardShowcase", key: "card_showcase", image: "" },
+      { label: "CardCarousel (Articles)", key: "card_carousel_articles", image: "" },
+      { label: "CardCarouselMultiRow (Publications)", key: "card_carousel_multi_row_publications", image: "" },
+      { label: "Alumni Community List", key: "alumni_community_list", image: "" },
+      { label: "School Layout", key: "school_layout", image: "" },
+    ],
+  },
+];

package/src/components/TabDefault/components/ComponentSelector/index.vue

@@ -0,0 +1,188 @@
+<template>
+  <a-modal v-model:visible="visible" title="添加组件" width="90%" :footer="false">
+    <a-layout class="component-library-container" style="display: flex">
+      <!-- 左侧导航栏 -->
+      <a-layout-sider :width="240" :style="{ background: '#fff', boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }">
+        <div class="search-box">
+          <a-input-search placeholder="Search components..." />
+        </div>
+        <a-menu v-model:selected-keys="selectedKeys" :style="{ height: '100%', borderRight: 0 }">
+          <a-menu-item v-for="item in menuData" :key="item.key">
+            {{ item.label }}
+          </a-menu-item>
+        </a-menu>
+      </a-layout-sider>
+
+      <!-- 右侧内容区 -->
+      <a-layout-content :style="{ padding: '24px 40px 24px 24px', background: '#f5f5f5' }">
+        <div class="component-section">
+          <h2 class="section-title">{{ currentSection.label }}</h2>
+          <p class="section-description">{{ currentSection.description }}</p>
+
+          <div class="component-grid">
+            <div
+              v-for="(component, index) in currentComponents"
+              :key="index"
+              class="component-card"
+              @click="selectComponent(component)"
+            >
+              <div class="thumbnail-placeholder">
+                <!-- 这里应该是实际缩略图，示例使用占位色块 -->
+                <div class="thumbnail-color" :style="{ backgroundColor: getRandomColor() }">
+                  <!-- <component :is="getComponetnBytype(component.label)" v-model:model-value="componentValues[component.label]" /> -->
+                  <!-- <ArticleList v-model:model-value="test" /> -->
+                </div>
+              </div>
+              <div class="component-name">{{ component.label }}</div>
+            </div>
+          </div>
+        </div>
+      </a-layout-content>
+    </a-layout>
+    <!-- <ArticleList v-model:model-value="test" /> -->
+  </a-modal>
+</template>
+
+<script setup>
+import { reactive, ref, computed, watch } from "vue"; // 添加 reactive 导入
+
+// import * as allPageComponents from "officialblock";
+import { compJsonData } from "./compsData";
+import { randomString } from "@/utils/common";
+
+// 接收 props
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// 定义事件
+const emit = defineEmits(["update:visible", "ok", "cancel"]);
+
+// 初始化组件映射
+// const componentMap = allPageComponents;
+
+// 响应式数据
+const componentValues = reactive({});
+const selectedKeys = ref(["common"]);
+const menuData = ref(compJsonData);
+const currentSection = ref({});
+const currentComponents = computed(() => currentSection.value.children || []);
+
+// 初始化 componentValues
+watch(
+  currentComponents,
+  (newComponents) => {
+    newComponents.forEach((comp) => {
+      if (!componentValues[comp.label]) {
+        componentValues[comp.label] = null;
+      }
+    });
+  },
+  { immediate: true }
+);
+
+// 监听菜单选择
+watch(
+  selectedKeys,
+  (newValue) => {
+    currentSection.value = menuData.value.find((item) => item.key === newValue[0]) || {};
+  },
+  { immediate: true }
+);
+
+// 获取组件方法
+
+// 选择组件
+const selectComponent = (comp) => {
+  debugger;
+  // emit('ok', JSON.parse(JSON.stringify(componentValues[val])))
+  emit("ok", JSON.parse(JSON.stringify({ type: comp.label, id: randomString() })));
+};
+
+// 同步 visible 状态
+const visible = computed({
+  get: () => props.visible,
+  set: (val) => emit("update:visible", val),
+});
+
+// 生成随机颜色用于缩略图占位
+const getRandomColor = () => {
+  const colors = ["#3498db", "#2ecc71", "#e74c3c", "#f1c40f", "#9b59b6", "#1abc9c"];
+  return colors[Math.floor(Math.random() * colors.length)];
+};
+</script>
+
+<style lang="scss" scoped>
+.component-library-container {
+  height: 80vh;
+  background: #f5f5f5;
+}
+
+.search-box {
+  padding: 16px;
+}
+
+.component-section {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.section-title {
+  font-size: 24px;
+  margin-bottom: 8px;
+  color: #1d2129;
+}
+
+.section-description {
+  color: #666;
+  margin-bottom: 24px;
+}
+
+.component-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+}
+
+.component-card {
+  background: #fff;
+  cursor: pointer;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  position: relative;
+  z-index: 1;
+  /* 直接集成悬停效果 */
+  &:hover {
+    transform: scale(1.2);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+    z-index: 2;
+    .thumbnail-placeholder {
+      transform: translateZ(20px);
+    }
+  }
+}
+
+.thumbnail-placeholder {
+  height: 180px;
+  position: relative;
+  overflow: hidden;
+}
+
+.thumbnail-color {
+  width: 100%;
+  height: 100%;
+}
+
+.component-name {
+  padding: 16px;
+  text-align: center;
+  font-weight: 500;
+  color: #333;
+  border-top: 1px solid #eee;
+}
+</style>