officialblock 1.0.7 → 1.0.9

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>

package/src/components/TabDefault/components/PageContent.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="page-content">
+    <!-- 判断 pageJsonData 是否有数据 -->
+    <div v-if="pageJsonData && pageJsonData.length > 0">
+      <draggable
+        v-model="pageJsonData"
+        :component-data="{
+          tag: 'div',
+          type: 'transition-group',
+          name: !drag ? 'flip-list' : null,
+        }"
+        v-bind="buttonDragOptions"
+        :disabled="!shouldShowDragHandle(pageJsonData)"
+        @start="drag = true"
+        @end="dragEnd"
+        item-key="id"
+      >
+        <template #item="{ element: component, index }">
+          <div
+            class="item-button draggable-item component-wrapper"
+            :class="{ 'sortable-disabled': !shouldShowDragHandle(pageJsonData) }"
+            :key="component.id"
+          >
+            <component
+              :is="getComponetnBytype(component.type)"
+              :model-value="component"
+              @update:model-value="($event) => updateComponentValue(index, $event)"
+            />
+            <div class="add-btn">
+              <a-button type="primary" @click="addComponent(index)">
+                <template #icon>
+                  <icon-plus />
+                </template>
+                Add Component
+              </a-button>
+            </div>
+          </div>
+        </template>
+      </draggable>
+      <!-- <a-button type="primary" class="add-component-btn" @click="addComponent"> 添加组件 </a-button> -->
+
+      <!-- <div v-for="(component, index) in pageJsonData" :key="component.id" class="page-item">
+        <div class="component-wrapper">
+          <component
+            :is="getComponetnBytype(component.type)"
+            :model-value="component"
+            @update:model-value="($event) => updateComponentValue(index, $event)"
+          />
+          <div class="add-btn">
+            <a-button type="primary" @click="addComponent(index)">
+              <template #icon>
+                <icon-plus />
+              </template>
+              Add Component
+            </a-button>
+          </div>
+        </div>
+      </div> -->
+    </div>
+
+    <div v-else>
+      <!-- 使用 Arco Design 的按钮 -->
+      <a-button type="primary" class="add-component-btn" @click="addComponent"> 添加组件 </a-button>
+    </div>
+
+    <component-selector v-model:visible="visible" @ok="addComponentToPage" />
+  </div>
+</template>
+
+<script setup>
+// import * as allPageComponents from "officialblock";
+import { ref, watch, computed, defineAsyncComponent } from "vue";
+import componentSelector from "./ComponentSelector/index.vue";
+import draggable from "vuedraggable";
+
+// 拖拽相关状态
+const drag = ref(false);
+
+// 接收外部传入的数据
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(["update"]);
+
+// 动态导入components目录下的所有组件
+const modules = import.meta.glob("@/components/*/index.vue", { eager: false });
+
+const componentMap = {};
+
+// 遍历并注册组件
+// 遍历并注册组件，使用文件夹名称作为组件名
+for (const path in modules) {
+  debugger;
+  try {
+    // 正确提取文件夹名称
+    const pathParts = path.split("/");
+    const folderName = pathParts[pathParts.length - 2]; // 文件夹名称
+    console.log(`注册组件: ${folderName} from ${path}`); // 调试信息
+    componentMap[folderName] = defineAsyncComponent(modules[path]);
+  } catch (error) {
+    console.error("组件注册失败:", path, error);
+  }
+}
+const getComponetnBytype = (type) => {
+  debugger;
+  return componentMap[type];
+};
+
+// const componentMap = allPageComponents;
+const visible = ref(false);
+const selectComponentIndex = ref(0);
+
+// 响应式数据
+const pageJsonData = ref([...props.data]);
+
+// 当外部 modelValue 变化时，同步更新本地数据
+watch(
+  () => props.data,
+  (newVal) => {
+    debugger;
+    pageJsonData.value = [...newVal];
+  },
+  { deep: true }
+);
+
+const buttonDragOptions = computed(() => ({
+  animation: 200,
+  group: "buttons", // 按钮专用分组
+  disabled: false,
+  ghostClass: "ghost",
+}));
+
+// 检查是否应该显示拖拽图标
+const shouldShowDragHandle = (list) => {
+  return list && list.length > 1;
+};
+
+// 添加组件的方法
+const addComponent = (index = 0) => {
+  selectComponentIndex.value = index;
+  visible.value = true;
+};
+
+const updateComponentValue = (index, value) => {
+  pageJsonData.value[index] = value;
+  emit("update", [...pageJsonData.value]);
+
+  console.log("组件更新:", pageJsonData.value);
+};
+const dragEnd = () => {
+  drag.value = false;
+  emit("update", [...pageJsonData.value]);
+};
+
+// 弹框添加
+const addComponentToPage = (json) => {
+  visible.value = false; // 手动将新对象转为响应式对象
+  pageJsonData.value.splice(selectComponentIndex.value + 1, 0, json);
+  emit("update", [...pageJsonData.value]);
+};
+</script>
+
+<style lang="scss" scoped>
+.page-content {
+  // height: 100%;
+  min-height: 500px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 30px 0 50px;
+
+  // .page-item {
+  //   min-width: none;
+  //   height: 100%;
+
+  .component-wrapper {
+    position: relative;
+
+    &:hover {
+      border: 2px solid #409eff;
+
+      .add-btn {
+        display: block;
+      }
+    }
+
+    .add-btn {
+      display: none;
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      transform: translate(-50%, 50%);
+    }
+  }
+  // }
+
+  .add-component-btn {
+    padding: 12px 24px;
+    font-size: 16px;
+  }
+}
+</style>