From 3081c8f94fda71e77d1bc9ef80d8e398d5694755 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Fri, 15 May 2026 20:01:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=83=E7=B4=A0=E5=BF=AB=E6=8D=B7?=
 =?UTF-8?q?=E6=82=AC=E6=B5=AE=E8=8F=9C=E5=8D=95=E5=8A=9F=E8=83=BD=E5=88=9D?=
 =?UTF-8?q?=E6=AD=A5=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |   7 +-
 .../FloatingToolbar/BorderPanel.vue           | 153 +++++++++++++++++
 .../FloatingToolbar/ChartToolbar.vue          | 103 ++++++++++++
 .../FloatingToolbar/ImageToolbar.vue          | 111 +++++++++++++
 .../FloatingToolbar/LatexToolbar.vue          |  90 ++++++++++
 .../FloatingToolbar/LineToolbar.vue           | 142 ++++++++++++++++
 .../FloatingToolbar/ShapeToolbar.vue          | 102 ++++++++++++
 .../FloatingToolbar/TableToolbar.vue          | 109 +++++++++++++
 .../FloatingToolbar/TextStyleControls.vue     | 154 ++++++++++++++++++
 .../FloatingToolbar/TextToolbar.vue           |  25 +++
 .../FloatingToolbar/index.vue                 |  71 ++++++++
 .../Canvas/ElementFloatLayer/LinkHandler.vue  |  18 +-
 .../Editor/Canvas/ElementFloatLayer/index.vue | 148 ++++++++++++++---
 src/views/Editor/Canvas/index.vue             |   2 +
 14 files changed, 1193 insertions(+), 42 deletions(-)
 create mode 100644 src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/BorderPanel.vue
 create mode 100644 src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/ChartToolbar.vue
 create mode 100644 src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/ImageToolbar.vue
 create mode 100644 src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/LatexToolbar.vue
 create mode 100644 src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/LineToolbar.vue
 create mode 100644 src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/ShapeToolbar.vue
 create mode 100644 src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/TableToolbar.vue
 create mode 100644 src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/TextStyleControls.vue
 create mode 100644 src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/TextToolbar.vue
 create mode 100644 src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/index.vue

diff --git a/components.d.ts b/components.d.ts
index 014f7b33..d8e88b8e 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -116,6 +116,7 @@ declare module 'vue' {
     'IIconParkOutline:rowHeight': typeof import('~icons/icon-park-outline/row-height')['default']
     'IIconParkOutline:screenshotOne': typeof import('~icons/icon-park-outline/screenshot-one')['default']
     'IIconParkOutline:search': typeof import('~icons/icon-park-outline/search')['default']
+    'IIconParkOutline:selected': typeof import('~icons/icon-park-outline/selected')['default']
     'IIconParkOutline:send': typeof import('~icons/icon-park-outline/send')['default']
     'IIconParkOutline:sendToBack': typeof import('~icons/icon-park-outline/send-to-back')['default']
     'IIconParkOutline:sentToBack': typeof import('~icons/icon-park-outline/sent-to-back')['default']
@@ -152,11 +153,5 @@ declare module 'vue' {
     'IIconParkSolid:checkOne': typeof import('~icons/icon-park-solid/check-one')['default']
     'IIconParkSolid:closeOne': typeof import('~icons/icon-park-solid/close-one')['default']
     'IIconParkSolid:info': typeof import('~icons/icon-park-solid/info')['default']
-    'IIconParkTwotone:click': typeof import('~icons/icon-park-twotone/click')['default']
-    'IIconParkTwotone:fileJpg': typeof import('~icons/icon-park-twotone/file-jpg')['default']
-    'IIconParkTwotone:filePdf': typeof import('~icons/icon-park-twotone/file-pdf')['default']
-    'IIconParkTwotone:leftTwo': typeof import('~icons/icon-park-twotone/left-two')['default']
-    'IIconParkTwotone:notes': typeof import('~icons/icon-park-twotone/notes')['default']
-    'IIconParkTwotone:rightTwo': typeof import('~icons/icon-park-twotone/right-two')['default']
   }
 }
