jvs-ppt-ui 0.0.16 → 0.0.18

package/src/components/material/useDamAuth.ts

@@ -0,0 +1,239 @@
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useSlides } from '../../composables/useSlides'
+
+/**
+ * 读取指定名称的 Cookie
+ */
+export function getCookieValue(cname: string): string {
+  if (typeof document === 'undefined' || !document.cookie) return ''
+  const name = cname + '='
+  const parts = document.cookie.split(';')
+  for (let i = 0; i < parts.length; i++) {
+    const item = parts[i]?.trim()
+    if (item && item.indexOf(name) === 0) {
+      try {
+        return decodeURIComponent(item.substring(name.length))
+      } catch {
+        return item.substring(name.length)
+      }
+    }
+  }
+  return ''
+}
+
+/**
+ * 从 Storage 中读取指定 key（兼容 jvs- 前缀包装格式与原始字符串格式）
+ */
+function readStorageKey(storage: Storage | undefined, key: string): string {
+  if (!storage) return ''
+  try {
+    const raw = storage.getItem(key)
+    if (!raw) return ''
+    try {
+      const parsed = JSON.parse(raw)
+      if (parsed && typeof parsed === 'object' && 'content' in parsed) {
+        return typeof parsed.content === 'string' ? parsed.content.trim() : ''
+      }
+      if (typeof parsed === 'string') return parsed.trim()
+    } catch {
+      return raw.trim()
+    }
+  } catch {
+    return ''
+  }
+  return ''
+}
+
+/**
+ * 提取 jvs_session_v3 登录凭证
+ * 判定顺序：
+ * 1. document.cookie 中的 jvs_session_v3
+ * 2. localStorage / sessionStorage 中的 jvs_session_v3、jvs-jvs_session_v3、jvs-sessionV3、sessionV3
+ * 3. materialHeaders 中显式传入的 jvs_session_v3
+ */
+export function resolveJvsSessionV3(extraHeaders?: Record<string, string>): string {
+  if (typeof window === 'undefined') return ''
+
+  // 1. Cookie: jvs_session_v3
+  const fromCookie = getCookieValue('jvs_session_v3')
+  if (fromCookie && fromCookie.trim()) {
+    return fromCookie.trim()
+  }
+
+  // 2. LocalStorage / SessionStorage
+  const candidateKeys = ['jvs_session_v3', 'jvs-jvs_session_v3', 'jvs-sessionV3', 'sessionV3']
+  for (const key of candidateKeys) {
+    const localVal = readStorageKey(window.localStorage, key)
+    if (localVal) return localVal
+    const sessionVal = readStorageKey(window.sessionStorage, key)
+    if (sessionVal) return sessionVal
+  }
+
+  // 3. 外部注入的 Headers
+  if (extraHeaders) {
+    const headerVal = extraHeaders['jvs_session_v3'] || extraHeaders['JVS_SESSION_V3']
+    if (typeof headerVal === 'string' && headerVal.trim()) {
+      return headerVal.trim()
+    }
+  }
+
+  return ''
+}
+
+/**
+ * 提取 DAM 服务基础路径（默认 /jvs-dam）
+ */
+export function resolveDamBaseUrl(configuredUrl?: string): string {
+  if (configuredUrl && configuredUrl.trim()) {
+    const clean = configuredUrl.trim()
+    const damIdx = clean.indexOf('/jvs-dam')
+    if (damIdx >= 0) {
+      return clean.slice(0, damIdx + '/jvs-dam'.length)
+    }
+  }
+  return '/jvs-dam'
+}
+
+export type DamMainTab = 'search' | 'mine' | 'create'
+
+/**
+ * 跨组件共享的素材库顶层 Tab 状态（支持画布占位符「AI生成」直接跳转至「创建素材」）
+ */
+const sharedMaterialMainTab = ref<DamMainTab>('search')
+
+export function setSharedMaterialMainTab(tab: DamMainTab) {
+  sharedMaterialMainTab.value = tab
+}
+
+/**
+ * DAM 登录态与通用请求工具 Composable
+ */
+export function useDamAuth() {
+  const { materialApiUrl, materialHeaders } = useSlides()
+  const sessionTick = ref(0)
+  let pollTimer: ReturnType<typeof setInterval> | null = null
+
+  const refreshSessionState = () => {
+    sessionTick.value++
+  }
+
+  onMounted(() => {
+    window.addEventListener('storage', refreshSessionState)
+    window.addEventListener('focus', refreshSessionState)
+    // 定期轻量同步 Cookie 中 jvs_session_v3 的变化
+    pollTimer = setInterval(refreshSessionState, 2000)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('storage', refreshSessionState)
+    window.removeEventListener('focus', refreshSessionState)
+    if (pollTimer) {
+      clearInterval(pollTimer)
+      pollTimer = null
+    }
+  })
+
+  const sessionV3 = computed(() => {
+    // 依赖 sessionTick 以感知 cookie 变化
+    void sessionTick.value
+    return resolveJvsSessionV3(materialHeaders.value)
+  })
+
+  /** 是否已登录（仅当 jvs_session_v3 存在有效内容时为 true） */
+  const isDamLoggedIn = computed(() => Boolean(sessionV3.value))
+
+  const damBaseUrl = computed(() => resolveDamBaseUrl(materialApiUrl.value))
+
+  /**
+   * 构造携带鉴权信息的 Headers
+   */
+  function buildDamHeaders(isJson = true): Record<string, string> {
+    const headers: Record<string, string> = {
+      'jvs-rule-ua': encodeURI('2.4'),
+      ...(materialHeaders.value || {})
+    }
+    if (isJson) {
+      headers['Content-Type'] = 'application/json;charset=utf-8'
+    }
+    const token = sessionV3.value || readStorageKey(window?.localStorage, 'jvs-access_token')
+    if (token && !headers['Authorization'] && !headers['authorization']) {
+      headers['Authorization'] = `Bearer ${token}`
+    }
+    const tenantId = readStorageKey(window?.localStorage, 'jvs-tenantId')
+    if (tenantId && !headers['tenant-id']) {
+      headers['tenant-id'] = tenantId
+    }
+    return headers
+  }
+
+  /**
+   * 统一安全的 JSON 请求封装
+   */
+  async function damFetchJson<T = any>(
+    pathOrUrl: string,
+    options: RequestInit & { params?: Record<string, any> } = {}
+  ): Promise<T> {
+    const base = damBaseUrl.value
+    let fullUrl = pathOrUrl.startsWith('http') || pathOrUrl.startsWith('/jvs-')
+      ? pathOrUrl
+      : `${base}${pathOrUrl.startsWith('/') ? '' : '/'}${pathOrUrl}`
+
+    if (options.params) {
+      const searchParams = new URLSearchParams()
+      Object.entries(options.params).forEach(([k, v]) => {
+        if (v !== undefined && v !== null && v !== '') {
+          if (Array.isArray(v)) {
+            if (v.length > 0) searchParams.append(k, v.join(','))
+          } else {
+            searchParams.append(k, String(v))
+          }
+        }
+      })
+      const qs = searchParams.toString()
+      if (qs) {
+        fullUrl += (fullUrl.includes('?') ? '&' : '?') + qs
+      }
+    }
+
+    const isFormData = typeof FormData !== 'undefined' && options.body instanceof FormData
+    const mergedHeaders = {
+      ...buildDamHeaders(!isFormData),
+      ...((options.headers as Record<string, string>) || {})
+    }
+    if (isFormData) {
+      delete mergedHeaders['Content-Type']
+      delete mergedHeaders['content-type']
+    }
+
+    const response = await fetch(fullUrl, {
+      ...options,
+      credentials: 'include',
+      headers: mergedHeaders
+    })
+
+    const rawText = await response.text()
+    if (!response.ok) {
+      throw new Error(`请求异常 (${response.status})`)
+    }
+    const trimmed = rawText.trim()
+    if (trimmed.startsWith('<') || trimmed.toLowerCase().startsWith('<!doctype')) {
+      throw new Error('接口返回了非 JSON 格式响应')
+    }
+    try {
+      return JSON.parse(rawText) as T
+    } catch (err: any) {
+      throw new Error(`数据解析失败: ${err.message}`)
+    }
+  }
+
+  return {
+    sessionV3,
+    isDamLoggedIn,
+    damBaseUrl,
+    sharedMaterialMainTab,
+    setSharedMaterialMainTab,
+    refreshSessionState,
+    buildDamHeaders,
+    damFetchJson
+  }
+}

