@tnotesjs/ui 0.1.0

package/src/components/WordList/WordList.vue

@@ -0,0 +1,692 @@
+<script setup>
+import { marked } from 'marked'
+import { computed, ref, onMounted, onUnmounted, nextTick } from 'vue'
+
+import RightClickMenu from './RightClickMenu.vue'
+import {
+  WORD_LIST_FEATURES_FULL,
+  resolveWordListFeatures
+} from './wordListFeatures'
+
+const DEFAULT_WORDS_BASE_URL = 'https://github.com/tnotesjs/en-words/blob/main/'
+const DEFAULT_WORDS_RAW_BASE_URL =
+  'https://raw.githubusercontent.com/tnotesjs/en-words/refs/heads/main/'
+
+const props = defineProps({
+  words: {
+    type: Array,
+    default: () => [],
+  },
+  needSort: {
+    type: Boolean,
+    default: false,
+  },
+  wordsBaseUrl: {
+    type: String,
+    default: DEFAULT_WORDS_BASE_URL,
+  },
+  wordsRawBaseUrl: {
+    type: String,
+    default: DEFAULT_WORDS_RAW_BASE_URL,
+  },
+  /** Capability overrides; omit for full web/core behavior. */
+  features: {
+    type: Object,
+    default: () => ({ ...WORD_LIST_FEATURES_FULL }),
+  },
+})
+
+const features = computed(() => resolveWordListFeatures(props.features))
+
+const isMobile = computed(() => {
+  if (typeof navigator === 'undefined') return false
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent
+  )
+})
+
+// checkbox ---------------------------------------------------
+
+const pathname = typeof window !== 'undefined' ? window.location.pathname : ''
+const sortedWords = computed(() => {
+  const unique = [...new Set(props.words ?? [])]
+  if (!props.needSort) return unique
+  return unique.sort(
+    (a, b) => a.toLowerCase().charCodeAt(0) - b.toLowerCase().charCodeAt(0)
+  )
+})
+const checkedStates = ref({})
+
+const updateCheckedState = (word, isChecked) => {
+  const key = `${pathname}-${word}`
+  checkedStates.value[word] = isChecked
+  localStorage.setItem(key, isChecked)
+}
+
+const checkAll = () => {
+  Object.keys(checkedStates.value).forEach((word) => {
+    updateCheckedState(word, true)
+  })
+  hideContextMenu()
+}
+
+const reset = () => {
+  sortedWords.value.forEach((word) => {
+    const key = `${pathname}-${word}`
+    localStorage.removeItem(key)
+    checkedStates.value[word] = false
+  })
+  hideContextMenu()
+}
+
+// word card ---------------------------------------------------
+
+const topZIndex = ref(10000)
+
+const isAutoShowCard = ref(false)
+
+// 卡片状态
+const showCard = ref(false)
+const cardX = ref(0)
+const cardY = ref(0)
+const cardContent = ref('')
+const wordCache = ref({})
+
+// 加载失败的词汇（也就是词库中不存在的词汇）
+const failedWords = ref({})
+
+// pinnedCards: { id, word, x, y, isDragging }
+const pinnedCards = ref([])
+let draggingCard = null
+let offsetX = 0
+let offsetY = 0
+
+const CARD_DEFAULT_WIDTH = 400
+const CARD_DEFAULT_HEIGHT = 500
+
+let resizingCard = null
+let startX = 0
+let startY = 0
+let startWidth = 0
+let startHeight = 0
+
+// 右键菜单状态
+const contextMenuVisible = ref(false)
+const contextMenuX = ref(0)
+const contextMenuY = ref(0)
+let currentWordForContextMenu = null
+
+// 防抖计时器
+let hoverTimer = null
+
+/**
+ * 显示单词卡片
+ */
+const showWordCard = async (e, word) => {
+  if (!features.value.enableCards || !features.value.enableWordData) {
+    return Promise.resolve()
+  }
+  cardContent.value = '<em>加载中……</em>'
+  return new Promise((resolve) => {
+    clearTimeout(hoverTimer)
+    hoverTimer = setTimeout(async () => {
+      const { clientX, clientY } = e
+      cardX.value = clientX + 10
+      cardY.value = clientY + 10
+      showCard.value = true
+
+      if (wordCache.value[word]) {
+        cardContent.value = wordCache.value[word]
+        resolve()
+        return
+      }
+
+      const url = `${props.wordsRawBaseUrl}${encodeURIComponent(
+        word.toLowerCase().replaceAll(/\s/g, '_')
+      )}.md`
+      try {
+        const res = await fetch(url)
+        if (res.ok) {
+          let text = await res.text()
+          text = marked.parse(text)
+          wordCache.value[word] = text
+          cardContent.value = text
+        } else {
+          cardContent.value = `<em>无法加载单词内容</em>`
+        }
+      } catch (err) {
+        console.error(err)
+        cardContent.value = `<em>加载失败</em>`
+      }
+      resolve()
+    }, 300)
+  })
+}
+
+// const convertMarkdownToHTML = (text) => {
+//   const lines = text.trim().split('\n')
+//   let stack = [{ level: -1, html: [] }]
+
+//   for (let line of lines) {
+//     const match = line.match(/^(\s*)-\s(.*)/)
+//     if (!match) continue
+
+//     const indent = match[1].length
+//     const content = match[2]
+//     const currentLevel = stack[stack.length - 1]
+
+//     const imageMatch = content.match(/^!\$$(.+?)$$/)
+//     const processedContent = imageMatch
+//       ? `<img src="${imageMatch[1]}" alt="" />`
+//       : content
+
+//     // 1. 深了：如果缩进比上一级更深，开启新子列表
+//     if (indent > currentLevel.level) {
+//       stack.push({ level: indent, html: [] })
+//     }
+//     // 2. 浅了：如果缩进更浅，关闭之前的列表直到匹配层级
+//     else if (indent < currentLevel.level) {
+//       while (stack.length > 1 && stack[stack.length - 2].level >= indent) {
+//         const closed = stack.pop()
+//         const innerHTML = closed.html.join('')
+//         stack[stack.length - 1].html.push(`<ul>${innerHTML}</ul>`)
+//       }
+//     }
+//     // 3. 一致：stack[-1] 是与当前 indent 层级一致的节点，添加当前 li 内容。
+//     stack[stack.length - 1].html.push(`<li>${processedContent}</li>`)
+//   }
+
+//   // 清理栈中剩余的 ul
+//   while (stack.length > 1) {
+//     const closed = stack.pop()
+//     const innerHTML = closed.html.join('')
+//     stack[stack.length - 1].html.push(`<ul>${innerHTML}</ul>`)
+//   }
+//   console.log(stack)
+
+//   return stack[0].html.join('')
+// }
+
+const preloadWords = async () => {
+  if (!features.value.enableWordData) return
+  const wordsToPreload = sortedWords.value
+  if (!wordsToPreload.length) return
+
+  for (let i = 0; i < wordsToPreload.length; i++) {
+    const word = wordsToPreload[i]
+
+    // 如果已经缓存过，跳过
+    if (wordCache.value[word]) continue
+
+    const url = `${props.wordsRawBaseUrl}${encodeURIComponent(
+      word.toLowerCase().replaceAll(/\s/g, '_')
+    )}.md`
+    try {
+      const res = await fetch(url)
+      if (res.ok) {
+        let text = await res.text()
+        text = marked.parse(text)
+        wordCache.value[word] = text
+        console.log(`✅ 预加载完成: ${word}`)
+      } else {
+        wordCache.value[word] = `<em>无法加载单词内容</em>`
+        failedWords.value[word] = true
+      }
+    } catch (err) {
+      console.error(`❌ 加载失败: ${word}`, err)
+      wordCache.value[word] = `<em>加载失败</em>`
+      failedWords.value[word] = true
+    }
+
+    // 可选：加个延迟避免并发请求过多
+    await new Promise((resolve) => setTimeout(resolve, 200))
+  }
+}
+
+const pinCard = (word) => {
+  if (!features.value.enableCards) return
+  // 如果已存在该卡片则不再重复添加
+  if (pinnedCards.value.some((card) => card.word === word)) return
+
+  pinnedCards.value.push({
+    id: Date.now(),
+    word,
+    x: cardX.value,
+    y: cardY.value,
+    content: cardContent.value,
+    width: CARD_DEFAULT_WIDTH,
+    height: CARD_DEFAULT_HEIGHT,
+    zIndex: topZIndex.value++,
+  })
+}
+
+const bringToFront = (card) => {
+  const index = pinnedCards.value.indexOf(card)
+  if (index > -1) {
+    pinnedCards.value = [
+      ...pinnedCards.value.slice(0, index),
+      ...pinnedCards.value.slice(index + 1),
+      { ...card, zIndex: topZIndex.value++ },
+    ]
+  }
+}
+
+const removeCard = (id) => {
+  pinnedCards.value = pinnedCards.value.filter((card) => card.id !== id)
+}
+
+const startDrag = (card, e) => {
+  draggingCard = card
+  offsetX = e.clientX - card.x
+  offsetY = e.clientY - card.y
+  document.addEventListener('mousemove', onDragging)
+  document.addEventListener('mouseup', stopDrag)
+}
+
+const onDragging = (e) => {
+  if (!draggingCard) return
+  draggingCard.x = e.clientX - offsetX
+  draggingCard.y = e.clientY - offsetY
+}
+
+const stopDrag = () => {
+  draggingCard = null
+  document.removeEventListener('mousemove', onDragging)
+  document.removeEventListener('mouseup', stopDrag)
+}
+
+const showContextMenu = (e, word) => {
+  e.preventDefault()
+  currentWordForContextMenu = word
+  contextMenuX.value = e.clientX
+  contextMenuY.value = e.clientY
+  contextMenuVisible.value = true
+}
+
+const hideContextMenu = () => {
+  contextMenuVisible.value = false
+}
+
+const handleContextMenuPin = () => {
+  if (!features.value.enableContextMenuPin || !features.value.enableCards) {
+    hideContextMenu()
+    return
+  }
+  if (currentWordForContextMenu) {
+    const word = currentWordForContextMenu
+    // 提前加载内容
+    showWordCard(
+      { clientX: contextMenuX.value, clientY: contextMenuY.value },
+      word
+    ).then(() => {
+      pinCard(word)
+      showCard.value = false
+    })
+    hideContextMenu()
+  }
+}
+
+const startResize = (card, e) => {
+  resizingCard = card
+  startX = e.clientX
+  startY = e.clientY
+  startWidth = card.width
+  startHeight = card.height
+
+  document.addEventListener('mousemove', onResizing)
+  document.addEventListener('mouseup', stopResize)
+}
+
+const onResizing = (e) => {
+  if (!resizingCard) return
+
+  const newWidth = startWidth + (e.clientX - startX)
+  const newHeight = startHeight + (e.clientY - startY)
+
+  // 设置最小尺寸
+  if (newWidth > 200) resizingCard.width = newWidth
+  if (newHeight > 100) resizingCard.height = newHeight
+}
+
+const stopResize = () => {
+  resizingCard = null
+  document.removeEventListener('mousemove', onResizing)
+  document.removeEventListener('mouseup', stopResize)
+}
+
+/**
+ * 处理鼠标离开事件
+ */
+const handleMouseLeave = () => {
+  setTimeout(() => {
+    hideWordCard()
+  }, 100)
+}
+
+/**
+ * 隐藏单词卡片
+ */
+const hideWordCard = () => {
+  showCard.value = false
+}
+
+// pronounce ----------------------------------------------------------
+
+let currentPronounceAllIndex = ref(0)
+let isPronouncingAll = ref(false)
+let pronounceAllInterval = null
+
+const handlePronounceAll = (lang) => {
+  if (isPronouncingAll.value) {
+    // 如果正在播放，就停止
+    stopPronounceAll()
+    return
+  }
+
+  const wordsToSpeak = sortedWords.value
+  if (!wordsToSpeak.length) return
+
+  currentPronounceAllIndex.value = 0
+  isPronouncingAll.value = true
+
+  const speakNext = async () => {
+    if (
+      !isPronouncingAll.value ||
+      currentPronounceAllIndex.value >= wordsToSpeak.length
+    ) {
+      stopPronounceAll()
+      return
+    }
+
+    const word = wordsToSpeak[currentPronounceAllIndex.value]
+    const utterance = new SpeechSynthesisUtterance(word)
+    utterance.lang = lang
+    speechSynthesis.speak(utterance)
+
+    await nextTick()
+    currentPronounceAllIndex.value++
+  }
+
+  speakNext()
+
+  // 每隔 1.5 秒读一个词
+  pronounceAllInterval = setInterval(speakNext, 1500)
+
+  hideContextMenu()
+}
+
+const stopPronounceAll = () => {
+  isPronouncingAll.value = false
+  if (pronounceAllInterval) {
+    clearInterval(pronounceAllInterval)
+    pronounceAllInterval = null
+  }
+  speechSynthesis.cancel() // 停止所有未完成的语音
+}
+
+const handlePronounce = (word, lang = 'en-GB') => {
+  if ('speechSynthesis' in window) {
+    stopPronounceAll()
+
+    const utterance = new SpeechSynthesisUtterance(word)
+    utterance.lang = lang
+    speechSynthesis.speak(utterance)
+    hideContextMenu()
+  } else {
+    alert('您的浏览器不支持语音功能，请尝试使用 Chrome 或 Edge 浏览器。')
+  }
+}
+
+// hooks ----------------------------------------------------------
+
+onMounted(() => {
+  sortedWords.value.forEach((word) => {
+    const key = `${pathname}-${word}`
+    const storedState = localStorage.getItem(key)
+    checkedStates.value[word] = storedState === 'true'
+  })
+
+  if (!isMobile.value && features.value.enableWordData) preloadWords()
+
+  // 添加点击事件监听以隐藏右键菜单
+  if (typeof document !== 'undefined') {
+    document.body.addEventListener('click', hideContextMenu)
+  }
+})
+
+/**
+ * 销毁时清理定时器
+ */
+onUnmounted(() => {
+  clearTimeout(hoverTimer)
+  if (typeof document !== 'undefined') {
+    document.removeEventListener('mousemove', onDragging)
+    document.removeEventListener('mouseup', stopDrag)
+    document.body.removeEventListener('click', hideContextMenu)
+  }
+})
+</script>
+
+<template>
+  <div class="tn-word-list">
+    <ol>
+      <li
+        v-for="(word, index) in sortedWords"
+        :key="word"
+        :class="{
+          pronounced: isPronouncingAll && currentPronounceAllIndex === index + 1,
+        }"
+      >
+        <span class="index">{{ index + 1 }}.</span>
+        <input
+          type="checkbox"
+          :id="word"
+          :checked="checkedStates[word]"
+          @change="(e) => updateCheckedState(word, e.target.checked)"
+        />
+        <label :for="word">
+          <a
+            :href="`${props.wordsBaseUrl}${encodeURIComponent(
+              word.toLowerCase().replaceAll(/\s/g, '_')
+            )}.md`"
+            :class="{
+              lineThrough: checkedStates[word],
+              textRed: failedWords[word],
+            }"
+            @mouseenter="
+              (e) =>
+                features.enableCards &&
+                isAutoShowCard &&
+                showWordCard(e, word)
+            "
+            @mouseleave="handleMouseLeave"
+            @contextmenu="(e) => showContextMenu(e, word)"
+            @click.ctrl.exact="(e) => handlePronounce(word)"
+          >
+            {{ word }}
+          </a>
+        </label>
+      </li>
+    </ol>
+
+    <div
+      class="wordCard"
+      :style="{ left: cardX + 'px', top: cardY + 'px' }"
+      v-if="features.enableCards && showCard"
+    >
+      <div class="wordCardContent" v-html="cardContent"></div>
+    </div>
+
+    <!-- pinned cards -->
+    <template v-if="features.enableCards">
+      <div
+        v-for="card in pinnedCards"
+        :key="card.id"
+        class="wordCard"
+        :style="{
+          left: card.x + 'px',
+          top: card.y + 'px',
+          width: card.width + 'px',
+          height: card.height + 'px',
+          zIndex: card.zIndex,
+        }"
+        @mousedown="(e) => startDrag(card, e)"
+        @click="bringToFront(card)"
+      >
+        <div class="wordCardContentWrapper">
+          <div class="wordCardContent" v-html="card.content"></div>
+        </div>
+        <button class="closeBtn" @click.stop="removeCard(card.id)">
+          ✖
+        </button>
+        <div
+          class="resizeHandle"
+          @mousedown.stop="startResize(card, $event)"
+        ></div>
+      </div>
+    </template>
+  </div>
+
+  <RightClickMenu
+    v-if="!isMobile"
+    :show="contextMenuVisible"
+    :x="contextMenuX"
+    :y="contextMenuY"
+    :isAutoShowCard="isAutoShowCard"
+    :showPin="features.enableContextMenuPin"
+    :showAutoShowCard="features.enableContextMenuAutoShowCard"
+    @pin="handleContextMenuPin"
+    @pronounce="(lang) => handlePronounce(currentWordForContextMenu, lang)"
+    @pronounceAll="(lang) => handlePronounceAll(lang)"
+    @autoShowCard="
+      () => {
+        if (!features.enableContextMenuAutoShowCard) return
+        isAutoShowCard = !isAutoShowCard
+        hideContextMenu()
+      }
+    "
+    @checkAll="checkAll"
+    @reset="reset"
+  />
+</template>
+
+<style scoped lang="scss">
+.tn-word-list {
+  // Checkbox 样式
+  input[type='checkbox'] {
+    margin: 8px;
+    transform: scale(1.3);
+    cursor: pointer;
+  }
+
+  // 链接样式
+  a {
+    text-decoration: none;
+    color: #4fc3f7;
+
+    &:hover {
+      text-decoration: underline !important;
+    }
+
+    &.lineThrough {
+      color: #999;
+      text-decoration: line-through;
+    }
+
+    &.textRed {
+      color: #f40 !important;
+    }
+  }
+
+  // 单词列表样式
+  ol {
+    list-style-type: decimal;
+    padding-left: 20px;
+
+    li {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+      transition: all 0.3s ease;
+
+      &.pronounced {
+        background-color: rgba(255, 255, 0, 0.1);
+      }
+    }
+  }
+
+  // 序号样式
+  .index {
+    margin-right: 10px;
+    color: #aaa;
+  }
+}
+
+// 单词卡片样式（🌑 暗色悬浮卡片）
+.wordCard {
+  position: fixed;
+  z-index: 9999;
+  background: #1e1e1e;
+  border: 1px solid #333;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  padding: 12px 16px;
+  max-width: 600px;
+  min-width: 200px;
+  min-height: 100px;
+  font-size: 14px;
+  line-height: 1.4;
+  border-radius: 8px;
+  color: #eee;
+  pointer-events: auto;
+  font-family: sans-serif;
+  cursor: move;
+
+  // 关闭按钮
+  .closeBtn {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    background: none;
+    border: none;
+    font-size: 16px;
+    cursor: pointer;
+    color: #ccc;
+
+    &:hover {
+      color: white;
+    }
+  }
+}
+
+// 卡片内容包裹器
+.wordCardContentWrapper {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+// 卡片内容样式
+.wordCardContent {
+  :deep(ul) {
+    margin: 0.5rem 0;
+    padding-left: 1rem;
+  }
+}
+
+// 调整大小手柄
+.resizeHandle {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 12px;
+  height: 12px;
+  background-color: #666;
+  cursor: nwse-resize;
+  z-index: 2;
+  border-radius: 50%;
+
+  &:hover {
+    background-color: #aaa;
+  }
+}
+</style>