feat: show ai toolbox hint (#1105)

Author: yanglbme

apps/web/src/components/ai/SidebarAIToolbar.vue

@@ -15,14 +15,20 @@ const { aiDialogVisible, aiImageDialogVisible } = storeToRefs(displayStore)
 const { toggleAIDialog, toggleAIImageDialog } = displayStore
 
 const store = useStore()
-const { editor } = storeToRefs(store)
+const { editor, hasShownAIToolboxHint } = storeToRefs(store)
 
 // 工具栏状态：false=默认(只显示贴边栏), true=展开(显示AI图标)
 const isExpanded = ref(false) // 默认收起状态
 
 // AI 工具箱相关状态
 const toolBoxVisible = ref(false)
 
+// 是否显示选中文本提示动画
+const showSelectionHint = ref(false)
+let selectionHintTimer: NodeJS.Timeout | null = null
+let selectionCheckInterval: NodeJS.Timeout | null = null
+let lastSelectedText = ``
+
 // 检查选中文本的函数
 function getSelectedText() {
   try {
@@ -36,6 +42,43 @@ function getSelectedText() {
   }
 }
 
+// 检查并更新选中文本提示
+function checkSelectionAndUpdateHint() {
+  // 如果已经显示过提示，就不再显示
+  if (hasShownAIToolboxHint.value) {
+    return
+  }
+
+  const selected = getSelectedText()
+
+  // 如果选中状态发生变化
+  if (selected !== lastSelectedText) {
+    lastSelectedText = selected
+
+    // 清除之前的定时器
+    if (selectionHintTimer) {
+      clearTimeout(selectionHintTimer)
+      selectionHintTimer = null
+    }
+
+    // 如果有选中文本且工具栏未展开
+    if (selected && !isExpanded.value) {
+      showSelectionHint.value = true
+
+      // 标记已经显示过提示
+      hasShownAIToolboxHint.value = true
+
+      // 3秒后自动隐藏提示
+      selectionHintTimer = setTimeout(() => {
+        showSelectionHint.value = false
+      }, 3000)
+    }
+    else {
+      showSelectionHint.value = false
+    }
+  }
+}
+
 // 动态计算是否有选中文本
 const hasSelectedText = computed(() => {
   if (!editor.value || !isExpanded.value)
@@ -51,6 +94,15 @@ const currentSelectedText = computed(() => {
 // 切换展开/收起状态
 function toggleExpanded() {
   isExpanded.value = !isExpanded.value
+
+  // 展开后隐藏提示
+  if (isExpanded.value) {
+    showSelectionHint.value = false
+    if (selectionHintTimer) {
+      clearTimeout(selectionHintTimer)
+      selectionHintTimer = null
+    }
+  }
 }
 
 // 打开AI助手
@@ -70,6 +122,11 @@ function openAIToolBox() {
 
 // 监听编辑区点击，自动收起工具栏
 onMounted(() => {
+  // 启动定时检查选中文本
+  selectionCheckInterval = setInterval(() => {
+    checkSelectionAndUpdateHint()
+  }, 300) // 每300ms检查一次
+
   const handleInteraction = (e: Event) => {
     // 只有在展开状态才需要处理
     if (!isExpanded.value)
@@ -103,7 +160,6 @@ onMounted(() => {
     const shouldNotCollapse = excludeSelectors.some(selector => target.closest(selector))
 
     if (!shouldNotCollapse) {
-      console.log(`Interaction outside excluded areas, collapsing toolbar. Event type: ${e.type}`)
       isExpanded.value = false
     }
   }
@@ -115,6 +171,18 @@ onMounted(() => {
   onUnmounted(() => {
     document.removeEventListener(`click`, handleInteraction, true)
     document.removeEventListener(`touchstart`, handleInteraction, true)
+
+    // 清理定时器
+    if (selectionHintTimer) {
+      clearTimeout(selectionHintTimer)
+      selectionHintTimer = null
+    }
+
+    // 清理轮询
+    if (selectionCheckInterval) {
+      clearInterval(selectionCheckInterval)
+      selectionCheckInterval = null
+    }
   })
 })
 </script>
@@ -129,10 +197,27 @@ onMounted(() => {
     <div
       v-if="!isExpanded"
       class="w-5 h-16 bg-gradient-to-b from-blue-500/90 to-purple-500/90 hover:from-blue-600/95 hover:to-purple-600/95 dark:from-blue-400/90 dark:to-purple-400/90 dark:hover:from-blue-500/95 dark:hover:to-purple-500/95 backdrop-blur-lg border-l border-y border-blue-300/50 dark:border-blue-600/50 cursor-pointer transition-all duration-200 flex items-center justify-center rounded-l-lg shadow-lg group utools-sidebar-edge"
+      :class="{ 'animate-pulse-hint': showSelectionHint }"
       title="展开AI工具栏"
       @click="toggleExpanded"
     >
       <Settings2 class="h-4 w-4 text-white drop-shadow-sm group-hover:scale-110 transition-transform duration-200" />
+
+      <!-- 选中文本提示气泡 -->
+      <Transition name="hint-fade">
+        <div
+          v-if="showSelectionHint"
+          class="hint-bubble absolute right-full mr-3 px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white text-sm font-medium rounded-lg shadow-xl whitespace-nowrap pointer-events-none animate-bounce-gentle z-50"
+          style="top: 50%; transform: translateY(-50%);"
+        >
+          <div class="relative flex items-center gap-2">
+            <Wand2 class="h-4 w-4" />
+            <span>点击打开 AI 工具箱</span>
+            <!-- 箭头 -->
+            <div class="hint-arrow absolute top-1/2 -right-2 -translate-y-1/2 w-0 h-0 border-t-[6px] border-b-[6px] border-l-[6px] border-transparent border-l-purple-500" />
+          </div>
+        </div>
+      </Transition>
     </div>
 
     <!-- 展开状态：显示AI图标 -->
@@ -236,6 +321,60 @@ onMounted(() => {
   overflow: visible;
 }
 
+/* 选中文本时的脉冲动画 */
+@keyframes pulse-hint {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
+  }
+  50% {
+    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
+  }
+}
+
+.animate-pulse-hint {
+  animation: pulse-hint 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* 提示气泡的轻微弹跳动画 */
+@keyframes bounce-gentle {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(-4px);
+  }
+}
+
+.animate-bounce-gentle {
+  animation: bounce-gentle 1s ease-in-out infinite;
+}
+
+/* 提示气泡淡入淡出过渡 */
+.hint-fade-enter-active,
+.hint-fade-leave-active {
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
+}
+
+.hint-fade-enter-from {
+  opacity: 0;
+  transform: translateX(8px);
+}
+
+.hint-fade-leave-to {
+  opacity: 0;
+  transform: translateX(8px);
+}
+
+.hint-fade-enter-to,
+.hint-fade-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+}
+
 /* 响应式调整 */
 @media (max-width: 768px) {
   .editor-ai-toolbar {
@@ -330,6 +469,56 @@ onMounted(() => {
   color: rgb(0 0 0) !important;
 }
 
+/* uTools 模式下提示气泡使用黑白风格 */
+.is-utools .hint-bubble {
+  background: rgb(0 0 0 / 0.9) !important;
+  background-image: none !important;
+  color: rgb(255 255 255) !important;
+}
+
+.is-utools.dark .hint-bubble {
+  background: rgb(255 255 255 / 0.9) !important;
+  background-image: none !important;
+  color: rgb(0 0 0) !important;
+}
+
+.is-utools .hint-arrow {
+  border-left-color: rgb(0 0 0 / 0.9) !important;
+}
+
+.is-utools.dark .hint-arrow {
+  border-left-color: rgb(255 255 255 / 0.9) !important;
+}
+
+/* uTools 模式下脉冲动画使用黑白风格 */
+@keyframes pulse-hint-utools {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
+  }
+  50% {
+    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
+  }
+}
+
+@keyframes pulse-hint-utools-dark {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
+  }
+  50% {
+    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
+  }
+}
+
+.is-utools .animate-pulse-hint {
+  animation: pulse-hint-utools 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.is-utools.dark .animate-pulse-hint {
+  animation: pulse-hint-utools-dark 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
 /* uTools 模式下 AI 按钮使用黑白风格 */
 .is-utools .utools-ai-button {
   background: rgb(0 0 0 / 0.85) !important;

apps/web/src/stores/index.ts

@@ -79,6 +79,9 @@ export const useStore = defineStore(`store`, () => {
   const isCountStatus = useStorage(`isCountStatus`, defaultStyleConfig.isCountStatus)
   const toggleCountStatus = useToggle(isCountStatus)
 
+  // 是否已经显示过AI工具箱选中文本提示
+  const hasShownAIToolboxHint = useStorage(`hasShownAIToolboxHint`, false)
+
   // 是否开启段落首行缩进
   const isUseIndent = useStorage(addPrefix(`use_indent`), false)
   const toggleUseIndent = useToggle(isUseIndent)
@@ -748,6 +751,8 @@ export const useStore = defineStore(`store`, () => {
     isCountStatus,
     countStatusChanged,
 
+    hasShownAIToolboxHint,
+
     output,
     editor,
     cssEditor,