diff --git a/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/BorderPanel.vue b/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/BorderPanel.vue
new file mode 100644
index 00000000..d01797c7
--- /dev/null
+++ b/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/BorderPanel.vue
@@ -0,0 +1,153 @@
+<template>
+  <Popover
+    trigger="click"
+    :placement="submenuPlacement === 'top' ? 'top' : 'bottom'"
+    :contentStyle="{ width: '240px' }"
+  >
+    <template #content>
+      <div class="border-popover">
+        <div class="row">
+          <div class="label">边框样式：</div>
+          <SelectCustom class="control">
+            <template #options>
+              <div
+                class="option"
+                v-for="item in lineStyleOptions"
+                :key="item"
+                @click="updateOutline({ style: item })"
+              >
+                <SVGLine :type="item" />
+              </div>
+            </template>
+            <template #label>
+              <SVGLine :type="(outline?.style || 'solid') as LineStyleType" />
+            </template>
+          </SelectCustom>
+        </div>
+        <div class="row">
+          <div class="label">边框颜色：</div>
+          <Popover trigger="click" class="control">
+            <template #content>
+              <ColorPicker :modelValue="outline?.color || '#000'" @update:modelValue="value => updateOutline({ color: value })" />
+            </template>
+            <ColorButton :color="outline?.color || '#000'" />
+          </Popover>
+        </div>
+        <div class="row">
+          <div class="label">边框粗细：</div>
+          <NumberInput
+            class="control"
+            :value="outline?.width || 0"
+            @update:value="value => updateOutline({ width: value })"
+          />
+        </div>
+      </div>
+    </template>
+    <div class="toolbar-btn">
+      <i-icon-park-outline:selected class="icon" />
+      <span>边框</span>
+    </div>
+  </Popover>
+</template>
+
+<script lang="ts" setup>
+import { computed, type Ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useMainStore, useSlidesStore } from '@/store'
+import type { LineStyleType, PPTElementOutline, PPTShapeElement, PPTTableElement } from '@/types/slides'
+import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+
+import SVGLine from '@/views/Editor/Toolbar/common/SVGLine.vue'
+import Popover from '@/components/Popover.vue'
+import ColorButton from '@/components/ColorButton.vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+import NumberInput from '@/components/NumberInput.vue'
+import SelectCustom from '@/components/SelectCustom.vue'
+
+defineProps<{
+  submenuPlacement: 'top' | 'bottom'
+}>()
+
+const slidesStore = useSlidesStore()
+const { theme } = storeToRefs(slidesStore)
+const { handleElement } = storeToRefs(useMainStore())
+
+const handleOutlinedElement = handleElement as Ref<PPTShapeElement | PPTTableElement>
+const outline = computed<PPTElementOutline | undefined>(() => {
+  const el = handleOutlinedElement.value
+  if (!el) return undefined
+  return el.outline
+})
+
+const lineStyleOptions: LineStyleType[] = ['solid', 'dashed', 'dotted']
+
+const { addHistorySnapshot } = useHistorySnapshot()
+
+const updateOutline = (outlineProps: Partial<PPTElementOutline>) => {
+  if (!handleElement.value) return
+  const baseOutline = outline.value || theme.value.outline
+  const newOutline: PPTElementOutline = { ...baseOutline, ...outlineProps }
+  slidesStore.updateElement({ id: handleElement.value.id, props: { outline: newOutline } })
+  addHistorySnapshot()
+}
+</script>
+
+<style lang="scss" scoped>
+.toolbar-btn {
+  min-width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  padding: 0 5px;
+  border: 0;
+  color: $textColor;
+  background-color: transparent;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+  border-radius: $borderRadius;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $lightGray;
+  }
+
+  .icon {
+    flex-shrink: 0;
+    font-size: 16px;
+  }
+  span {
+    flex-shrink: 0;
+    font-size: 12px;
+    margin-left: 5px;
+  }
+}
+.border-popover {
+  user-select: none;
+}
+.row {
+  display: flex;
+  align-items: center;
+
+  & + .row {
+    margin-top: 10px;
+  }
+}
+.label {
+  width: 40%;
+  font-size: 13px;
+}
+.control {
+  width: 60%;
+}
+.option {
+  height: 32px;
+  padding: 0 5px;
+  border-radius: $borderRadius;
+
+  &:hover {
+    background-color: rgba($color: $themeColor, $alpha: .05);
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/ChartToolbar.vue b/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/ChartToolbar.vue
new file mode 100644
index 00000000..bc91d654
--- /dev/null
+++ b/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/ChartToolbar.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="toolbar-content">
+    <button class="toolbar-btn" @click="openDataEditor()">
+      <i-icon-park-outline:edit class="icon" />
+      <span>编辑数据</span>
+    </button>
+    <Popover trigger="click" :placement="submenuPlacement === 'top' ? 'top' : 'bottom'">
+      <template #content>
+        <div class="chart-type-list">
+          <PopoverMenuItem
+            center
+            v-for="item in chartList"
+            :key="item"
+            @click="changeChartType(item)"
+          >{{ CHART_TYPE_MAP[item] }}</PopoverMenuItem>
+        </div>
+      </template>
+      <button class="toolbar-btn">
+        <i-icon-park-outline:chart-histogram class="icon" />
+        <span>类型</span>
+      </button>
+    </Popover>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type Ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useSlidesStore, useMainStore } from '@/store'
+import type { ChartType, PPTChartElement } from '@/types/slides'
+import { CHART_TYPE_MAP } from '@/configs/chart'
+import emitter, { EmitterEvents } from '@/utils/emitter'
+import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+
+import Popover from '@/components/Popover.vue'
+import PopoverMenuItem from '@/components/PopoverMenuItem.vue'
+
+defineProps<{
+  elementInfo: PPTChartElement
+  submenuPlacement: 'top' | 'bottom'
+}>()
+
+const slidesStore = useSlidesStore()
+const { handleElement, handleElementId } = storeToRefs(useMainStore())
+
+const handleChartElement = handleElement as Ref<PPTChartElement>
+
+const chartList: ChartType[] = ['bar', 'column', 'line', 'area', 'scatter', 'pie', 'ring', 'radar']
+
+const { addHistorySnapshot } = useHistorySnapshot()
+
+const openDataEditor = () => {
+  emitter.emit(EmitterEvents.OPEN_CHART_DATA_EDITOR)
+}
+
+const changeChartType = (type: ChartType) => {
+  if (!handleChartElement.value || handleChartElement.value.chartType === type) return
+  slidesStore.updateElement({ id: handleElementId.value, props: { chartType: type } })
+  addHistorySnapshot()
+}
+</script>
+
+<style lang="scss" scoped>
+.toolbar-content {
+  width: max-content;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  gap: 4px;
+}
+.toolbar-btn {
+  min-width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  padding: 0 5px;
+  border: 0;
+  color: $textColor;
+  background-color: transparent;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+  border-radius: $borderRadius;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $lightGray;
+  }
+
+  .icon {
+    flex-shrink: 0;
+    font-size: 16px;
+  }
+  span {
+    flex-shrink: 0;
+    font-size: 12px;
+    margin-left: 5px;
+  }
+}
+.chart-type-list {
+  width: 120px;
+}
+</style>
diff --git a/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/ImageToolbar.vue b/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/ImageToolbar.vue
new file mode 100644
index 00000000..5875cba1
--- /dev/null
+++ b/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/ImageToolbar.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="toolbar-content">
+    <button class="toolbar-btn" @click="clipImage()">
+      <i-icon-park-outline:tailoring class="icon" />
+      <span>裁剪</span>
+    </button>
+    <FileInput @change="files => replaceImage(files)">
+      <button class="toolbar-btn">
+        <i-icon-park-outline:transform class="icon" />
+        <span>替换</span>
+      </button>
+    </FileInput>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type Ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useMainStore, useSlidesStore } from '@/store'
+import type { PPTImageElement } from '@/types/slides'
+import { getImageDataURL, getImageSize } from '@/utils/image'
+import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+
+import FileInput from '@/components/FileInput.vue'
+
+defineProps<{
+  elementInfo: PPTImageElement
+  submenuPlacement: 'top' | 'bottom'
+}>()
+
+const mainStore = useMainStore()
+const slidesStore = useSlidesStore()
+const { handleElement, handleElementId } = storeToRefs(mainStore)
+
+const handleImageElement = handleElement as Ref<PPTImageElement>
+
+const { addHistorySnapshot } = useHistorySnapshot()
+
+const clipImage = () => {
+  mainStore.setClipingImageElementId(handleElementId.value)
+}
+
+const replaceImage = (files: FileList) => {
+  const imageFile = files[0]
+  if (!imageFile) return
+  getImageDataURL(imageFile).then(dataURL => {
+    const originWidth = handleImageElement.value.width
+    const originHeight = handleImageElement.value.height
+    const originLeft = handleImageElement.value.left
+    const originTop = handleImageElement.value.top
+    const centerX = originLeft + originWidth / 2
+    const centerY = originTop + originHeight / 2
+
+    getImageSize(dataURL).then(({ width, height }) => {
+      const h = originHeight
+      const w = width * (originHeight / height)
+      const l = centerX - w / 2
+      const t = centerY - h / 2
+
+      slidesStore.removeElementProps({
+        id: handleElementId.value,
+        propName: 'clip',
+      })
+      slidesStore.updateElement({
+        id: handleElementId.value,
+        props: { src: dataURL, width: w, height: h, left: l, top: t },
+      })
+      addHistorySnapshot()
+    })
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.toolbar-content {
+  width: max-content;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  gap: 4px;
+}
+.toolbar-btn {
+  min-width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  padding: 0 5px;
+  border: 0;
+  color: $textColor;
+  background-color: transparent;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+  border-radius: $borderRadius;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $lightGray;
+  }
+
+  .icon {
+    flex-shrink: 0;
+    font-size: 16px;
+  }
+  span {
+    flex-shrink: 0;
+    font-size: 12px;
+    margin-left: 5px;
+  }
+}
+</style>
diff --git a/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/LatexToolbar.vue b/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/LatexToolbar.vue
new file mode 100644
index 00000000..e2e815ac
--- /dev/null
+++ b/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/LatexToolbar.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="toolbar-content">
+    <button class="toolbar-btn" @click="openLatexEditor()">
+      <i-icon-park-outline:edit class="icon" />
+      <span>编辑 LaTeX</span>
+    </button>
+    <Popover trigger="click" :placement="submenuPlacement === 'top' ? 'top' : 'bottom'">
+      <template #content>
+        <ColorPicker :modelValue="handleLatexElement.color" @update:modelValue="value => updateLatex({ color: value })" />
+      </template>
+      <button class="toolbar-btn">
+        <i-icon-park-outline:platte class="icon" />
+        <span>颜色</span>
+      </button>
+    </Popover>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type Ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useMainStore, useSlidesStore } from '@/store'
+import type { PPTLatexElement } from '@/types/slides'
+import emitter, { EmitterEvents } from '@/utils/emitter'
+import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+
+import Popover from '@/components/Popover.vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+
+defineProps<{
+  elementInfo: PPTLatexElement
+  submenuPlacement: 'top' | 'bottom'
+}>()
+
+const slidesStore = useSlidesStore()
+const { handleElement } = storeToRefs(useMainStore())
+
+const handleLatexElement = handleElement as Ref<PPTLatexElement>
+
+const { addHistorySnapshot } = useHistorySnapshot()
+
+const updateLatex = (props: Partial<PPTLatexElement>) => {
+  if (!handleElement.value) return
+  slidesStore.updateElement({ id: handleElement.value.id, props })
+  addHistorySnapshot()
+}
+
+const openLatexEditor = () => {
+  emitter.emit(EmitterEvents.OPEN_LATEX_EDITOR)
+}
+</script>
+
+<style lang="scss" scoped>
+.toolbar-content {
+  width: max-content;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  gap: 4px;
+}
+.toolbar-btn {
+  min-width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  padding: 0 5px;
+  border: 0;
+  color: $textColor;
+  background-color: transparent;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+  border-radius: $borderRadius;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $lightGray;
+  }
+
+  .icon {
+    flex-shrink: 0;
+    font-size: 16px;
+  }
+  span {
+    flex-shrink: 0;
+    font-size: 12px;
+    margin-left: 5px;
+  }
+}
+</style>
diff --git a/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/LineToolbar.vue b/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/LineToolbar.vue
new file mode 100644
index 00000000..50ce3d1f
--- /dev/null
+++ b/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/LineToolbar.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="toolbar-content">
+    <Popover
+      trigger="click"
+      :placement="submenuPlacement === 'top' ? 'top' : 'bottom'"
+      :contentStyle="{ width: '120px' }"
+    >
+      <template #content>
+        <div class="line-style-list">
+          <div
+            class="line-style-item"
+            :class="{ active: handleLineElement.style === item }"
+            v-for="item in lineStyleOptions"
+            :key="item"
+            @click="updateLine({ style: item })"
+          >
+            <SVGLine :type="item" />
+          </div>
+        </div>
+      </template>
+      <button class="toolbar-btn">
+        <i-icon-park-outline:connection class="icon" />
+        <span>样式</span>
+      </button>
+    </Popover>
+    <Popover trigger="click" :placement="submenuPlacement === 'top' ? 'top' : 'bottom'">
+      <template #content>
+        <ColorPicker :modelValue="handleLineElement.color" @update:modelValue="value => updateLine({ color: value })" />
+      </template>
+      <button class="toolbar-btn">
+        <i-icon-park-outline:platte class="icon" />
+        <span>颜色</span>
+      </button>
+    </Popover>
+    <div class="width-slider">
+      <Slider
+        :min="1"
+        :max="12"
+        :step="1"
+        :value="handleLineElement.width"
+        @update:value="value => updateLine({ width: value as number })"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type Ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useMainStore, useSlidesStore } from '@/store'
+import type { LineStyleType, PPTLineElement } from '@/types/slides'
+import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+
+import SVGLine from '@/views/Editor/Toolbar/common/SVGLine.vue'
+import Popover from '@/components/Popover.vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+import Slider from '@/components/Slider.vue'
+
+defineProps<{
+  elementInfo: PPTLineElement
+  submenuPlacement: 'top' | 'bottom'
+}>()
+
+const slidesStore = useSlidesStore()
+const { handleElement } = storeToRefs(useMainStore())
+
+const handleLineElement = handleElement as Ref<PPTLineElement>
+
+const lineStyleOptions: LineStyleType[] = ['solid', 'dashed', 'dotted']
+
+const { addHistorySnapshot } = useHistorySnapshot()
+
+const updateLine = (props: Partial<PPTLineElement>) => {
+  if (!handleElement.value) return
+  slidesStore.updateElement({ id: handleElement.value.id, props })
+  addHistorySnapshot()
+}
+</script>
+
+<style lang="scss" scoped>
+.toolbar-content {
+  width: max-content;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  gap: 4px;
+}
+.toolbar-btn {
+  min-width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  padding: 0 5px;
+  border: 0;
+  color: $textColor;
+  background-color: transparent;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+  border-radius: $borderRadius;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $lightGray;
+  }
+
+  .icon {
+    flex-shrink: 0;
+    font-size: 16px;
+  }
+  span {
+    flex-shrink: 0;
+    font-size: 12px;
+    margin-left: 5px;
+  }
+}
+.line-style-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.line-style-item {
+  height: 32px;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  border-radius: $borderRadius;
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba($color: $themeColor, $alpha: .05);
+  }
+  &.active {
+    color: $themeColor;
+  }
+}
+.width-slider {
+  width: 120px;
+  padding: 0 8px;
+  flex-shrink: 0;
+}
+</style>
diff --git a/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/ShapeToolbar.vue b/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/ShapeToolbar.vue
new file mode 100644
index 00000000..f99d41d5
--- /dev/null
+++ b/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/ShapeToolbar.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="toolbar-content">
+    <Popover trigger="click" :placement="submenuPlacement === 'top' ? 'top' : 'bottom'">
+      <template #content>
+        <ColorPicker :modelValue="fill" @update:modelValue="value => updateFill(value)" />
+      </template>
+      <button class="toolbar-btn">
+        <i-icon-park-outline:fill class="icon" />
+        <span>填充</span>
+      </button>
+    </Popover>
+    <BorderPanel :submenuPlacement="submenuPlacement" />
+    <template v-if="handleShapeElement.text?.content">
+      <div class="divider"></div>
+      <TextStyleControls :submenuPlacement="submenuPlacement" />
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type Ref, ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useMainStore, useSlidesStore } from '@/store'
+import type { PPTShapeElement } from '@/types/slides'
+import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+
+import BorderPanel from './BorderPanel.vue'
+import TextStyleControls from './TextStyleControls.vue'
+import Popover from '@/components/Popover.vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+
+defineProps<{
+  elementInfo: PPTShapeElement
+  submenuPlacement: 'top' | 'bottom'
+}>()
+
+const slidesStore = useSlidesStore()
+const { handleElement, handleElementId } = storeToRefs(useMainStore())
+
+const handleShapeElement = handleElement as Ref<PPTShapeElement>
+
+const fill = ref('#fff')
+
+watch(handleShapeElement, () => {
+  if (!handleShapeElement.value || handleShapeElement.value.type !== 'shape') return
+  fill.value = handleShapeElement.value.fill || '#fff'
+}, { deep: true, immediate: true })
+
+const { addHistorySnapshot } = useHistorySnapshot()
+
+const updateFill = (value: string) => {
+  slidesStore.removeElementProps({ id: handleElementId.value, propName: ['gradient', 'pattern'] })
+  slidesStore.updateElement({ id: handleElementId.value, props: { fill: value } })
+  addHistorySnapshot()
+}
+</script>
+
+<style lang="scss" scoped>
+.toolbar-content {
+  width: max-content;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  gap: 4px;
+}
+.toolbar-btn {
+  min-width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  padding: 0 5px;
+  border: 0;
+  color: $textColor;
+  background-color: transparent;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+  border-radius: $borderRadius;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $lightGray;
+  }
+
+  .icon {
+    flex-shrink: 0;
+    font-size: 16px;
+  }
+  span {
+    flex-shrink: 0;
+    font-size: 12px;
+    margin-left: 5px;
+  }
+}
+.divider {
+  width: 1px;
+  height: 18px;
+  background-color: $borderColor;
+  margin: 0 4px;
+  flex-shrink: 0;
+}
+</style>
diff --git a/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/TableToolbar.vue b/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/TableToolbar.vue
new file mode 100644
index 00000000..5103eafc
--- /dev/null
+++ b/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/TableToolbar.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="toolbar-content">
+    <Popover trigger="click" :placement="submenuPlacement === 'top' ? 'top' : 'bottom'">
+      <template #content>
+        <ColorPicker :modelValue="cellBackcolor" @update:modelValue="value => updateCellBackcolor(value)" />
+      </template>
+      <button class="toolbar-btn">
+        <i-icon-park-outline:fill class="icon" />
+        <span>填充</span>
+      </button>
+    </Popover>
+    <BorderPanel :submenuPlacement="submenuPlacement" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, type Ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useMainStore, useSlidesStore } from '@/store'
+import type { PPTTableElement, TableCell, TableCellStyle } from '@/types/slides'
+import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+
+import BorderPanel from './BorderPanel.vue'
+import Popover from '@/components/Popover.vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+
+defineProps<{
+  elementInfo: PPTTableElement
+  submenuPlacement: 'top' | 'bottom'
+}>()
+
+const slidesStore = useSlidesStore()
+const { handleElement, handleElementId, selectedTableCells } = storeToRefs(useMainStore())
+
+const handleTableElement = handleElement as Ref<PPTTableElement>
+
+const cellBackcolor = computed(() => {
+  const el = handleTableElement.value
+  if (!el || el.type !== 'table') return ''
+
+  let rowIndex = 0
+  let colIndex = 0
+  if (selectedTableCells.value.length) {
+    const selected = selectedTableCells.value[0]
+    rowIndex = +selected.split('_')[0]
+    colIndex = +selected.split('_')[1]
+  }
+  return el.data[rowIndex]?.[colIndex]?.style?.backcolor || ''
+})
+
+const { addHistorySnapshot } = useHistorySnapshot()
+
+const updateCellBackcolor = (backcolor: string) => {
+  const el = handleTableElement.value
+  if (!el || el.type !== 'table') return
+
+  const data: TableCell[][] = JSON.parse(JSON.stringify(el.data))
+  const selected = selectedTableCells.value
+  for (let i = 0; i < data.length; i++) {
+    for (let j = 0; j < data[i].length; j++) {
+      if (!selected.length || selected.includes(`${i}_${j}`)) {
+        const style: TableCellStyle = data[i][j].style || {}
+        data[i][j].style = { ...style, backcolor }
+      }
+    }
+  }
+  slidesStore.updateElement({ id: handleElementId.value, props: { data } })
+  addHistorySnapshot()
+}
+</script>
+
+<style lang="scss" scoped>
+.toolbar-content {
+  width: max-content;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  gap: 4px;
+}
+.toolbar-btn {
+  min-width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  padding: 0 5px;
+  border: 0;
+  color: $textColor;
+  background-color: transparent;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+  border-radius: $borderRadius;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $lightGray;
+  }
+
+  .icon {
+    flex-shrink: 0;
+    font-size: 16px;
+  }
+  span {
+    flex-shrink: 0;
+    font-size: 12px;
+    margin-left: 5px;
+  }
+}
+</style>
diff --git a/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/TextStyleControls.vue b/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/TextStyleControls.vue
new file mode 100644
index 00000000..3840bc6a
--- /dev/null
+++ b/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/TextStyleControls.vue
@@ -0,0 +1,154 @@
+<template>
+  <Select
+    class="font-select"
+    :value="richTextAttrs.fontname"
+    search
+    searchLabel="搜索字体"
+    @update:value="value => emitRichTextCommand('fontname', value as string)"
+    :options="FONTS"
+  />
+  <Select
+    class="fontsize-select"
+    :value="richTextAttrs.fontsize"
+    search
+    searchLabel="搜索字号"
+    @update:value="value => emitRichTextCommand('fontsize', value as string)"
+    :options="fontSizeOptions.map(item => ({ label: item, value: item }))"
+  />
+
+  <div class="divider"></div>
+
+  <Popover trigger="click" :placement="submenuPlacement === 'top' ? 'top' : 'bottom'">
+    <template #content>
+      <ColorPicker :modelValue="richTextAttrs.color" @update:modelValue="value => emitRichTextCommand('color', value)" />
+    </template>
+    <button class="toolbar-btn">
+      <i-icon-park-outline:platte />
+    </button>
+  </Popover>
+  <button
+    class="toolbar-btn"
+    :class="{ active: richTextAttrs.bold }"
+    @click="emitRichTextCommand('bold')"
+  ><i-icon-park-outline:text-bold /></button>
+  <button
+    class="toolbar-btn"
+    :class="{ active: richTextAttrs.em }"
+    @click="emitRichTextCommand('em')"
+  ><i-icon-park-outline:text-italic /></button>
+  <button
+    class="toolbar-btn"
+    :class="{ active: richTextAttrs.underline }"
+    @click="emitRichTextCommand('underline')"
+  ><i-icon-park-outline:text-underline /></button>
+
+  <div class="divider"></div>
+
+  <button
+    class="toolbar-btn"
+    :class="{ active: richTextAttrs.align === 'left' }"
+    @click="emitRichTextCommand('align', 'left')"
+  ><i-icon-park-outline:align-text-left /></button>
+  <button
+    class="toolbar-btn"
+    :class="{ active: richTextAttrs.align === 'center' }"
+    @click="emitRichTextCommand('align', 'center')"
+  ><i-icon-park-outline:align-text-center /></button>
+  <button
+    class="toolbar-btn"
+    :class="{ active: richTextAttrs.align === 'right' }"
+    @click="emitRichTextCommand('align', 'right')"
+  ><i-icon-park-outline:align-text-right /></button>
+  <button
+    class="toolbar-btn"
+    :class="{ active: (richTextAttrs.align as string) === 'justify' }"
+    @click="emitRichTextCommand('align', 'justify')"
+  ><i-icon-park-outline:align-text-both /></button>
+
+  <div class="divider"></div>
+
+  <button class="toolbar-btn" @click="emitRichTextCommand('clear')">
+    <i-icon-park-outline:format />
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import { useMainStore } from '@/store'
+import { FONTS } from '@/configs/font'
+import emitter, { EmitterEvents } from '@/utils/emitter'
+
+import Select from '@/components/Select.vue'
+import Popover from '@/components/Popover.vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+
+defineProps<{
+  submenuPlacement: 'top' | 'bottom'
+}>()
+
+const { richTextAttrs } = storeToRefs(useMainStore())
+
+const fontSizeOptions = [
+  '12px', '14px', '16px', '18px', '20px', '22px', '24px', '28px', '32px',
+  '36px', '40px', '44px', '48px', '54px', '60px', '66px', '72px', '76px',
+  '80px', '88px', '96px', '104px', '112px', '120px',
+]
+
+const emitRichTextCommand = (command: string, value?: string) => {
+  emitter.emit(EmitterEvents.RICH_TEXT_COMMAND, { action: { command, value } })
+}
+</script>
+
+<style lang="scss" scoped>
+.toolbar-btn {
+  min-width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  padding: 0 5px;
+  border: 0;
+  font-size: 16px;
+  color: $textColor;
+  background-color: transparent;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+  border-radius: $borderRadius;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $lightGray;
+  }
+
+  &.active {
+    background-color: rgba($color: $themeColor, $alpha: .12);
+    color: $themeColor;
+  }
+}
+.font-select {
+  width: 110px;
+  margin-right: 4px;
+}
+.fontsize-select {
+  width: 80px;
+}
+.divider {
+  width: 1px;
+  height: 18px;
+  background-color: $borderColor;
+  margin: 0 4px;
+  flex-shrink: 0;
+}
+
+::v-deep(.select) {
+  height: 28px;
+
+  .selector {
+    height: 26px;
+    line-height: 26px;
+  }
+  .icon {
+    height: 26px;
+  }
+}
+</style>
diff --git a/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/TextToolbar.vue b/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/TextToolbar.vue
new file mode 100644
index 00000000..21ed8370
--- /dev/null
+++ b/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/TextToolbar.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="toolbar-content">
+    <TextStyleControls :submenuPlacement="submenuPlacement" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { PPTTextElement } from '@/types/slides'
+import TextStyleControls from './TextStyleControls.vue'
+
+defineProps<{
+  elementInfo: PPTTextElement
+  submenuPlacement: 'top' | 'bottom'
+}>()
+</script>
+
+<style lang="scss" scoped>
+.toolbar-content {
+  width: max-content;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  gap: 4px;
+}
+</style>
diff --git a/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/index.vue b/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/index.vue
new file mode 100644
index 00000000..7063e511
--- /dev/null
+++ b/src/views/Editor/Canvas/ElementFloatLayer/FloatingToolbar/index.vue
@@ -0,0 +1,71 @@
+<template>
+  <div ref="toolbarRef" class="floating-toolbar" :style="toolbarStyle" @mousedown.stop>
+    <component
+      :is="currentToolbarComponent"
+      :elementInfo="elementInfo"
+      :submenuPlacement="submenuPlacement"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref, nextTick, type Component } from 'vue'
+import {
+  ElementTypes,
+  type PPTElement,
+} from '@/types/slides'
+
+import TextToolbar from './TextToolbar.vue'
+import ImageToolbar from './ImageToolbar.vue'
+import ShapeToolbar from './ShapeToolbar.vue'
+import TableToolbar from './TableToolbar.vue'
+import LineToolbar from './LineToolbar.vue'
+import LatexToolbar from './LatexToolbar.vue'
+import ChartToolbar from './ChartToolbar.vue'
+
+const props = defineProps<{
+  elementInfo: PPTElement
+  toolbarStyle: Record<string, string>
+  submenuPlacement: 'top' | 'bottom'
+}>()
+
+const emit = defineEmits<{
+  (e: 'measure', width: number): void
+}>()
+
+const toolbarRef = ref<HTMLElement | null>(null)
+
+const currentToolbarComponent = computed<unknown>(() => {
+  const toolbarComponentMap: Partial<Record<ElementTypes, Component>> = {
+    [ElementTypes.TEXT]: TextToolbar,
+    [ElementTypes.IMAGE]: ImageToolbar,
+    [ElementTypes.SHAPE]: ShapeToolbar,
+    [ElementTypes.TABLE]: TableToolbar,
+    [ElementTypes.LINE]: LineToolbar,
+    [ElementTypes.CHART]: ChartToolbar,
+    [ElementTypes.LATEX]: LatexToolbar,
+  }
+  return toolbarComponentMap[props.elementInfo.type]
+})
+
+onMounted(() => {
+  nextTick(() => {
+    if (toolbarRef.value) emit('measure', toolbarRef.value.clientWidth)
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.floating-toolbar {
+  position: absolute;
+  width: max-content;
+  height: 40px;
+  padding: 0 5px;
+  background-color: #fff;
+  border: 1px solid rgba($color: #d9d9d9, $alpha: .2);
+  box-shadow: $boxShadow;
+  border-radius: $borderRadius;
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/src/views/Editor/Canvas/ElementFloatLayer/LinkHandler.vue b/src/views/Editor/Canvas/ElementFloatLayer/LinkHandler.vue
index 42914d0e..25df0392 100644
--- a/src/views/Editor/Canvas/ElementFloatLayer/LinkHandler.vue
+++ b/src/views/Editor/Canvas/ElementFloatLayer/LinkHandler.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="link-handler" :style="linkHandlerStyle">
+  <div class="link-handler" :style="handlerStyle">
     <a class="link" v-if="elementInfo.link?.type === 'web'" :href="elementInfo.link.target" target="_blank">{{elementInfo.link.target}}</a>
     <a class="link" v-else-if="elementInfo.link" @click="turnTarget(elementInfo.link.target)">幻灯片页面 {{elementInfo.link.target}}</a>
     <div class="btns">
@@ -11,34 +11,23 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import type { PPTElement } from '@/types/slides'
-import type { getElementRange } from '@/utils/element'
 import useLink from '@/hooks/useLink'
 import Divider from '@/components/Divider.vue'
 
-const props = defineProps<{
+defineProps<{
   elementInfo: PPTElement
-  range: ReturnType<typeof getElementRange>
+  handlerStyle: Record<string, string>
   openLinkDialog: () => void
 }>()
 
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
-const { canvasScale } = storeToRefs(mainStore)
 const { slides } = storeToRefs(slidesStore)
 const { removeLink } = useLink()
 
-const linkHandlerStyle = computed(() => {
-  const { minX, maxY } = props.range
-  return {
-    left: minX * canvasScale.value + 'px',
-    top: maxY * canvasScale.value + 10 + 'px',
-  }
-})
-
 const turnTarget = (slideId: string) => {
   const targetIndex = slides.value.findIndex(item => item.id === slideId)
   if (targetIndex !== -1) {
@@ -59,6 +48,7 @@ const turnTarget = (slideId: string) => {
   display: flex;
   align-items: center;
   color: $themeColor;
+  border-radius: $borderRadius;
 }
 .link {
   max-width: 300px;
diff --git a/src/views/Editor/Canvas/ElementFloatLayer/index.vue b/src/views/Editor/Canvas/ElementFloatLayer/index.vue
index 2766d655..a72e3496 100644
--- a/src/views/Editor/Canvas/ElementFloatLayer/index.vue
+++ b/src/views/Editor/Canvas/ElementFloatLayer/index.vue
@@ -1,41 +1,75 @@
 <template>
   <div class="element-float-layer">
-    <template v-for="item in elementFloatItems" :key="item.element.id">
-      <AnimationIndex
-        v-if="item.animationIndexList.length"
-        :elementInfo="item.element"
-        :range="item.range"
-        :indexList="item.animationIndexList"
-      />
+    <AnimationIndex
+      v-for="item in animationIndexItems"
+      :key="item.element.id"
+      :elementInfo="item.element"
+      :range="item.range"
+      :indexList="item.animationIndexList"
+    />
 
-      <LinkHandler
-        v-if="handleElementId === item.element.id && item.element.link"
-        :elementInfo="item.element"
-        :range="item.range"
-        :openLinkDialog="openLinkDialog"
-        @mousedown.stop
-      />
-    </template>
+    <FloatingToolbar
+      v-if="floatingToolbar"
+      :key="floatingToolbar.element.id"
+      :elementInfo="floatingToolbar.element"
+      :toolbarStyle="floatingToolbar.toolbarStyle"
+      :submenuPlacement="floatingToolbar.submenuPlacement"
+      @measure="value => floatingToolbarWidth = value"
+    />
+
+    <LinkHandler
+      v-if="linkHandler"
+      :elementInfo="linkHandler.element"
+      :handlerStyle="linkHandler.handlerStyle"
+      :openLinkDialog="openLinkDialog"
+      @mousedown.stop
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
-import type { PPTElement } from '@/types/slides'
+import { ElementTypes, type PPTElement } from '@/types/slides'
+import type useViewportSize from '../hooks/useViewportSize'
 import { getElementRange } from '@/utils/element'
 
 import AnimationIndex from './AnimationIndex.vue'
 import LinkHandler from './LinkHandler.vue'
+import FloatingToolbar from './FloatingToolbar/index.vue'
 
 const props = defineProps<{
   elementList: PPTElement[]
+  canvasRef: HTMLElement | null
+  viewportStyles: ReturnType<typeof useViewportSize>['viewportStyles']['value']
   openLinkDialog: () => void
 }>()
 
-const { handleElementId, hiddenElementIdList, toolbarState } = storeToRefs(useMainStore())
+const FLOAT_LAYER_GAP = 10
+const FLOATING_TOOLBAR_HEIGHT = 40
+const LINK_HANDLER_HEIGHT = 30
+const ROTATE_HANDLER_RESERVED_GAP = 40
+const TOOLBAR_ELEMENT_TYPES: string[] = [
+  ElementTypes.TEXT,
+  ElementTypes.IMAGE,
+  ElementTypes.SHAPE,
+  ElementTypes.TABLE,
+  ElementTypes.LINE,
+  ElementTypes.CHART,
+  ElementTypes.LATEX,
+]
+const ROTATE_HANDLER_ELEMENT_TYPES: string[] = [
+  ElementTypes.TEXT,
+  ElementTypes.IMAGE,
+  ElementTypes.SHAPE,
+  ElementTypes.TABLE,
+  ElementTypes.LATEX,
+]
+
+const { activeElementIdList, activeGroupElementId, canvasScale, handleElementId, hiddenElementIdList, toolbarState } = storeToRefs(useMainStore())
 const { formatedAnimations } = storeToRefs(useSlidesStore())
+const floatingToolbarWidth = ref(100)
 
 const getAnimationIndexList = (element: PPTElement) => {
   const indexList = []
@@ -46,25 +80,95 @@ const getAnimationIndexList = (element: PPTElement) => {
   return indexList
 }
 
-const elementFloatItems = computed(() => {
+const animationIndexItems = computed(() => {
   const items = []
 
   for (const element of props.elementList) {
     if (hiddenElementIdList.value.includes(element.id)) continue
 
     const animationIndexList = toolbarState.value === 'elAnimation' ? getAnimationIndexList(element) : []
-    const showLinkHandler = handleElementId.value === element.id && !!element.link
-    if (!animationIndexList.length && !showLinkHandler) continue
+    if (!animationIndexList.length) continue
+    const range = getElementRange(element)
 
     items.push({
       element,
-      range: getElementRange(element),
+      range,
       animationIndexList,
     })
   }
 
   return items
 })
+
+const floatingToolbarTarget = computed(() => {
+  const targetId = activeGroupElementId.value || (activeElementIdList.value.length === 1 ? activeElementIdList.value[0] : '')
+  if (!targetId || hiddenElementIdList.value.includes(targetId)) return null
+
+  const element = props.elementList.find(element => element.id === targetId) || null
+  if (!element || !TOOLBAR_ELEMENT_TYPES.includes(element.type)) return null
+
+  return element
+})
+
+const floatingToolbar = computed(() => {
+  const element = floatingToolbarTarget.value
+  if (!element) return null
+
+  const range = getElementRange(element)
+  const showLinkHandler = handleElementId.value === element.id && !!element.link
+  const canvasWidth = props.canvasRef?.clientWidth || 0
+  const canvasHeight = props.canvasRef?.clientHeight || 0
+  const availableTop = -props.viewportStyles.top
+  const availableBottom = canvasHeight - props.viewportStyles.top
+  const availableLeft = -props.viewportStyles.left
+  const availableRight = canvasWidth - props.viewportStyles.left
+  const minLeft = availableLeft + FLOAT_LAYER_GAP
+  const maxLeft = availableRight - floatingToolbarWidth.value - FLOAT_LAYER_GAP
+  const bottomTop = range.maxY * canvasScale.value + FLOAT_LAYER_GAP
+  const bottomHeight = FLOATING_TOOLBAR_HEIGHT + (showLinkHandler ? FLOAT_LAYER_GAP + LINK_HANDLER_HEIGHT : 0)
+  const placement: 'top' | 'bottom' = canvasHeight && bottomTop + bottomHeight > availableBottom ? 'top' : 'bottom'
+  const rotateHandlerGap = ROTATE_HANDLER_ELEMENT_TYPES.includes(element.type) ? ROTATE_HANDLER_RESERVED_GAP : FLOAT_LAYER_GAP
+  const left = range.minX * canvasScale.value
+  const toolbarLeft = canvasWidth ? (maxLeft < minLeft ? minLeft : Math.min(Math.max(left, minLeft), maxLeft)) : left
+  const top = placement === 'bottom' ? bottomTop : range.minY * canvasScale.value - rotateHandlerGap - FLOATING_TOOLBAR_HEIGHT
+  const toolbarTop = Math.max(availableTop + FLOAT_LAYER_GAP, top)
+  const submenuPlacement: 'top' | 'bottom' = canvasHeight && toolbarTop + FLOATING_TOOLBAR_HEIGHT / 2 > (availableTop + availableBottom) / 2 ? 'top' : 'bottom'
+
+  return {
+    element,
+    range,
+    placement,
+    toolbarStyle: {
+      left: toolbarLeft + 'px',
+      top: toolbarTop + 'px',
+    },
+    submenuPlacement,
+  }
+})
+
+const linkHandler = computed(() => {
+  const element = handleElementId.value ? props.elementList.find(item => item.id === handleElementId.value) || null : null
+  if (!element || !element.link || hiddenElementIdList.value.includes(element.id)) return null
+
+  const range = getElementRange(element)
+  const canvasWidth = props.canvasRef?.clientWidth || 0
+  const availableLeft = -props.viewportStyles.left
+  const availableRight = canvasWidth - props.viewportStyles.left
+  const minLeft = availableLeft + FLOAT_LAYER_GAP
+  const maxLeft = availableRight - floatingToolbarWidth.value - FLOAT_LAYER_GAP
+  const left = range.minX * canvasScale.value
+  const toolbarLeft = canvasWidth ? (maxLeft < minLeft ? minLeft : Math.min(Math.max(left, minLeft), maxLeft)) : left
+  const toolbarBottom = floatingToolbar.value && floatingToolbar.value.element.id === element.id && floatingToolbar.value.placement === 'bottom'
+  const top = range.maxY * canvasScale.value + FLOAT_LAYER_GAP + (toolbarBottom ? FLOATING_TOOLBAR_HEIGHT + FLOAT_LAYER_GAP : 0)
+
+  return {
+    element,
+    handlerStyle: {
+      left: toolbarLeft + 'px',
+      top: top + 'px',
+    },
+  }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue
index d89555b8..52f1730b 100644
--- a/src/views/Editor/Canvas/index.vue
+++ b/src/views/Editor/Canvas/index.vue
@@ -56,6 +56,8 @@
         />
         <ElementFloatLayer
           :elementList="elementList"
+          :canvasRef="canvasRef"
+          :viewportStyles="viewportStyles"
           :openLinkDialog="openLinkDialog"
         />
         <ViewportBackground />