From a4f7a51ba0ca45312212fb7c2954a40069d7a932 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 28 Oct 2025 19:08:39 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90mall=E3=80=91diy=20editor?=
 =?UTF-8?q?=20=E7=9A=84=20floating-action-button=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mobile/floating-action-button/config.ts   | 27 +++++++------------
 .../mobile/floating-action-button/index.vue   | 24 +++++++----------
 .../floating-action-button/property.vue       |  6 ++---
 3 files changed, 23 insertions(+), 34 deletions(-)

diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts
index 22b98581c..d93b1f462 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts
@@ -1,28 +1,21 @@
 import type { DiyComponent } from '../../../util';
 
-// 悬浮按钮属性
+/** 悬浮按钮属性 */
 export interface FloatingActionButtonProperty {
-  // 展开方向
-  direction: 'horizontal' | 'vertical';
-  // 是否显示文字
-  showText: boolean;
-  // 按钮列表
-  list: FloatingActionButtonItemProperty[];
+  direction: 'horizontal' | 'vertical'; // 展开方向
+  showText: boolean; // 是否显示文字
+  list: FloatingActionButtonItemProperty[]; // 按钮列表
 }
 
-// 悬浮按钮项属性
+/** 悬浮按钮项属性 */
 export interface FloatingActionButtonItemProperty {
-  // 图片地址
-  imgUrl: string;
-  // 跳转连接
-  url: string;
-  // 文字
-  text: string;
-  // 文字颜色
-  textColor: string;
+  imgUrl: string; // 图片地址
+  url: string; // 跳转连接
+  text: string; // 文字
+  textColor: string; // 文字颜色
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'FloatingActionButton',
   name: '悬浮按钮',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
index eb6563766..d0c2ae410 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
@@ -5,23 +5,20 @@ import { ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-import { ElImage, ElMessage } from 'element-plus';
+import { ElButton, ElImage } from 'element-plus';
 
 /** 悬浮按钮 */
 defineOptions({ name: 'FloatingActionButton' });
-// 定义属性
+
+/** 定义属性 */
 defineProps<{ property: FloatingActionButtonProperty }>();
 
-// 是否展开
-const expanded = ref(false);
-// 处理展开/折叠
-const handleToggleFab = () => {
-  expanded.value = !expanded.value;
-};
+const expanded = ref(false); // 是否展开
 
-const handleActive = (index: number) => {
-  ElMessage.success(`点击了${index}`);
-};
+/** 处理展开/折叠 */
+function handleToggleFab() {
+  expanded.value = !expanded.value;
+}
 </script>
 <template>
   <div
@@ -38,7 +35,6 @@ const handleActive = (index: number) => {
         v-for="(item, index) in property.list"
         :key="index"
         class="flex flex-col items-center"
-        @click="handleActive(index)"
       >
         <ElImage :src="item.imgUrl" fit="contain" class="h-7 w-7">
           <template #error>
@@ -57,13 +53,13 @@ const handleActive = (index: number) => {
       </div>
     </template>
     <!-- todo: @owen 使用APP主题色 -->
-    <el-button type="primary" size="large" circle @click="handleToggleFab">
+    <ElButton type="primary" size="large" circle @click="handleToggleFab">
       <IconifyIcon
         icon="ep:plus"
         class="fab-icon"
         :class="[{ active: expanded }]"
       />
-    </el-button>
+    </ElButton>
   </div>
   <!-- 模态背景：展开时显示，点击后折叠 -->
   <div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
index d6b0eb40b..d589c86c1 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
@@ -18,11 +18,13 @@ import {
   InputWithColor,
 } from '#/views/mall/promotion/components';
 
-// 悬浮按钮属性面板
+/** 悬浮按钮属性面板 */
 defineOptions({ name: 'FloatingActionButtonProperty' });
 
 const props = defineProps<{ modelValue: FloatingActionButtonProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
@@ -64,5 +66,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </ElCard>
   </ElForm>
 </template>
-
-<style scoped lang="scss"></style>