jvs-ppt-ui 0.0.9 → 0.0.10

package/src/components/Toolbar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useSlides } from '../composables/useSlides'
 import { SHAPE_LIST } from '../utils/shapes'
 import type { ShapePoolItem } from '../utils/shapes'
@@ -9,6 +9,75 @@ import ChartTypeSelector from './ChartTypeSelector.vue'
 import TemplateGallery from './TemplateGallery.vue'
 import { type SlideTextType, TEXT_TYPE_LIST } from '../utils/textTypes'
 
+const props = withDefaults(defineProps<{
+  toolbarMode?: 'auto' | 'more' | 'full'
+}>(), {
+  toolbarMode: 'auto'
+})
+
+const toolbarRootRef = ref<HTMLElement | null>(null)
+const isNarrowLayout = ref(false)
+const morePopoverVisible = ref(false)
+
+const isMoreMode = computed(() => {
+  if (props.toolbarMode === 'more') return true
+  if (props.toolbarMode === 'full') return false
+  return isNarrowLayout.value
+})
+
+let resizeObserver: ResizeObserver | null = null
+
+onMounted(() => {
+  if (typeof ResizeObserver !== 'undefined' && toolbarRootRef.value) {
+    const parentContainer = toolbarRootRef.value.closest('.header-center-tools') || toolbarRootRef.value.parentElement
+    if (parentContainer) {
+      resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          // 工具栏可用宽度小于 640px 时（如在 700px~900px 弹窗或小屏幕下），自动切换为“更多功能”折叠收纳模式
+          isNarrowLayout.value = entry.contentRect.width < 640
+        }
+      })
+      resizeObserver.observe(parentContainer)
+    }
+  }
+  const checkFallback = () => {
+    isNarrowLayout.value = window.innerWidth < 1150
+  }
+  checkFallback()
+  window.addEventListener('resize', checkFallback)
+})
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+})
+
+function handleMoreAction(type: string) {
+  morePopoverVisible.value = false
+  if (type === 'image') {
+    triggerLocalUpload()
+  } else if (type === 'media') {
+    mediaPopoverVisible.value = true
+  } else if (type === 'table') {
+    tablePopoverVisible.value = true
+  } else if (type === 'chart') {
+    chartPopoverVisible.value = true
+  } else if (type === 'material') {
+    materialPopoverVisible.value = true
+  } else if (type === 'format') {
+    activeTab.value = (activeTab.value === 'format' || activeTab.value === 'design' || activeTab.value === 'multi-style' || activeTab.value === 'multi-position')
+      ? null
+      : (selectedElementIds.value.length > 1 ? 'multi-style' : (selectedElementId.value ? 'format' : 'design'))
+    isOpenedFromFloatToolbar.value = false
+  } else if (type === 'animation') {
+    activeTab.value = (activeTab.value === 'animation' || activeTab.value === 'transition')
+      ? null
+      : (selectedElementId.value ? 'animation' : 'transition')
+    isOpenedFromFloatToolbar.value = false
+  } else if (type === 'ai') {
+    aiReplaceCurrentSlide()
+  }
+}
+
 const {
   addElement, addTextByType, pendingTextType, zoomRatio, zoomIn, zoomOut, resetZoom, notify, activeTool, pendingShapeSubtype, pendingShapeViewBox, pendingLineContent, undo, redo, canUndo, canRedo,
   activeSlide, getActiveSlideThemeRecipe, formulaDialogVisible, selectedElementId, selectedElementIds,
@@ -709,7 +778,7 @@ function cancelInsertMedia() {
     </div>
   </div>
 
-  <div v-else class="app-toolbar">
+  <div v-else class="app-toolbar" ref="toolbarRootRef">
     <!-- Wrapped toolbar interactive contents -->
     <div class="toolbar-content toolbar-inner">
 
@@ -988,19 +1057,94 @@ function cancelInsertMedia() {
               </template>
             </el-dropdown>
 
-            <!-- Image Dropdown -->
-            <input type="file" ref="fileInputRef" accept="image/*" style="display: none" @change="handleFileChange" />
-            <el-dropdown trigger="click" @command="handleImageCommand" popper-class="image-dropdown-popper"
-              placement="bottom-start" @visible-change="imageDropdownVisible = $event">
-              <div class="toolbar-btn-stacked" :class="{ 'btn-active': imageDropdownVisible }" title="插入图片"
-                @mouseenter="hoveredButton = 'image'" @mouseleave="hoveredButton = null"
-                :data-tooltip="locale === 'zh' ? '插入图片' : 'Insert Image'">
-                <div class="btn-trigger-inner">
-                  <svg viewBox="0 0 1024 1024" class="toolbar-btn-icon toolbar-btn-icon-no-margin">
-                    <use
-                      :xlink:href="(imageDropdownVisible || hoveredButton === 'image') ? '#icon-tupian1' : '#icon-tupian1'">
-                    </use>
-                  </svg>
+            <!-- More Operations Popover (在窄屏或 more 模式下收纳扩展功能) -->
+            <el-popover
+              v-if="isMoreMode"
+              trigger="click"
+              placement="bottom-start"
+              :width="280"
+              popper-class="toolbar-more-popover"
+              v-model:visible="morePopoverVisible"
+              :show-arrow="false"
+            >
+              <template #reference>
+                <div
+                  class="toolbar-btn-stacked toolbar-more-btn"
+                  :class="{ 'btn-active': morePopoverVisible }"
+                  title="更多功能模块"
+                  :data-tooltip="locale === 'zh' ? '更多功能模块' : 'More Features'"
+                >
+                  <div class="btn-trigger-inner">
+                    <svg viewBox="0 0 1024 1024" class="toolbar-btn-icon toolbar-btn-icon-no-margin" style="width: 18px; height: 18px;">
+                      <path d="M213.333 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="currentColor"/>
+                      <path d="M512 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="currentColor"/>
+                      <path d="M810.667 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="currentColor"/>
+                    </svg>
+                  </div>
+                  <span class="btn-label">{{ locale === 'zh' ? '更多' : 'More' }}</span>
+                </div>
+              </template>
+
+              <div class="toolbar-more-panel">
+                <div class="toolbar-more-section-title">插入对象</div>
+                <div class="toolbar-more-grid">
+                  <div class="toolbar-more-item" @click="handleMoreAction('image')" title="上传图片">
+                    <svg viewBox="0 0 1024 1024" class="toolbar-more-icon"><use xlink:href="#icon-tupian1"/></svg>
+                    <span>图片</span>
+                  </div>
+                  <div class="toolbar-more-item" @click="handleMoreAction('media')" title="插入音频/视频">
+                    <svg viewBox="0 0 1024 1024" class="toolbar-more-icon"><use xlink:href="#icon-meiti1"/></svg>
+                    <span>音视频</span>
+                  </div>
+                  <div class="toolbar-more-item" @click="handleMoreAction('table')" title="插入表格">
+                    <svg viewBox="0 0 1024 1024" class="toolbar-more-icon"><use xlink:href="#icon-biaoge1"/></svg>
+                    <span>表格</span>
+                  </div>
+                  <div class="toolbar-more-item" @click="handleMoreAction('chart')" title="插入图表">
+                    <svg viewBox="0 0 1024 1024" class="toolbar-more-icon"><use xlink:href="#icon-tubiao1"/></svg>
+                    <span>图表</span>
+                  </div>
+                  <div v-if="isMaterialEnabled" class="toolbar-more-item" @click="handleMoreAction('material')" title="素材库">
+                    <svg viewBox="0 0 1024 1024" class="toolbar-more-icon"><use xlink:href="#icon-sucaiku"/></svg>
+                    <span>素材库</span>
+                  </div>
+                </div>
+
+                <div class="toolbar-more-divider"></div>
+
+                <div class="toolbar-more-section-title">设计与效果</div>
+                <div class="toolbar-more-grid">
+                  <div class="toolbar-more-item" @click="handleMoreAction('format')" title="设计面板">
+                    <svg viewBox="0 0 1024 1024" class="toolbar-more-icon"><use xlink:href="#icon-geshi1"/></svg>
+                    <span>设计</span>
+                  </div>
+                  <div class="toolbar-more-item" @click="handleMoreAction('animation')" title="动画与切换">
+                    <svg viewBox="0 0 1024 1024" class="toolbar-more-icon"><use xlink:href="#icon-donghua1"/></svg>
+                    <span>动画</span>
+                  </div>
+                  <div v-if="isAiBeautifyEnabled" class="toolbar-more-item toolbar-more-ai" @click="handleMoreAction('ai')" title="一键美化">
+                    <svg viewBox="0 0 1024 1024" class="toolbar-more-icon" style="color: #ec4899;"><use xlink:href="#icon-yijianmeihua"/></svg>
+                    <span style="color: #ec4899; font-weight: 600;">一键美化</span>
+                  </div>
+                </div>
+              </div>
+            </el-popover>
+
+            <!-- 宽屏展开模式：依次平铺后续扩展按钮 -->
+            <template v-if="!isMoreMode">
+              <!-- Image Dropdown -->
+              <input type="file" ref="fileInputRef" accept="image/*" style="display: none" @change="handleFileChange" />
+              <el-dropdown trigger="click" @command="handleImageCommand" popper-class="image-dropdown-popper"
+                placement="bottom-start" @visible-change="imageDropdownVisible = $event">
+                <div class="toolbar-btn-stacked" :class="{ 'btn-active': imageDropdownVisible }" title="插入图片"
+                  @mouseenter="hoveredButton = 'image'" @mouseleave="hoveredButton = null"
+                  :data-tooltip="locale === 'zh' ? '插入图片' : 'Insert Image'">
+                  <div class="btn-trigger-inner">
+                    <svg viewBox="0 0 1024 1024" class="toolbar-btn-icon toolbar-btn-icon-no-margin">
+                      <use
+                        :xlink:href="(imageDropdownVisible || hoveredButton === 'image') ? '#icon-tupian1' : '#icon-tupian1'">
+                      </use>
+                    </svg>
                   <svg viewBox="0 0 24 24" width="8" height="8" class="btn-arrow-icon">
                     <path d="M6 9l6 6 6-6" />
                   </svg>
@@ -1172,7 +1316,8 @@ function cancelInsertMedia() {
             </el-popover>
 
             <!-- Material (素材) Popover (受控于 isMaterialEnabled) -->
-            <el-popover v-if="isMaterialEnabled" trigger="click" placement="bottom" :width="720" popper-class="material-popover-popper"
+            <el-popover v-if="isMaterialEnabled" trigger="click" placement="bottom" :width="1060" popper-class="material-popover-popper"
+              :persistent="true"
               v-model:visible="materialPopoverVisible" :show-arrow="false">
               <template #reference>
                 <div class="toolbar-btn-stacked" :class="{ 'btn-active': materialPopoverVisible || activeTab === 'material' }" title="素材"
@@ -1192,7 +1337,7 @@ function cancelInsertMedia() {
               </template>
 
               <!-- 素材库浮层内容 -->
-              <div class="material-popover-panel" style="width: 100%; max-width: 90vw; height: min(650px, calc(82vh - 60px)); display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;">
+              <div class="material-popover-panel" style="width: 100%; max-width: 95vw; height: min(760px, calc(88vh - 60px)); display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;">
                 <div class="material-popover-header" style="display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-color, #f1f5f9); background: var(--bg-surface, #fff);">
                   <div style="display: flex; align-items: center; gap: 8px;">
                     <span style="font-size: 14px; font-weight: 600; color: var(--text-primary);">素材库</span>
@@ -1263,6 +1408,7 @@ function cancelInsertMedia() {
               <span class="btn-label ai-opt-label" style="color: #ec4899; font-weight: 600;">{{ isOptimizingSlide ?
                 '美化中...' : '一键美化' }}</span>
             </div>
+            </template>
 
             <!-- 自定义常规工具栏后置插槽 -->
             <slot name="suffix"></slot>
@@ -1288,20 +1434,19 @@ function cancelInsertMedia() {
   justify-content: space-between;
   height: 100%;
   width: 100%;
-  padding: 0 16px;
+  padding: 0 6px;
   box-sizing: border-box;
 }
 
 .toolbar-center-group {
   display: flex;
   align-items: center;
-  /* gap: 8px; */
 }
 
 .toolbar-ops-group {
   display: flex;
   align-items: center;
-  gap: clamp(10px, 1.6vw, 24px);
+  gap: clamp(6px, 1.2vw, 20px);
   flex-shrink: 0;
 }
 
@@ -1309,7 +1454,7 @@ function cancelInsertMedia() {
   width: 1px;
   height: 28px;
   background: rgba(0, 0, 0, 0.08);
-  margin: 0 8px;
+  margin: 0 6px;
 }
 
 .btn-trigger-inner {
@@ -1547,15 +1692,91 @@ function cancelInsertMedia() {
   font-size: 11px;
   color: #94a3b8;
 }
+
+/* 更多功能折叠面板 */
+.toolbar-more-btn {
+  position: relative;
+}
+
+.toolbar-more-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  user-select: none;
+}
+
+.toolbar-more-section-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: #94a3b8;
+  padding: 0 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.toolbar-more-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+}
+
+.toolbar-more-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 4px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  color: #334155;
+  font-size: 11px;
+  background: #f8fafc;
+}
+
+.toolbar-more-item:hover {
+  background: #eff6ff;
+  color: #2563eb;
+  transform: translateY(-1px);
+}
+
+.toolbar-more-item.toolbar-more-ai {
+  background: #fdf2f8;
+}
+
+.toolbar-more-item.toolbar-more-ai:hover {
+  background: #fce7f3;
+  color: #db2777;
+}
+
+.toolbar-more-icon {
+  width: 22px;
+  height: 22px;
+  fill: currentColor;
+  flex-shrink: 0;
+}
+
+.toolbar-more-divider {
+  height: 1px;
+  background: #f1f5f9;
+  margin: 2px 0;
+}
 </style>
 
 <style>
+.el-popover.toolbar-more-popover {
+  padding: 12px !important;
+  border-radius: 10px !important;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08) !important;
+}
+
 .el-popover.material-popover-popper {
   padding: 0 !important;
   border-radius: 8px !important;
   box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
   overflow: hidden !important;
-  max-width: 92vw !important;
+  max-width: 96vw !important;
 }
 
 .material-dock-sidebar-btn {

package/src/components/canvas/CanvasTransformHandles.vue

@@ -34,8 +34,12 @@ const isNearTopEdge = computed(() => {
 </script>
 
 <template>
+  <!-- 容器必须保持 pointer-events:none（走下方 scoped CSS）。若整块变 auto 会盖住选中元素的
+       文本区：mousedown/dblclick 的 target 变成容器，CanvasArea 各"放行原生选区"守卫全部失效，
+       表现为编辑态点文字退出编辑、拖动变拖元素、双击不选词；组内子元素还会因 down/up 目标
+       分裂而丢失 dblclick 事件。所有手柄均为子元素、自带 pointer-events:auto，不受影响。 -->
   <div class="transform-handles-container"
-    :style="{ '--handle-scale': handleScale, pointerEvents: props.isDragging ? 'none' : 'auto' }">
+    :style="{ '--handle-scale': handleScale }">
     <!-- If it's a line, only render endpoint handles & control points -->
     <template v-if="element.type === 'line'">
       <!-- Endpoints -->

package/src/components/canvas/elements/CanvasShapeElement.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, watch, onBeforeUnmount, nextTick } from 'vue'
 import {
   getElementPattern,
   getElementGradientConfig,
@@ -20,6 +20,7 @@ import {
 import { isEllipseShape } from '../../../utils/line'
 import { getFontVariantStyle } from '../../../configs/fonts'
 import { useSlides } from '../../../composables/useSlides'
+import { createTextSelectionOverlay, type TextSelectionOverlayHandle } from '../textSelectionOverlay'
 
 const { shapeFormatPainter } = useSlides()
 const isTextPaintActive = computed(() => !!(shapeFormatPainter.value && shapeFormatPainter.value.mode === 'text-range'))
@@ -29,7 +30,36 @@ function getEffectiveBorderWidth(el: any): number {
   if (props.isImagePlaceholder && props.isImagePlaceholder(el) && el.style?.enableBorder !== true) return 0
   if (el.style?.enableBorder === false) return 0
   const w = getElementBorderWidth(el)
-  return w > 0 ? w : (el.style?.borderColor || el.borderColor ? 1 : 2)
+  if (w > 0) return w
+  if (el.style?.borderColor || el.borderColor) return 1
+  return 0
+}
+
+function getShapeSvgTransform(el: any): string | undefined {
+  if (!el) return undefined
+  const { width, height } = getElementWidthHeight(el)
+  const vbW = el.viewBox ? el.viewBox[0] : (width || 200)
+  const vbH = el.viewBox ? el.viewBox[1] : (height || 200)
+
+  if (el.shapType === 'arc') {
+    return `scale(${width / vbW}, ${height / vbH})`
+  }
+  if (isOpenLineShape(el)) {
+    return undefined
+  }
+
+  const hasBorder = hasElementBorder(el)
+  const bw = hasBorder ? getEffectiveBorderWidth(el) : 0
+
+  if (bw > 0) {
+    const scaleX = Math.max(0, width - bw) / vbW
+    const scaleY = Math.max(0, height - bw) / vbH
+    return `translate(${bw / 2}, ${bw / 2}) scale(${scaleX}, ${scaleY})`
+  }
+
+  const scaleX = width / vbW
+  const scaleY = height / vbH
+  return `scale(${scaleX}, ${scaleY})`
 }
 
 function getEffectiveBorderColor(el: any, fallback = '#10b981'): string {
@@ -75,12 +105,40 @@ const emit = defineEmits<{
   (e: 'dblclick', ev: MouseEvent): void
 }>()
 
+// 编辑态：安装自绘选区高亮（原生 ::selection 几何跟随 CJK 字体度量，条顶空白过大）
+const shapeEditableRef = ref<HTMLElement | null>(null)
+const shapeTextHostRef = ref<HTMLElement | null>(null)
+let selOverlay: TextSelectionOverlayHandle | null = null
+
+const isVerticalWriting = computed(() => {
+  const wm = props.element.style?.writingMode
+  return wm === 'vertical-rl' || wm === 'vertical-lr'
+})
+
+watch([isTextSelectable, isVerticalWriting], ([selectable]) => {
+  nextTick(() => {
+    selOverlay?.destroy()
+    selOverlay = null
+    if (selectable && !isVerticalWriting.value) {
+      const ed = shapeEditableRef.value
+      const host = shapeTextHostRef.value
+      if (ed && host) selOverlay = createTextSelectionOverlay(ed, host)
+    }
+  })
+}, { immediate: true })
+
+onBeforeUnmount(() => {
+  selOverlay?.destroy()
+  selOverlay = null
+})
+
 function getElementWidthHeight(el: any): { width: number; height: number } {
   if (!el || typeof el !== 'object') return { width: 200, height: 200 }
 
   const wStr = el.style?.width !== undefined ? String(el.style.width).trim() : ''
   const hStr = el.style?.height !== undefined ? String(el.style.height).trim() : ''
 
+  // 1. 如果有明确的 px 或非百分比数值（如 '120px', 120）
   if (wStr && !wStr.endsWith('%') && wStr !== 'auto') {
     const w = parseFloat(wStr)
     const h = parseFloat(hStr)
@@ -89,34 +147,48 @@ function getElementWidthHeight(el: any): { width: number; height: number } {
     }
   }
 
-  // % 样式（组合内子元素）：相对直接父盒子的像素尺寸解析，父盒尺寸由
-  // CanvasGroupElement 经 props 传入。不能依赖下面的 DOM 测量分支 ——
-  // 本组件渲染时父组件的 wrapper div 还没插入 document，
-  // getElementById 拿不到，最终退化成 parseFloat('91.8%') 这类垃圾值，
-  // 导致形状 path 的 scale 初始错误、点击触发重渲染（DOM 已在）后才变对。
+  // 2. 如果是 % 样式（组合内子元素）：相对直接父盒子的像素尺寸解析
   if (wStr.endsWith('%')) {
     const pct = parseFloat(wStr)
-    const parentW = Number(props.parentWidthPx)
-    const parentH = Number(props.parentHeightPx)
-    const hPct = parseFloat(hStr)
-    const hResolvable = hStr.endsWith('%') && !isNaN(hPct) && isFinite(parentH) && parentH > 0
-    if (!isNaN(pct) && isFinite(parentW) && parentW > 0 && (hStr === 'auto' || hStr === '' || hResolvable || (typeof el.height === 'number' && el.height > 0))) {
-      const width = (pct / 100) * parentW
+    const pW = Number(props.parentWidthPx)
+    const pH = Number(props.parentHeightPx)
+
+    // 优先：若 props.parentWidthPx 经 props 链传入且有效
+    if (!isNaN(pct) && isFinite(pW) && pW > 0) {
+      const width = (pct / 100) * pW
       let height = NaN
-      if (hResolvable) height = (hPct / 100) * parentH
-      else if (hStr && hStr !== 'auto' && !hStr.endsWith('%')) {
+      const hPct = parseFloat(hStr)
+      if (hStr.endsWith('%') && !isNaN(hPct) && isFinite(pH) && pH > 0) {
+        height = (hPct / 100) * pH
+      } else if (hStr && hStr !== 'auto' && !hStr.endsWith('%')) {
         const hn = parseFloat(hStr)
         if (!isNaN(hn) && hn > 0) height = hn
       }
       if (isNaN(height) && typeof el.height === 'number' && el.height > 0) height = el.height
-      if (!isNaN(height)) return { width, height }
+      if (isNaN(height) && isFinite(pH) && pH > 0) height = pH
+      if (!isNaN(width) && !isNaN(height)) return { width, height: height || 200 }
+    }
+
+    // 关键补救：如果 parentWidthPx 尚未就绪，但 el.width / el.height 本身存在确凿数字（组合时保存的原始像素）
+    if (typeof el.width === 'number' && el.width > 0 && typeof el.height === 'number' && el.height > 0) {
+      return { width: el.width, height: el.height }
+    }
+
+    // 回退到画布基准 1280x720 进行百分比换算（绝不直接使用 parseFloat('38.46%') 变成 38px）
+    if (!isNaN(pct)) {
+      const width = (pct / 100) * 1280
+      const hPct = parseFloat(hStr)
+      const height = (!isNaN(hPct) && hStr.endsWith('%')) ? (hPct / 100) * 720 : (typeof el.height === 'number' && el.height > 0 ? el.height : width)
+      return { width, height }
     }
   }
 
+  // 3. 元素自身有数值型 width / height 属性
   if (typeof el.width === 'number' && el.width > 0 && typeof el.height === 'number' && el.height > 0) {
     return { width: el.width, height: el.height }
   }
 
+  // 4. DOM 测量兜底
   if (typeof window !== 'undefined' && el.id) {
     const dom = document.getElementById(`canvas-el-${el.id}`)
     if (dom && dom.offsetWidth > 0 && dom.offsetHeight > 0) {
@@ -124,7 +196,13 @@ function getElementWidthHeight(el: any): { width: number; height: number } {
     }
   }
 
-  return { width: parseFloat(wStr) || 200, height: parseFloat(hStr) || 200 }
+  // 5. 最终兜底：如果是 % 严禁直接 parseFloat 当作 px
+  let fallbackW = 200
+  let fallbackH = 200
+  if (wStr && !wStr.endsWith('%') && !isNaN(parseFloat(wStr))) fallbackW = parseFloat(wStr)
+  if (hStr && !hStr.endsWith('%') && !isNaN(parseFloat(hStr))) fallbackH = parseFloat(hStr)
+
+  return { width: fallbackW, height: fallbackH }
 }
 
 function getBevelShadingPaths(el: any) {
@@ -449,7 +527,7 @@ function formatShapeHtml(el: any): string {
           </template>
         </defs>
         <g
-          :transform="element.shapType === 'arc' ? `scale(${getElementWidthHeight(element).width / (element.viewBox ? element.viewBox[0] : (getElementWidthHeight(element).width || 200))}, ${getElementWidthHeight(element).height / (element.viewBox ? element.viewBox[1] : (getElementWidthHeight(element).height || 200))})` : (isOpenLineShape(element) ? undefined : `translate(${(element.style?.borderWidth ? parseFloat(element.style.borderWidth) : 2) / 2}, ${(element.style?.borderWidth ? parseFloat(element.style.borderWidth) : 2) / 2}) scale(${Math.max(0, getElementWidthHeight(element).width - (element.style?.borderWidth ? parseFloat(element.style.borderWidth) : 2)) / (element.viewBox ? element.viewBox[0] : (getElementWidthHeight(element).width || 200))}, ${Math.max(0, getElementWidthHeight(element).height - (element.style?.borderWidth ? parseFloat(element.style.borderWidth) : 2)) / (element.viewBox ? element.viewBox[1] : (getElementWidthHeight(element).height || 200))})`)"
+          :transform="getShapeSvgTransform(element)"
         >
           <path
             vector-effect="non-scaling-stroke"
@@ -572,11 +650,12 @@ function formatShapeHtml(el: any): string {
         transform: ((element.style as any)?.flipH || element.flipH || element.isFlipH || (element.style as any)?.flipV || element.flipV || element.isFlipV) ? `scale(${((element.style as any)?.flipH || element.flipH || element.isFlipH) ? -1 : 1}, ${((element.style as any)?.flipV || element.flipV || element.isFlipV) ? -1 : 1})` : undefined
       }"
     >
-      <div class="text-reflection-wrapper" style="position: relative; pointer-events: none;" :style="{
+      <div ref="shapeTextHostRef" class="text-reflection-wrapper" style="position: relative; pointer-events: none;" :style="{
         width: (element.style?.writingMode === 'vertical-rl' || element.style?.writingMode === 'vertical-lr') ? 'auto' : '100%',
         height: (element.style?.writingMode === 'vertical-rl' || element.style?.writingMode === 'vertical-lr') ? '100%' : 'auto'
       }">
         <div
+          ref="shapeEditableRef"
           :id="`editable-${element.id}`"
           :contenteditable="isTextSelectable ? 'true' : 'false'"
           @mousedown="isTextSelectable ? $event.stopPropagation() : null"

package/src/components/canvas/elements/CanvasTextElement.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { computed, ref, watch, onMounted } from 'vue'
+import { computed, ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { getFontVariantStyle } from '../../../configs/fonts'
 import { useSlides } from '../../../composables/useSlides'
+import { createTextSelectionOverlay, type TextSelectionOverlayHandle } from '../textSelectionOverlay'
 
 const { shapeFormatPainter } = useSlides()
 const isTextPaintActive = computed(() => !!(shapeFormatPainter.value && shapeFormatPainter.value.mode === 'text-range'))
@@ -27,8 +28,9 @@ const targetHtml = computed(() => {
 
 function syncContentToDom(force = false) {
   if (!editableRef.value) return
-  // 如果当前正在编辑并且当前元素是焦点所在，绝不强制用 HTML 冲刷 DOM，防止光标跳到开头
-  if (!force && document.activeElement === editableRef.value) {
+  // 编辑中（焦点在元素自身或其内部——表格编辑时焦点在动态设 contenteditable 的 td 上）
+  // 绝不强制用 HTML 冲刷 DOM，防止光标/选中丢失；结构操作经 commitTableContent 强制同步
+  if (!force && document.activeElement && editableRef.value.contains(document.activeElement)) {
     return
   }
   const newHtml = targetHtml.value || ''
@@ -51,6 +53,32 @@ onMounted(() => {
   syncContentToDom(true)
 })
 
+// 编辑态：安装自绘选区高亮（原生 ::selection 几何跟随 CJK 字体度量，条顶空白过大）
+const wrapperRef = ref<HTMLElement | null>(null)
+let selOverlay: TextSelectionOverlayHandle | null = null
+
+const isVerticalWriting = computed(() => {
+  const wm = props.element.style?.writingMode
+  return wm === 'vertical-rl' || wm === 'vertical-lr'
+})
+
+watch([isTextSelectable, isVerticalWriting], ([selectable]) => {
+  nextTick(() => {
+    selOverlay?.destroy()
+    selOverlay = null
+    if (selectable && !isVerticalWriting.value && !props.element.latex) {
+      const ed = editableRef.value
+      const host = wrapperRef.value
+      if (ed && host) selOverlay = createTextSelectionOverlay(ed, host)
+    }
+  })
+}, { immediate: true })
+
+onBeforeUnmount(() => {
+  selOverlay?.destroy()
+  selOverlay = null
+})
+
 const emit = defineEmits<{
   (e: 'focusin'): void
   (e: 'focusout', ev: FocusEvent): void
@@ -129,6 +157,7 @@ function handleMaskMouseDown(e: MouseEvent) {
 
 <template>
   <div
+    ref="wrapperRef"
     class="text-reflection-wrapper"
     :style="{
       position: 'relative',
@@ -202,12 +231,13 @@ function handleMaskMouseDown(e: MouseEvent) {
         ['-webkit-text-stroke']: getTextStrokeStyle ? getTextStrokeStyle(element) : 'none',
         ['paint-order']: element.style?.enableTextStroke ? 'stroke fill' : 'normal',
         ['text-shadow']: getElementTextShadow ? getElementTextShadow(element) : 'none',
-        backgroundColor: 'transparent',
-        borderWidth: '0px',
-        borderStyle: 'solid',
-        borderColor: 'transparent',
-        borderRadius: '0px',
-        lineHeight: element.style?.lineHeight || 'normal',
+        // 与顶层 text 元素对齐：填充/边框来自 style（否则组内子元素设置填充、边框颜色不生效）
+        backgroundColor: element.style?.fill || 'transparent',
+        borderWidth: element.style?.borderWidth || '0px',
+        borderStyle: element.style?.borderStyle || 'solid',
+        borderColor: element.style?.borderColor || 'transparent',
+        borderRadius: element.style?.borderRadius || '0px',
+        lineHeight: element.style?.lineHeight || element.lineHeight || element.text?.lineHeight || 'normal',
         letterSpacing: element.style?.letterSpacing || 'normal',
         textAlign: (element.style?.textAlign === 'distribute' ? 'justify' : (element.style?.textAlign || 'left')) as any,
         textAlignLast: (element.style?.textAlign === 'distribute' ? 'justify' : 'auto') as any,