From edfdee8cc1f3030df613fdddf7a64de7924d69a2 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Sat, 9 Dec 2023 21:33:47 +0800
Subject: [PATCH] =?UTF-8?q?=E8=90=A5=E9=94=80=EF=BC=9A=E9=80=82=E9=85=8D?=
 =?UTF-8?q?=E5=95=86=E5=9F=8E=E8=A3=85=E4=BF=AE=E7=BB=84=E4=BB=B6=E3=80=90?=
 =?UTF-8?q?=E6=82=AC=E6=B5=AE=E6=8C=89=E9=92=AE=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mobile/FloatingActionButton/config.ts     | 36 +++++++++
 .../mobile/FloatingActionButton/index.vue     | 74 +++++++++++++++++++
 .../mobile/FloatingActionButton/property.vue  | 44 +++++++++++
 src/components/DiyEditor/util.ts              | 10 ++-
 4 files changed, 163 insertions(+), 1 deletion(-)
 create mode 100644 src/components/DiyEditor/components/mobile/FloatingActionButton/config.ts
 create mode 100644 src/components/DiyEditor/components/mobile/FloatingActionButton/index.vue
 create mode 100644 src/components/DiyEditor/components/mobile/FloatingActionButton/property.vue

diff --git a/src/components/DiyEditor/components/mobile/FloatingActionButton/config.ts b/src/components/DiyEditor/components/mobile/FloatingActionButton/config.ts
new file mode 100644
index 00000000..fcf129f1
--- /dev/null
+++ b/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>
diff --git a/src/components/DiyEditor/components/mobile/FloatingActionButton/index.vue b/src/components/DiyEditor/components/mobile/FloatingActionButton/index.vue
new file mode 100644
index 00000000..19e42cb6
--- /dev/null
+++ b/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>
diff --git a/src/components/DiyEditor/components/mobile/FloatingActionButton/property.vue b/src/components/DiyEditor/components/mobile/FloatingActionButton/property.vue
new file mode 100644
index 00000000..5db08d0e
--- /dev/null
+++ b/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>
diff --git a/src/components/DiyEditor/util.ts b/src/components/DiyEditor/util.ts
index 5dbe5955..940ece4a 100644
--- a/src/components/DiyEditor/util.ts
+++ b/src/components/DiyEditor/util.ts
@@ -111,7 +111,15 @@ export const PAGE_LIBS = [
   {
     name: '基础组件',
     extended: true,
-    components: ['SearchBar', 'NoticeBar', 'MenuSwiper', 'MenuGrid', 'MenuList', 'Popover']
+    components: [
+      'SearchBar',
+      'NoticeBar',
+      'MenuSwiper',
+      'MenuGrid',
+      'MenuList',
+      'Popover',
+      'FloatingActionButton'
+    ]
   },
   {
     name: '图文组件',