"优化：编辑器图标实现方式并更新mock数据"

2025-10-17 11:08:40 +08:00
parent 0a89eda20b
commit f8bd8f1782
2 changed files with 59 additions and 121 deletions
--- a/src/components/RichTextEditor.vue
+++ b/src/components/RichTextEditor.vue
@@ -64,13 +64,13 @@ const eventManager = {
      const deleteHandler = function (e) {
        e.stopPropagation()
        e.preventDefault()
-        
+
        // 检查删除按钮是否可见，只有在可见状态下才能触发删除
        if (deleteBtn.classList.contains('visible')) {
          // 检查是否是刚显示的按钮点击（通过时间戳判断）
          const lastVisibleTime = deleteBtn._lastVisibleTime || 0
          const currentTime = Date.now()
-          
+
          // 如果距离上次显示时间超过300ms，才执行删除操作
          if (currentTime - lastVisibleTime > 300) {
            container.remove()
@@ -86,7 +86,7 @@ const eventManager = {
    // 为图片容器添加短按事件以显示/隐藏删除按钮
    let touchStartTime = 0
    let isDeleteButtonClicked = false
-    
+
    // 标记删除按钮被点击
    const markDeleteButtonClicked = function () {
      isDeleteButtonClicked = true
@@ -95,7 +95,7 @@ const eventManager = {
        isDeleteButtonClicked = false
      }, 300)
    }
-    
+
    // 如果删除按钮存在，为其添加标记事件
    if (deleteBtn) {
      deleteBtn._markClickHandler = markDeleteButtonClicked
@@ -106,27 +106,27 @@ const eventManager = {
      touchStartTime = Date.now()
    }

-    const touchEndHandler = function (e) {
-      const touchDuration = Date.now() - touchStartTime
-      // 短按（小于200ms）且非长按拖拽状态且不是删除按钮点击时切换删除按钮显示
-      if (touchDuration < 200 && !dragState.value.isLongPress && !isDeleteButtonClicked) {
-        e.stopPropagation()
-        // 切换删除按钮的显示状态
-        if (deleteBtn) {
-          const isCurrentlyVisible = deleteBtn.classList.contains('visible')
-          if (isCurrentlyVisible) {
-            deleteBtn.classList.remove('visible')
-          } else {
-            deleteBtn.classList.add('visible')
-            // 记录显示时间
-            deleteBtn._lastVisibleTime = Date.now()
-          }
-        }
-      }
-      // 重置删除按钮点击标记
-      setTimeout(() => {
-        isDeleteButtonClicked = false
-      }, 50)
+    const touchEndHandler = function (e) {
+      const touchDuration = Date.now() - touchStartTime
+      // 短按（小于200ms）且非长按拖拽状态且不是删除按钮点击时切换删除按钮显示
+      if (touchDuration < 200 && !dragState.value.isLongPress && !isDeleteButtonClicked) {
+        e.stopPropagation()
+        // 切换删除按钮的显示状态
+        if (deleteBtn) {
+          const isCurrentlyVisible = deleteBtn.classList.contains('visible')
+          if (isCurrentlyVisible) {
+            deleteBtn.classList.remove('visible')
+          } else {
+            deleteBtn.classList.add('visible')
+            // 记录显示时间
+            deleteBtn._lastVisibleTime = Date.now()
+          }
+        }
+      }
+      // 重置删除按钮点击标记
+      setTimeout(() => {
+        isDeleteButtonClicked = false
+      }, 50)
    }

    container.addEventListener('touchstart', touchStartHandler)
@@ -160,7 +160,7 @@ const eventManager = {
      container.removeEventListener('touchend', touchEndHandler)
      delete container._touchEndHandler
    }
-    
+
    if (markDeleteButtonClicked) {
      delete container._markDeleteButtonClicked
    }
@@ -172,7 +172,7 @@ const eventManager = {
        deleteBtn.removeEventListener('click', deleteBtn._deleteHandler)
        delete deleteBtn._deleteHandler
      }
-      
+
      if (deleteBtn._markClickHandler) {
        deleteBtn.removeEventListener('touchstart', deleteBtn._markClickHandler)
        delete deleteBtn._markClickHandler
@@ -444,11 +444,9 @@ const insertQuote = () => {
    const quoteContainer = document.createElement('div')
    quoteContainer.className = 'quote-container'

-    // 创建图标元素
-    const icon = document.createElement('img')
+    // 创建图标元素（使用CSS背景而非img标签）
+    const icon = document.createElement('div')
    icon.className = 'quote-icon'
-    icon.src = '/assets/icons/drawable-xxhdpi/rag_quote.png'
-    icon.alt = '引用'

    // 创建内容容器
    const contentSpan = document.createElement('div')
@@ -507,11 +505,9 @@ const createTodoItem = (text = '') => {
  todoContainer.contentEditable = false // 容器本身不可编辑
  todoContainer.className = 'todo-container'

-  // 创建图标元素（复选框）
-  const icon = document.createElement('img')
+  // 创建图标元素（复选框，使用CSS背景而非img标签）
+  const icon = document.createElement('div')
  icon.className = 'todo-icon'
-  icon.src = '/assets/icons/drawable-xxhdpi/rtf_icon_gtasks.png' // 未完成状态图标
-  icon.alt = '待办事项'

  // 创建内容容器（可编辑区域）
  const contentSpan = document.createElement('div')
@@ -531,16 +527,16 @@ const addTodoEventListeners = (icon, contentSpan, todoContainer) => {
  // 添加事件监听器到图标，实现待办事项完成状态切换
  icon.addEventListener('click', function () {
    // 根据当前状态切换图标和样式
-    if (this.src.includes('rtf_icon_gtasks.png')) {
-      // 切换到完成状态
-      this.src = '/assets/icons/drawable-xxhdpi/rtf_icon_gtasks_light.png' // 完成状态图标
-      contentSpan.style.color = 'var(--text-tertiary)' // 灰色文字
-      contentSpan.style.textDecoration = 'line-through' // 添加删除线
-    } else {
+    if (this.classList.contains('completed')) {
      // 切换到未完成状态
-      this.src = '/assets/icons/drawable-xxhdpi/rtf_icon_gtasks.png' // 未完成状态图标
+      this.classList.remove('completed')
      contentSpan.style.color = 'var(--note-content)' // 正常文字颜色
      contentSpan.style.textDecoration = 'none' // 移除删除线
+    } else {
+      // 切换到完成状态
+      this.classList.add('completed')
+      contentSpan.style.color = 'var(--text-tertiary)' // 灰色文字
+      contentSpan.style.textDecoration = 'line-through' // 添加删除线
    }
    handleInput() // 触发内容更新
  })
@@ -1695,7 +1691,7 @@ defineExpose({

 /* 优化段落样式，确保与基准线对齐 */
 :deep(.editor-content p) {
-  margin: 0 0 0.75rem 0;
+  margin: 0;
  line-height: var(--editor-line-height, 1.6);
  letter-spacing: 0.3px;
 }
@@ -1704,7 +1700,7 @@ defineExpose({
 :deep(.editor-content h2) {
  font-size: var(--editor-font-size, 1rem);
  font-weight: 600;
-  margin: 0 0 0.75rem 0;
+  margin: 0;
  color: var(--note-title);
  line-height: var(--editor-line-height, 1.6);
  letter-spacing: 0.3px;
@@ -1715,7 +1711,7 @@ defineExpose({
 :deep(.editor-content blockquote) {
  border-left: 3px solid var(--primary);
  padding: 0 1rem 0 1rem;
-  margin: 0 0 0.75rem 0;
+  margin: 0;
  color: var(--text-secondary);
  background-color: var(--background-secondary);
  font-style: italic;
@@ -1724,7 +1720,7 @@ defineExpose({

 :deep(.quote-container) {
  position: relative;
-  margin: 0 0 0.75rem 0;
+  margin: 0;
  line-height: var(--editor-line-height, 1.6);
 }

@@ -1735,11 +1731,15 @@ defineExpose({
  width: var(--editor-font-size, 1rem);
  height: var(--editor-font-size, 1rem);
  margin-top: 0.1875rem;
+  background-image: url('/assets/icons/drawable-xxhdpi/rag_quote.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
 }

 :deep(.quote-content) {
  border-left: 3px solid var(--primary);
-  padding: 0 var(--editor-font-size, 1rem) 0 2rem;
+  padding: 0 var(--editor-font-size, 1rem) 0 1rem;
  margin-left: var(--editor-font-size, 1rem);
  color: var(--text-secondary);
  background-color: var(--background-secondary);
@@ -1749,7 +1749,7 @@ defineExpose({

 :deep(.editor-content ul),
 :deep(.editor-content ol) {
-  margin: 0 0 0.75rem 0;
+  margin: 0;
  padding-left: 2rem;
  position: relative;
  line-height: var(--editor-line-height, 1.6);
@@ -1878,6 +1878,14 @@ defineExpose({
  top: 50%;
  left: 0;
  transform: translateY(-50%);
+  background-image: url('/assets/icons/drawable-xxhdpi/rtf_icon_gtasks.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+:deep(.todo-icon.completed) {
+  background-image: url('/assets/icons/drawable-xxhdpi/rtf_icon_gtasks_light.png');
 }

 :deep(.todo-content) {