package/src/components/sidebar/panels/SidebarTextFormatPanel.vue

@@ -298,7 +298,7 @@ function onFontSizeEnter(e: KeyboardEvent) {
 function onFontSizeBlur(e: FocusEvent) {
   const target = e.target as HTMLInputElement
   const raw = target.value.trim()
-  if (raw) {
+  if (raw && raw !== fontSizeClean.value) {
     emit('changeFontSize', raw)
   }
 }

package/src/composables/canvas/useCanvasText.ts

@@ -89,9 +89,8 @@ export function useCanvasText(options: TextOptions) {
 
     if (textNodes.length === 0) return null
 
-    let bestNode: Text | null = null
-    let bestOffset = 0
-    let minCost = Infinity
+    const charItems: { node: Text; index: number; rect: DOMRect; rowTop: number; rowBottom: number }[] = []
+    const rows: { top: number; bottom: number; items: typeof charItems }[] = []
 
     for (const node of textNodes) {
       const len = node.nodeValue?.length || 0
@@ -104,24 +103,51 @@ export function useCanvasText(options: TextOptions) {
         const charRect = charRange.getBoundingClientRect()
         if (charRect.width === 0 && charRect.height === 0) continue
 
-        const inRow = y >= charRect.top && y <= charRect.bottom
-        const dy = inRow ? 0 : Math.min(Math.abs(y - charRect.top), Math.abs(y - charRect.bottom))
+        const item = { node, index: i, rect: charRect, rowTop: charRect.top, rowBottom: charRect.bottom }
+        charItems.push(item)
 
-        // 候选点 1：字符左边缘（光标置于 i）
-        const costLeft = (dy * 200) + Math.abs(x - charRect.left)
-        if (costLeft < minCost) {
-          minCost = costLeft
-          bestNode = node
-          bestOffset = i
+        // 将同一视觉行（垂直方向重叠）的字符归并，共享整行的上下边界，防止同行小字号字符因字高较矮被误判为不在当前行
+        let matchedRow = rows.find(r => Math.min(r.bottom, charRect.bottom) > Math.max(r.top, charRect.top) - 2)
+        if (matchedRow) {
+          matchedRow.top = Math.min(matchedRow.top, charRect.top)
+          matchedRow.bottom = Math.max(matchedRow.bottom, charRect.bottom)
+          matchedRow.items.push(item)
+        } else {
+          rows.push({ top: charRect.top, bottom: charRect.bottom, items: [item] })
         }
+      }
+    }
 
-        // 候选点 2：字符右边缘（光标置于 i + 1）
-        const costRight = (dy * 200) + Math.abs(x - charRect.right)
-        if (costRight < minCost) {
-          minCost = costRight
-          bestNode = node
-          bestOffset = i + 1
-        }
+    for (const r of rows) {
+      for (const item of r.items) {
+        item.rowTop = r.top
+        item.rowBottom = r.bottom
+      }
+    }
+
+    let bestNode: Text | null = null
+    let bestOffset = 0
+    let minCost = Infinity
+
+    for (const item of charItems) {
+      const { node, index: i, rect: charRect, rowTop, rowBottom } = item
+      const inRow = y >= rowTop && y <= rowBottom
+      const dy = inRow ? 0 : Math.min(Math.abs(y - rowTop), Math.abs(y - rowBottom))
+
+      // 候选点 1：字符左边缘（光标置于 i）；在两字符交界处优先保留前一字符右边缘（i + 1），使光标落点归属前一字符
+      const costLeft = (dy * 200) + Math.abs(x - charRect.left)
+      if (costLeft < minCost - 0.5) {
+        minCost = costLeft
+        bestNode = node
+        bestOffset = i
+      }
+
+      // 候选点 2：字符右边缘（光标置于 i + 1）
+      const costRight = (dy * 200) + Math.abs(x - charRect.right)
+      if (costRight <= minCost + 0.5) {
+        if (costRight < minCost) minCost = costRight
+        bestNode = node
+        bestOffset = i + 1
       }
     }
 

package/src/composables/sidebar/useSidebarTextFormat.ts

@@ -16,6 +16,7 @@ import {
 } from '../../utils/listIndent'
 import { parseColor, hexToRgba } from './useSidebarShapeFormat'
 import { getFormatFromElement, getFormatFromSelection } from '../../utils/canvas/formatPainter'
+import { resolveEffectiveElementFontSize } from '../../utils/canvas/elementStyles'
 import { isEllipseShape } from '../../utils/line'
 import { defaultStyleRecipe } from '../presetThemes'
 import {
@@ -66,8 +67,23 @@ export function useSidebarTextFormat(
     }
   })
 
+  let savedSidebarRange: Range | null = null
+
   const styleFontSize = computed({
-    get() { return getStyleVal('fontSize', '16px') },
+    get() {
+      selectionTrigger.value
+      const el = selectedElement.value as any
+      if (el) {
+        const container = typeof document !== 'undefined' ? document.getElementById(`editable-${el.id}`) : null
+        const isEditing = Boolean(container && (container.getAttribute('contenteditable') === 'true' || container === document.activeElement || container.contains(document.activeElement)))
+        return resolveEffectiveElementFontSize(el, {
+          isEditing,
+          savedRange: isEditing ? savedSidebarRange : null,
+          fallback: '16px'
+        })
+      }
+      return getStyleVal('fontSize', '16px')
+    },
     set(val: string) { setStyleVal('fontSize', val) }
   })
 
@@ -597,7 +613,44 @@ export function useSidebarTextFormat(
         return
       }
     }
+
+    const el = selectedElement.value as any
+    const sel = typeof window !== 'undefined' ? window.getSelection() : null
+    const container = el ? document.getElementById(`editable-${el.id}`) : null
+    if (container && sel) {
+      const activeRange = (sel.rangeCount > 0 && container.contains(sel.getRangeAt(0).commonAncestorContainer))
+        ? sel.getRangeAt(0)
+        : (savedSidebarRange && container.contains(savedSidebarRange.commonAncestorContainer) ? savedSidebarRange : null)
+      if (activeRange && !activeRange.collapsed) {
+        sel.removeAllRanges()
+        sel.addRange(activeRange)
+        document.execCommand('fontSize', false, '7')
+        const fontElements = container.querySelectorAll('font[size="7"]')
+        if (fontElements.length > 0) {
+          fontElements.forEach((font: any) => {
+            const span = document.createElement('span')
+            span.style.fontSize = formattedSize
+            span.innerHTML = font.innerHTML
+            span.querySelectorAll('*').forEach((child: any) => {
+              if (child.style && child.style.fontSize) {
+                child.style.fontSize = ''
+              }
+              if (child.tagName === 'FONT') {
+                child.removeAttribute('size')
+              }
+            })
+            font.parentNode.replaceChild(span, font)
+          })
+          syncContainerContentToElement(el)
+          selectionTrigger.value++
+          addHistorySnapshot()
+          return
+        }
+      }
+    }
+
     setStyleVal('fontSize', formattedSize)
+    selectionTrigger.value++
   }
 
   function syncContainerContentToElement(el: any) {
@@ -739,9 +792,27 @@ export function useSidebarTextFormat(
   // Selection trigger for tracking lists and caret
   const selectionTrigger = ref(0)
   const handleSelectionChange = () => {
+    if (typeof window !== 'undefined') {
+      const sel = window.getSelection()
+      if (sel && sel.rangeCount > 0) {
+        const range = sel.getRangeAt(0)
+        let node: Node | null = range.commonAncestorContainer
+        if (node && node.nodeType !== Node.ELEMENT_NODE) {
+          node = node.parentNode
+        }
+        if (node && (node as HTMLElement).closest && (node as HTMLElement).closest('[id^="editable-"]')) {
+          savedSidebarRange = range.cloneRange()
+        }
+      }
+    }
     selectionTrigger.value++
   }
 
+  watch(() => selectedElementId.value, () => {
+    savedSidebarRange = null
+    selectionTrigger.value++
+  })
+
   onMounted(() => {
     document.addEventListener('selectionchange', handleSelectionChange)
   })