!345 商城装修

Merge pull request !345 from 疯狂的世界/dev

src/components/DiyEditor/components/mobile/FloatingActionButton/config.ts

@@ -0,0 +1,36 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+// 悬浮按钮属性
+export interface FloatingActionButtonProperty {
+  // 展开方向
+  direction: 'horizontal' | 'vertical'
+  // 是否显示文字
+  showText: boolean
+  // 按钮列表
+  list: FloatingActionButtonItemProperty[]
+}
+
+// 悬浮按钮项属性
+export interface FloatingActionButtonItemProperty {
+  // 图片地址
+  imgUrl: string
+  // 跳转连接
+  url: string
+  // 文字
+  text: string
+  // 文字颜色
+  textColor: string
+}
+
+// 定义组件
+export const component = {
+  id: 'FloatingActionButton',
+  name: '悬浮按钮',
+  icon: 'tabler:float-right',
+  position: 'fixed',
+  property: {
+    direction: 'vertical',
+    showText: true,
+    list: [{ textColor: '#fff' }]
+  }
+} as DiyComponent<FloatingActionButtonProperty>

src/components/DiyEditor/components/mobile/FloatingActionButton/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div
+    :class="[
+      'absolute bottom-32px right-[calc(50%-375px/2+32px)] flex z-12 gap-12px items-center',
+      {
+        'flex-row': property.direction === 'horizontal',
+        'flex-col': property.direction === 'vertical'
+      }
+    ]"
+  >
+    <template v-if="expanded">
+      <div
+        v-for="(item, index) in property.list"
+        :key="index"
+        class="flex flex-col items-center"
+        @click="handleActive(index)"
+      >
+        <el-image :src="item.imgUrl" fit="contain" class="h-27px w-27px">
+          <template #error>
+            <div class="h-full w-full flex items-center justify-center">
+              <Icon icon="ep:picture" :color="item.textColor" />
+            </div>
+          </template>
+        </el-image>
+        <span v-if="property.showText" class="mt-4px text-12px" :style="{ color: item.textColor }">
+          {{ item.text }}
+        </span>
+      </div>
+    </template>
+    <!-- todo: @owen 使用APP主题色 -->
+    <el-button type="primary" size="large" circle @click="handleToggleFab">
+      <Icon icon="ep:plus" :class="['fab-icon', { active: expanded }]" />
+    </el-button>
+  </div>
+  <!-- 模态背景：展开时显示，点击后折叠 -->
+  <div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div>
+</template>
+<script setup lang="ts">
+import { FloatingActionButtonProperty } from './config'
+
+/** 悬浮按钮 */
+defineOptions({ name: 'FloatingActionButton' })
+// 定义属性
+defineProps<{ property: FloatingActionButtonProperty }>()
+
+// 是否展开
+const expanded = ref(true)
+// 处理展开/折叠
+const handleToggleFab = () => {
+  expanded.value = !expanded.value
+}
+</script>
+
+<style scoped lang="scss">
+/* 模态背景 */
+.modal-bg {
+  position: absolute;
+  left: calc(50% - 375px / 2);
+  top: 0;
+  z-index: 11;
+  width: 375px;
+  height: 100%;
+  background-color: rgba(#000000, 0.4);
+}
+
+.fab-icon {
+  transform: rotate(0deg);
+  transition: transform 0.3s;
+
+  &.active {
+    transform: rotate(135deg);
+  }
+}
+</style>

src/components/DiyEditor/components/mobile/FloatingActionButton/property.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-form label-width="80px" :model="formData">
+    <el-card header="按钮配置" class="property-group" shadow="never">
+      <el-form-item label="展开方向" prop="direction">
+        <el-radio-group v-model="formData.direction">
+          <el-radio label="vertical">垂直</el-radio>
+          <el-radio label="horizontal">水平</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="显示文字" prop="showText">
+        <el-switch v-model="formData.showText" />
+      </el-form-item>
+    </el-card>
+    <el-card header="按钮列表" class="property-group" shadow="never">
+      <Draggable v-model="formData.list" :empty-item="{ textColor: '#fff' }">
+        <template #default="{ element, index }">
+          <el-form-item label="图标" :prop="`list[${index}].imgUrl`">
+            <UploadImg v-model="element.imgUrl" height="56px" width="56px" />
+          </el-form-item>
+          <el-form-item label="文字" :prop="`list[${index}].text`">
+            <InputWithColor v-model="element.text" v-model:color="element.textColor" />
+          </el-form-item>
+          <el-form-item label="跳转链接" :prop="`list[${index}].url`">
+            <AppLinkInput v-model="element.url" />
+          </el-form-item>
+        </template>
+      </Draggable>
+    </el-card>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { FloatingActionButtonProperty } from './config'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+
+// 悬浮按钮属性面板
+defineOptions({ name: 'FloatingActionButtonProperty' })
+
+const props = defineProps<{ modelValue: FloatingActionButtonProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+</script>
+
+<style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/Popover/config.ts

@@ -0,0 +1,26 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+/** 弹窗广告属性 */
+export interface PopoverProperty {
+  list: PopoverItemProperty[]
+}
+
+export interface PopoverItemProperty {
+  // 图片地址
+  imgUrl: string
+  // 跳转连接
+  url: string
+  // 显示类型：仅显示一次、每次启动都会显示
+  showType: 'once' | 'always'
+}
+
+// 定义组件
+export const component = {
+  id: 'Popover',
+  name: '弹窗广告',
+  icon: 'carbon:popup',
+  position: 'fixed',
+  property: {
+    list: [{ showType: 'once' }]
+  }
+} as DiyComponent<PopoverProperty>

src/components/DiyEditor/components/mobile/Popover/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div
+    v-for="(item, index) in property.list"
+    :key="index"
+    class="absolute bottom-50% right-50% h-454px w-292px border-1px border-gray border-rounded-4px border-solid bg-white p-1px"
+    :style="{
+      zIndex: 100 + index + (activeIndex === index ? 100 : 0),
+      marginRight: `${-146 - index * 20}px`,
+      marginBottom: `${-227 - index * 20}px`
+    }"
+    @click="handleActive(index)"
+  >
+    <el-image :src="item.imgUrl" fit="contain" class="h-full w-full">
+      <template #error>
+        <div class="h-full w-full flex items-center justify-center">
+          <Icon icon="ep:picture" />
+        </div>
+      </template>
+    </el-image>
+    <div class="absolute right-1 top-1 text-12px">{{ index + 1 }}</div>
+  </div>
+</template>
+<script setup lang="ts">
+import { PopoverProperty } from './config'
+
+/** 弹窗广告 */
+defineOptions({ name: 'Popover' })
+// 定义属性
+defineProps<{ property: PopoverProperty }>()
+
+// 处理选中
+const activeIndex = ref(0)
+const handleActive = (index: number) => {
+  activeIndex.value = index
+}
+</script>
+
+<style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/Popover/property.vue

@@ -0,0 +1,38 @@
+<template>
+  <el-form label-width="80px" :model="formData">
+    <Draggable v-model="formData.list" :empty-item="{ showType: 'once' }">
+      <template #default="{ element, index }">
+        <el-form-item label="图片" :prop="`list[${index}].imgUrl`">
+          <UploadImg v-model="element.imgUrl" height="56px" width="56px" />
+        </el-form-item>
+        <el-form-item label="跳转链接" :prop="`list[${index}].url`">
+          <AppLinkInput v-model="element.url" />
+        </el-form-item>
+        <el-form-item label="显示次数" :prop="`list[${index}].showType`">
+          <el-radio-group v-model="element.showType">
+            <el-tooltip content="只显示一次，下次打开时不显示" placement="bottom">
+              <el-radio label="once">一次</el-radio>
+            </el-tooltip>
+            <el-tooltip content="每次打开时都会显示" placement="bottom">
+              <el-radio label="always">不限</el-radio>
+            </el-tooltip>
+          </el-radio-group>
+        </el-form-item>
+      </template>
+    </Draggable>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { PopoverProperty } from './config'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+
+// 弹窗广告属性面板
+defineOptions({ name: 'PopoverProperty' })
+
+const props = defineProps<{ modelValue: PopoverProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+</script>
+
+<style scoped lang="scss"></style>

src/components/DiyEditor/index.vue

@@ -47,6 +47,18 @@
             class="cursor-pointer!"
           />
         </div>
+        <!-- 绝对定位的组件：例如 弹窗、浮动按钮等 -->
+        <div
+          v-for="(component, index) in pageComponents"
+          :key="index"
+          @click="handleComponentSelected(component, index)"
+        >
+          <component
+            v-if="component.position === 'fixed' && selectedComponent?.uid === component.uid"
+            :is="component.id"
+            :property="component.property"
+          />
+        </div>
         <!-- 手机页面编辑区域 -->
         <el-scrollbar
           height="100%"
@@ -70,6 +82,7 @@
           >
             <template #item="{ element, index }">
               <ComponentContainer
+                v-if="!element.position || element.position === 'center'"
                 :component="element"
                 :active="selectedComponentIndex === index"
                 :can-move-up="index > 0"
@@ -91,6 +104,33 @@
             @click="handleTabBarSelected"
           />
         </div>
+        <!-- 固定布局的组件 操作按钮区 -->
+        <div class="fixed-component-action-group">
+          <el-tag
+            v-if="showPageConfig"
+            size="large"
+            :effect="selectedComponent?.uid === pageConfigComponent.uid ? 'dark' : 'plain'"
+            :type="selectedComponent?.uid === pageConfigComponent.uid ? '' : 'info'"
+            @click="handleComponentSelected(pageConfigComponent)"
+          >
+            <Icon :icon="pageConfigComponent.icon" :size="12" />
+            <span>{{ pageConfigComponent.name }}</span>
+          </el-tag>
+          <template v-for="(component, index) in pageComponents" :key="index">
+            <el-tag
+              v-if="component.position === 'fixed'"
+              size="large"
+              closable
+              :effect="selectedComponent?.uid === component.uid ? 'dark' : 'plain'"
+              :type="selectedComponent?.uid === component.uid ? '' : 'info'"
+              @click="handleComponentSelected(component)"
+              @close="handleDeleteComponent(index)"
+            >
+              <Icon :icon="component.icon" :size="12" />
+              <span>{{ component.name }}</span>
+            </el-tag>
+          </template>
+        </div>
       </div>
       <!-- 右侧属性面板 -->
       <el-aside class="editor-right" width="350px" v-if="selectedComponent?.property">
@@ -485,6 +525,31 @@ $toolbar-height: 42px;
           }
         }
       }
