echoctl 0.1.0 → 0.1.3

package/docs/.vitepress/theme/components/EchoSelectionComment.vue

@@ -0,0 +1,129 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="visible"
+      class="echo-sel-popup"
+      :style="{ top: popupTop + 'px', left: popupLeft + 'px' }"
+    >
+      <button class="echo-btn" @click="startComment">评论选中文字</button>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { useData } from 'vitepress'
+import { useEchoStatus } from '../lib/useEchoStatus'
+import { postComment } from '../lib/echo-api'
+
+const { frontmatter } = useData()
+const articleId = computed(() => (frontmatter.value as any)?.echo?.articleId as string | undefined)
+const projectId = computed(() => (frontmatter.value as any)?.echo?.projectId as string | null | undefined)
+const { status } = useEchoStatus(articleId)
+
+const visible = ref(false)
+const popupTop = ref(0)
+const popupLeft = ref(0)
+let currentQuote = ''
+let currentPrefix = ''
+let currentSuffix = ''
+let currentOccurrence = 1
+
+function getArticleText(): string {
+  const doc = document.querySelector('.vp-doc')
+  if (!doc) return ''
+  return (doc as HTMLElement).innerText || ''
+}
+
+function computeAnchor(quote: string): { prefix: string; suffix: string; occurrence: number } {
+  const body = getArticleText()
+  const idx = body.indexOf(quote)
+  const prefix = body.slice(Math.max(0, idx - 100), idx).trim()
+  const suffix = body.slice(idx + quote.length, idx + quote.length + 100).trim()
+
+  let occurrence = 0
+  let pos = -1
+  while ((pos = body.indexOf(quote, pos + 1)) !== -1) {
+    occurrence++
+    if (pos === idx) break
+  }
+
+  return { prefix, suffix, occurrence }
+}
+
+function handleMouseUp(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (!target) return
+
+  // Only handle selections inside .vp-doc content area
+  const doc = target.closest('.vp-doc')
+  if (!doc) return
+
+  // Exclude echo components, textareas, buttons, nav
+  if (target.closest('.echo-sel-popup, .echo-comment-box, .echo-toolbar, .echo-modal, textarea, button, nav')) return
+
+  const sel = window.getSelection()
+  if (!sel || sel.rangeCount === 0) return
+  const text = sel.toString().trim()
+  if (text.length < 3 || text.length > 500) {
+    visible.value = false
+    return
+  }
+
+  const range = sel.getRangeAt(0)
+  const rect = range.getBoundingClientRect()
+  popupTop.value = window.scrollY + rect.bottom + 8
+  popupLeft.value = window.scrollX + rect.left
+  currentQuote = text
+
+  const anchor = computeAnchor(text)
+  currentPrefix = anchor.prefix
+  currentSuffix = anchor.suffix
+  currentOccurrence = anchor.occurrence
+
+  visible.value = true
+}
+
+function hide() {
+  visible.value = false
+  currentQuote = ''
+}
+
+function startComment() {
+  const comment = prompt(`评论 "${currentQuote.slice(0, 60)}...":`)
+  if (!comment) { hide(); return }
+  postComment({
+    articleId: articleId.value || '',
+    comment: comment.trim(),
+    quote: currentQuote,
+    prefix: currentPrefix,
+    suffix: currentSuffix,
+    occurrence: currentOccurrence,
+    author: status.value?.author,
+    projectId: projectId.value ?? null,
+  }).then(() => {
+    setTimeout(() => location.reload(), 800)
+  }).catch((err) => {
+    alert('评论失败: ' + (err.message || '未知错误'))
+  })
+  hide()
+}
+
+// Hide on click outside
+function handleClick(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (target && !target.closest('.echo-sel-popup')) {
+    hide()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('mouseup', handleMouseUp)
+  document.addEventListener('click', handleClick)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mouseup', handleMouseUp)
+  document.removeEventListener('click', handleClick)
+})
+</script>

package/docs/.vitepress/theme/components/EchoTagsPage.vue

