jvs-ppt-ui 0.0.9 → 0.0.11

package/src/style.css

@@ -50,6 +50,68 @@
   padding: 0;
 }
 
+/* -------------------------------------------------------------
+ * 🛡️ [CSS Defensive Shield] 容器级样式防御屏障
+ * 彻底切断外部宿主全局样式（如 button, svg, *, line-height 等）的侵入
+ * ------------------------------------------------------------- */
+.jvs-ppt-editor-root {
+  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
+  font-size: 14px !important;
+  line-height: 1.5 !important;
+  color: #0f172a !important;
+  text-align: left !important;
+  letter-spacing: normal !important;
+  word-spacing: normal !important;
+  box-sizing: border-box !important;
+  -webkit-font-smoothing: antialiased !important;
+}
+
+.jvs-ppt-editor-root *,
+.jvs-ppt-editor-root *::before,
+.jvs-ppt-editor-root *::after {
+  box-sizing: border-box;
+}
+
+/* 强行重置外部宿主全局 button 样式侵入 */
+.jvs-ppt-editor-root button {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: normal;
+  text-transform: none;
+  margin: 0;
+  border: none;
+  background: transparent;
+  outline: none;
+  box-shadow: none;
+  cursor: pointer;
+  -webkit-appearance: none;
+}
+
+/* 强行重置外部宿主全局 svg 样式侵入 */
+.jvs-ppt-editor-root svg {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/* 强行重置外部宿主全局 a 标签样式侵入 */
+.jvs-ppt-editor-root a {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* 强行重置外部宿主全局 button 样式侵入（防 text-indent, line-height, text-transform, pseudo elements） */
+.jvs-ppt-editor-root button {
+  box-sizing: border-box !important;
+  text-transform: none !important;
+  text-indent: 0 !important;
+  letter-spacing: normal !important;
+}
+
+.jvs-ppt-editor-root button::before,
+.jvs-ppt-editor-root button::after {
+  content: none !important;
+}
+
 button,
 select,
 input,
@@ -1024,6 +1086,12 @@ td.selected-cell,
   outline: none !important;
 }
 
+/* 焦点（光标）所在的唯一选中格：不显示选中蒙层，避免"光标在单元格里还显示选中效果" */
+td.selected-cell.focused-cell,
+.canvas-element td.selected-cell.focused-cell {
+  background-image: none !important;
+}
+
 .table-tick-dot {
   width: 6px !important;
   height: 6px !important;
@@ -4013,6 +4081,26 @@ td.selected-cell,
   background-color: rgba(100, 116, 139, 0.45) !important;
 }
 
+/* 画布编辑态自绘选区高亮：原生 ::selection 的几何跟随行盒/字体度量
+   （CJK 回退字体 ascent 偏大 → 高亮条顶空白过多、行间空白带宽），
+   CSS 无法控制其几何，故编辑态改用 overlay 绘制并隐藏原生高亮。
+   .text-selection-overlay-active 挂在与 editable 同坐标系的宿主上，
+   只有 overlay 成功画出条时才添加，失败自动回落原生表现。 */
+.text-selection-overlay-active ::selection {
+  background-color: transparent !important;
+}
+
+.text-selection-overlay {
+  pointer-events: none;
+}
+
+.text-selection-bar {
+  position: absolute;
+  background-color: rgba(100, 116, 139, 0.45);
+  border-radius: 2px;
+  box-sizing: border-box;
+}
+
 /* Custom cursor for format painter mode */
 .main-slide.format-painting-mode,
 .main-slide.format-painting-mode * {

package/src/types/index.ts

@@ -94,6 +94,8 @@ export interface PptEditorConfig {
   title?: string
   /** 是否显示左上角主菜单按钮（导入/导出/快捷键等弹窗菜单），默认为 true */
   showMenu?: boolean
+  /** 工具栏布局模式：'auto' (自适应折叠)、'more' (收纳更多功能模式，适合弹窗/小屏)、'full' (全展开)，默认为 'auto' */
+  toolbarMode?: 'auto' | 'more' | 'full'
   /** 是否启用 AI PPT 智能生成与一键美化功能。未配置或为 false 时不显示一键美化功能 */
   enableAi?: boolean
   /** AI 一键美化请求接口地址。如果未配置或未开启，则不显示一键美化功能 */
@@ -142,6 +144,8 @@ export interface PptEditorProps {
   showHeader?: boolean
   /** 是否显示左上角主菜单按钮（导入/导出/快捷键等弹窗菜单），默认为 true */
   showMenu?: boolean
+  /** 工具栏布局模式：'auto' (自适应折叠)、'more' (收纳更多功能模式，适合弹窗/小屏)、'full' (全展开)，默认为 'auto' */
+  toolbarMode?: 'auto' | 'more' | 'full'
   /** 是否显示左侧缩略图导航栏 */
   showSidebarLeft?: boolean
   /** 是否显示右侧属性面板 */

package/src/utils/pptxShapes.ts

@@ -76,7 +76,7 @@ export interface ShapePoolItem {
   withborder?: boolean
 }
 
-interface ShapeListItem {
+export interface ShapeListItem {
   type: string
   children: ShapePoolItem[]
 }

package/src/utils/pptxShapesLazy.ts

@@ -0,0 +1,39 @@
+import { shallowRef } from 'vue'
+import type { ShapeListItem, ShapePathFormula } from './pptxShapes'
+
+type PptxShapesModule = typeof import('./pptxShapes')
+
+// 98KB 形状公式/预设表从启动 chunk 拆出：本模块求值时即后台加载（不阻塞首屏），
+// 表就绪后写入 shallowRef，依赖它的 computed（如形状调整点 keypoints）会自动重算。
+export const pptxShapeFormulas = shallowRef<Record<string, ShapePathFormula> | null>(null)
+export const pptxShapeList = shallowRef<ShapeListItem[] | null>(null)
+
+const EMPTY_FORMULAS: Record<string, ShapePathFormula> = {}
+const EMPTY_LIST: ShapeListItem[] = []
+
+/** 同步读取形状公式表；未就绪时返回空表（调用点均有 if (formulaObj) 守卫，安全降级） */
+export function shapeFormulas(): Record<string, ShapePathFormula> {
+  return pptxShapeFormulas.value ?? EMPTY_FORMULAS
+}
+
+/** 同步读取形状预设列表；未就绪时返回空数组 */
+export function shapeList(): ShapeListItem[] {
+  return pptxShapeList.value ?? EMPTY_LIST
+}
+
+let loadPromise: Promise<PptxShapesModule> | null = null
+
+/** 确保形状表已加载；文件导入/DSL 编译等异步解析路径在调用解析器前 await 一次 */
+export function ensurePptxShapes(): Promise<PptxShapesModule> {
+  if (!loadPromise) {
+    loadPromise = import('./pptxShapes').then(mod => {
+      pptxShapeFormulas.value = mod.SHAPE_PATH_FORMULAS
+      pptxShapeList.value = mod.SHAPE_LIST
+      return mod
+    })
+  }
+  return loadPromise
+}
+
+// 启动即后台预载：与首屏渲染并行，用户首次交互（插形状/拖调整点/导文件）前早已就绪
+ensurePptxShapes()

package/src/utils/svgPathParser.ts

@@ -71,6 +71,13 @@ export const getSvgPathRange = (path: string) => {
     for (const item of pathData.commands) {
       if ('x' in item) xList.push(item.x)
       if ('y' in item) yList.push(item.y)
+      // 贝塞尔控制点也纳入边界：曲线的实际极值可能只出现在控制点上
+      // （端点算出的范围会偏小，导致 viewBox 被错误收窄、形状被拉伸），
+      // 与 normalizeSvgPath 的边界口径保持一致。
+      if ('x1' in item) xList.push(item.x1)
+      if ('y1' in item) yList.push(item.y1)
+      if ('x2' in item) xList.push(item.x2)
+      if ('y2' in item) yList.push(item.y2)
     }
     return {
       minX: Math.min(...xList),
@@ -102,9 +109,13 @@ export const normalizeSvgPath = (path: string) => {
 
     const xList: number[] = []
     const yList: number[] = []
-    for (const item of pathData.commands) {
+    for (const item of pathData.commands as any[]) {
       if ('x' in item) xList.push(item.x)
       if ('y' in item) yList.push(item.y)
+      if ('x1' in item) xList.push(item.x1)
+      if ('y1' in item) yList.push(item.y1)
+      if ('x2' in item) xList.push(item.x2)
+      if ('y2' in item) yList.push(item.y2)
     }
 
     if (xList.length === 0 || yList.length === 0) {