+
+      /* 固定布局的组件 操作按钮区 */
+      .fixed-component-action-group {
+        position: absolute;
+        top: 0;
+        right: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        :deep(.el-tag) {
+          box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+          border: none;
+          .el-tag__content {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+
+            .el-icon {
+              margin-right: 4px;
+            }
+          }
+        }
+      }
     }
   }
 }

src/components/DiyEditor/util.ts

@@ -13,6 +13,15 @@ export interface DiyComponent<T> {
   name: string
   // 组件图标
   icon: string
+  /*
+   组件位置：
+   top: 固定于手机顶部，例如 顶部的导航栏
+   bottom: 固定于手机底部，例如 底部的菜单导航栏
+   center: 位于手机中心，每个组件占一行，顺序向下排列
+   空：同center
+   fixed: 由组件自己决定位置，如弹窗位于手机中心、浮动按钮一般位于手机右下角
+  */
+  position: 'top' | 'bottom' | 'center' | '' | 'fixed'
   // 组件属性
   property: T
 }
@@ -102,7 +111,15 @@ export const PAGE_LIBS = [
   {
     name: '基础组件',
     extended: true,
-    components: ['SearchBar', 'NoticeBar', 'MenuSwiper', 'MenuGrid', 'MenuList']
+    components: [
+      'SearchBar',
+      'NoticeBar',
+      'MenuSwiper',
+      'MenuGrid',
+      'MenuList',
+      'Popover',
+      'FloatingActionButton'
+    ]
   },
   {
     name: '图文组件',