@@ -0,0 +1,301 @@
+<template>
+  <div class="echo-tag-cloud" aria-label="标签筛选">
+    <!-- Existing tag chips with action buttons -->
+    <div
+      v-for="group in groups"
+      :key="group.anchor"
+      class="echo-tag-chip-row"
+    >
+      <!-- Inline rename for editing tag -->
+      <template v-if="editingTag === group.tag">
+        <input
+          :ref="(el) => { if (el) renameInput = el as HTMLInputElement }"
+          v-model="renameValue"
+          class="echo-tag-rename-input"
+          maxlength="60"
+          @keydown.enter="confirmRename(group.tag)"
+          @keydown.escape="cancelRename"
+          @blur="confirmRename(group.tag)"
+        />
+        <button class="echo-tag-action-btn echo-tag-action-confirm" title="确认" @mousedown.prevent="confirmRename(group.tag)">✓</button>
+        <button class="echo-tag-action-btn echo-tag-action-cancel" title="取消" @mousedown.prevent="cancelRename">✕</button>
+      </template>
+
+      <!-- Normal display -->
+      <template v-else>
+        <a
+          :href="`#${encodeURIComponent(group.anchor)}`"
+          class="echo-tag-chip"
+          :class="{ 'echo-tag-chip-active': group.anchor === selectedAnchor, 'echo-tag-chip-muted': selectedAnchor && group.anchor !== selectedAnchor }"
+          @click="select(group.anchor)"
+        >
+          {{ group.tag }}<span>{{ group.articles.length }}</span>
+        </a>
+        <button
+          class="echo-tag-action-btn"
+          title="重命名"
+          :disabled="busyTag === group.tag"
+          @click.stop="startRename(group.tag)"
+        >✏️</button>
+        <button
+          class="echo-tag-action-btn echo-tag-action-danger"
+          title="删除"
+          :disabled="busyTag === group.tag"
+          @click.stop="promptDelete(group.tag, group.articles.length)"
+        >🗑️</button>
+      </template>
+    </div>
+
+    <!-- New tag button -->
+    <button
+      class="echo-tag-new-btn"
+      :disabled="busy"
+      @click="showNewTagModal = true"
+    >+ 新建标签</button>
+  </div>
+
+  <!-- Delete confirmation -->
+  <div v-if="deleteTarget" class="echo-modal" @click.self="deleteTarget = null">
+    <div class="echo-modal-content">
+      <h3>删除标签「{{ deleteTarget.tag }}」</h3>
+      <p>此标签将从 {{ deleteTarget.count }} 篇文章中移除。此操作不可撤销。</p>
+      <div class="echo-modal-btns">
+        <button class="echo-btn" :disabled="busy" @click="doDelete">确认删除</button>
+        <button class="echo-btn echo-btn-off" :disabled="busy" @click="deleteTarget = null">取消</button>
+      </div>
+      <p v-if="error" class="echo-serve-notice">{{ error }}</p>
+    </div>
+  </div>
+
+  <!-- New tag modal -->
+  <div v-if="showNewTagModal" class="echo-modal" @click.self="showNewTagModal = false">
+    <div class="echo-modal-content">
+      <h3>新建标签</h3>
+      <input
+        v-model="newTagName"
+        class="echo-tag-rename-input"
+        placeholder="输入标签名..."
+        maxlength="60"
+        style="width:100%;box-sizing:border-box;margin:12px 0;"
+        @keydown.enter="doCreateTag"
+      />
+      <p class="echo-muted-text" style="font-size:13px;margin:0 0 12px;">
+        选择要添加此标签的文章（至少选择一篇）：
+      </p>
+      <div class="echo-new-tag-articles">
+        <label
+          v-for="article in allArticles"
+          :key="article.id"
+          class="echo-new-tag-article-label"
+        >
+          <input
+            type="checkbox"
+            :value="article.id"
+            v-model="selectedArticleIds"
+          />
+          <span class="echo-new-tag-article-title">{{ article.title }}</span>
+        </label>
+      </div>
+      <div class="echo-modal-btns">
+        <button
+          class="echo-btn"
+          :disabled="busy || !newTagName.trim() || selectedArticleIds.length === 0"
+          @click="doCreateTag"
+        >创建</button>
+        <button class="echo-btn echo-btn-off" :disabled="busy" @click="showNewTagModal = false">取消</button>
+      </div>
+      <p v-if="error" class="echo-serve-notice">{{ error }}</p>
+    </div>
+  </div>
+
+  <!-- Toast -->
+  <div v-if="toast" class="echo-toast">{{ toast }}</div>
+
+  <!-- Results -->
+  <div v-if="selectedGroup" class="echo-tag-result">
+    <h2 :id="selectedGroup.anchor">{{ selectedGroup.tag }} ({{ selectedGroup.articles.length }})</h2>
+    <div class="echo-article-grid">
+      <a
+        v-for="article in selectedGroup.articles"
+        :key="article.href"
+        class="echo-article-card"
+        :href="article.href"
+      >
+        <strong>{{ article.title }}</strong>
+        <p>{{ article.summary || '无摘要' }}</p>
+      </a>
+    </div>
+  </div>
+
+  <div v-else class="echo-tag-result">
+    <h2>选择一个标签</h2>
+    <p class="echo-muted-text">点击上方标签后，只显示对应文章。</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { renameTag, purgeTag, postTag } from '../lib/echo-api'
+
+type TagArticle = {
+  id: string
+  href: string
+  summary?: string
+  title: string
+}
+
+type TagGroup = {
+  anchor: string
+  articles: TagArticle[]
+  tag: string
+}
+
+const props = defineProps<{ payload: string }>()
+
+const groups = computed<TagGroup[]>(() => {
+  try {
+    return JSON.parse(decodeURIComponent(props.payload)) as TagGroup[]
+  } catch {
+    return []
+  }
+})
+
+const selectedAnchor = ref('')
+
+const selectedGroup = computed(() => {
+  const anchor = selectedAnchor.value || groups.value[0]?.anchor || ''
+  return groups.value.find((group) => group.anchor === anchor) || null
+})
+
+function syncFromHash() {
+  selectedAnchor.value = decodeURIComponent(window.location.hash.slice(1) || '') || groups.value[0]?.anchor || ''
+}
+
+function select(anchor: string) {
+  selectedAnchor.value = anchor
+}
+
+// --- Rename ---
+const editingTag = ref('')
+const renameValue = ref('')
+const renameInput = ref<HTMLInputElement | null>(null)
+const busy = ref(false)
+const busyTag = ref('')
+const error = ref('')
+const toast = ref('')
+
+function startRename(tag: string) {
+  editingTag.value = tag
+  renameValue.value = tag
+  error.value = ''
+  nextTick(() => renameInput.value?.focus())
+}
+
+function cancelRename() {
+  editingTag.value = ''
+  renameValue.value = ''
+  error.value = ''
+}
+
+async function confirmRename(oldTag: string) {
+  const newTag = renameValue.value.trim()
+  if (!newTag || newTag === oldTag) {
+    cancelRename()
+    return
+  }
+  busy.value = true
+  busyTag.value = oldTag
+  error.value = ''
+  try {
+    const result = await renameTag({ oldTag, newTag })
+    editingTag.value = ''
+    renameValue.value = ''
+    toast.value = `已重命名：${oldTag} → ${newTag}（${result.renamed} 篇文章）`
+    setTimeout(() => { toast.value = '' }, 3000)
+    // Reload the page to get updated tags payload
+    setTimeout(() => { window.location.reload() }, 800)
+  } catch (err: any) {
+    error.value = err?.message || '重命名失败'
+  } finally {
+    busy.value = false
+    busyTag.value = ''
+  }
+}
+
+// --- Delete ---
+const deleteTarget = ref<{ tag: string; count: number } | null>(null)
+
+function promptDelete(tag: string, count: number) {
+  deleteTarget.value = { tag, count }
+  error.value = ''
+}
+
+async function doDelete() {
+  if (!deleteTarget.value) return
+  const tag = deleteTarget.value.tag
+  busy.value = true
+  busyTag.value = tag
+  error.value = ''
+  try {
+    const result = await purgeTag({ tag })
+    deleteTarget.value = null
+    toast.value = `已删除标签「${tag}」（从 ${result.purged} 篇文章中移除）`
+    setTimeout(() => { toast.value = '' }, 3000)
+    setTimeout(() => { window.location.reload() }, 800)
+  } catch (err: any) {
+    error.value = err?.message || '删除失败'
+  } finally {
+    busy.value = false
+    busyTag.value = ''
+  }
+}
+
+// --- Create ---
+const showNewTagModal = ref(false)
+const newTagName = ref('')
+const selectedArticleIds = ref<string[]>([])
+
+const allArticles = computed(() => {
+  const seen = new Map<string, TagArticle>()
+  for (const group of groups.value) {
+    for (const article of group.articles) {
+      if (!seen.has(article.id)) {
+        seen.set(article.id, article)
+      }
+    }
+  }
+  return [...seen.values()]
+})
+
+async function doCreateTag() {
+  const tag = newTagName.value.trim()
+  if (!tag || selectedArticleIds.value.length === 0) return
+  busy.value = true
+  error.value = ''
+  try {
+    // Add tag to each selected article
+    for (const articleId of selectedArticleIds.value) {
+      await postTag({ articleId, tag })
+    }
+    showNewTagModal.value = false
+    newTagName.value = ''
+    selectedArticleIds.value = []
+    toast.value = `已创建标签「${tag}」（${selectedArticleIds.value.length} 篇文章）`
+    setTimeout(() => { toast.value = '' }, 3000)
+    setTimeout(() => { window.location.reload() }, 800)
+  } catch (err: any) {
+    error.value = err?.message || '创建失败'
+  } finally {
+    busy.value = false
+  }
+}
+
+onMounted(() => {
+  syncFromHash()
+  window.addEventListener('hashchange', syncFromHash)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('hashchange', syncFromHash)
+})
+</script>