@opentiny/tiny-robot 0.2.0-alpha.2 → 0.2.0-alpha.4

package/src/suggestion/components/SuggestionPanel.vue

@@ -1,147 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, PropType } from 'vue'
-import { SuggestionItem, Category } from '../index.type'
-import CategoryNav from './CategoryNav.vue'
-import { useKeyboardNavigation } from '../composables/useKeyboardNavigation'
-import { IconHotQuestion, IconClose } from '@opentiny/tiny-robot-svgs'
-
-const props = defineProps({
-  items: {
-    type: Array as PropType<SuggestionItem[]>,
-    required: true,
-  },
-  categories: {
-    type: Array as PropType<Category[]>,
-    default: () => [],
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  title: {
-    type: String,
-    default: '指令',
-  },
-  maxVisibleItems: {
-    type: Number,
-    default: 5,
-  },
-})
-
-const emit = defineEmits(['close', 'select', 'category-select', 'item-hover'])
-
-const items = ref(props.items)
-
-const { handleKeyDown, activeIndex } = useKeyboardNavigation(items, {
-  initialIndex: 0,
-  onClose: () => emit('close'),
-  onSelect: (item) => emit('select', item),
-})
-
-// 当前激活的分类
-const activeCategory = ref<string>(props.categories.length > 0 ? props.categories[0].id : '')
-
-// 计算当前激活分类的项目列表
-const filteredItems = computed(() => {
-  // 如果没有分类或没有选中分类，直接显示 items
-  if (props.categories.length === 0 || !activeCategory.value) {
-    return props.items
-  }
-
-  // 查找当前激活的分类
-  const category = props.categories.find((cat) => cat.id === activeCategory.value)
-  return category ? category.items : []
-})
-
-// 处理分类选择
-const handleCategorySelect = (categoryId: string) => {
-  activeCategory.value = categoryId
-
-  const category = props.categories.find((cat) => cat.id === categoryId)
-  if (category) {
-    emit('category-select', category)
-  }
-}
-
-// 处理选择指令项
-const handleSelect = (item: SuggestionItem) => {
-  emit('select', item)
-}
-
-// 处理关闭面板
-const handleClose = () => {
-  emit('close')
-}
-
-// 处理鼠标悬停
-const handleItemHover = (index: number) => {
-  emit('item-hover', index)
-}
-
-defineExpose({
-  handleKeyDown,
-})
-</script>
-
-<template>
-  <div class="tr-suggestion-panel">
-    <!-- 面板标题 -->
-    <div class="tr-suggestion-header">
-      <div class="tr-suggestion-header-left">
-        <div class="tr-suggestion-header-icon">
-          <slot name="title-icon">
-            <IconHotQuestion />
-          </slot>
-        </div>
-        <div class="tr-suggestion-header-title">{{ title }}</div>
-      </div>
-      <span class="tr-suggestion-close-btn" @click="handleClose">
-        <span class="close-icon"><IconClose /></span>
-      </span>
-    </div>
-
-    <!-- 分类导航 -->
-    <CategoryNav
-      v-if="categories.length > 0"
-      :categories="categories"
-      :active-category="activeCategory"
-      @category-select="handleCategorySelect"
-    />
-
-    <!-- 内容区域 -->
-    <div
-      class="tr-suggestion-content"
-      :style="{ 'max-height': filteredItems.length > maxVisibleItems ? `${maxVisibleItems * 56}px` : 'auto' }"
-    >
-      <div v-if="loading" class="tr-suggestion-loading">
-        <slot name="loading-indicator">
-          <div class="tr-suggestion-loading-spinner"></div>
-        </slot>
-      </div>
-
-      <ul v-else-if="filteredItems.length > 0">
-        <li
-          v-for="(item, index) in filteredItems"
-          :key="item.id"
-          class="tr-suggestion-list-item"
-          :class="{ 'tr-suggestion-item-active': index === activeIndex }"
-          @click="handleSelect(item)"
-          @mouseenter="handleItemHover(index)"
-        >
-          <slot name="item" :item="item" :active="index === activeIndex">
-            <div class="item-content">
-              <div class="item-label">{{ item.text }}</div>
-              <div v-if="item.description" class="item-description">{{ item.description }}</div>
-            </div>
-          </slot>
-        </li>
-      </ul>
-
-      <div v-else class="tr-suggestion-empty">
-        <slot name="empty">
-          <p>无匹配结果</p>
-        </slot>
-      </div>
-    </div>
-  </div>
-</template>

package/src/suggestion/composables/useKeyboardNavigation.ts

@@ -1,101 +0,0 @@
-import { ref, Ref, watch } from 'vue'
-import type { SuggestionItem } from '../index.type'
-
-export interface KeyboardNavigationOptions {
-  onSelect?: (item: SuggestionItem) => void
-  onClose?: () => void
-  initialIndex?: number
-}
-
-/**
- * 处理指令列表的键盘导航
- * @param items 当前可见的指令项列表
- * @param options 配置选项
- */
-export function useKeyboardNavigation(items: Ref<SuggestionItem[]>, options: KeyboardNavigationOptions = {}) {
-  const activeIndex = ref(options.initialIndex || -1)
-
-  // 当列表变化时重置激活项
-  watch(items, (newItems) => {
-    if (newItems.length > 0 && activeIndex.value === -1) {
-      activeIndex.value = 0
-    } else if (newItems.length === 0) {
-      activeIndex.value = -1
-    } else if (activeIndex.value >= newItems.length) {
-      activeIndex.value = newItems.length - 1
-    }
-  })
-
-  /**
-   * 处理键盘按键
-   * @param e 键盘事件
-   */
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (items.value.length === 0) return
-
-    switch (e.key) {
-      case 'ArrowUp':
-        e.preventDefault()
-        activeIndex.value = (activeIndex.value - 1 + items.value.length) % items.value.length
-        scrollToActive()
-        break
-
-      case 'ArrowDown':
-        e.preventDefault()
-        activeIndex.value = (activeIndex.value + 1) % items.value.length
-        scrollToActive()
-        break
-
-      case 'Enter':
-
-      case 'Tab':
-        e.preventDefault()
-        if (activeIndex.value >= 0 && activeIndex.value < items.value.length) {
-          options.onSelect?.(items.value[activeIndex.value])
-        }
-        break
-
-      case 'Escape':
-        e.preventDefault()
-        options.onClose?.()
-        break
-    }
-  }
-
-  /**
-   * 滚动到当前激活项
-   */
-  const scrollToActive = () => {
-    setTimeout(() => {
-      const activeElement = document.querySelector(`.tr-suggestion-list-item:nth-child(${activeIndex.value + 1})`)
-      const container = activeElement?.closest('.tr-suggestion-content')
-
-      if (activeElement && container) {
-        const containerRect = container.getBoundingClientRect()
-        const itemRect = activeElement.getBoundingClientRect()
-
-        if (itemRect.bottom > containerRect.bottom) {
-          container.scrollTop += itemRect.bottom - containerRect.bottom
-        } else if (itemRect.top < containerRect.top) {
-          container.scrollTop -= containerRect.top - itemRect.top
-        }
-      }
-    }, 0)
-  }
-
-  /**
-   * 设置激活项索引
-   */
-  const setActiveIndex = (index: number) => {
-    if (index >= -1 && index < items.value.length) {
-      activeIndex.value = index
-    }
-  }
-
-  return {
-    activeIndex,
-    handleKeyDown,
-    scrollToActive,
-    setActiveIndex,
-  }
-}

package/src/suggestion/composables/useSuggestionFilter.ts

@@ -1,34 +0,0 @@
-import { computed, Ref } from 'vue'
-import type { SuggestionItem } from '../index.type'
-
-/**
- * 过滤和搜索指令项列表
- * @param items 原始指令项列表
- * @param searchTerm 搜索关键词
- */
-export function useSuggestionFilter(items: Ref<SuggestionItem[]>, searchTerm: Ref<string>) {
-  /**
-   * 根据搜索词过滤指令列表
-   */
-  const filteredItems = computed(() => {
-    const term = searchTerm.value.trim().toLowerCase()
-    if (!term) return items.value
-
-    return items.value.filter((item) => {
-      // 搜索文本匹配
-      if (item.text.toLowerCase().includes(term)) return true
-
-      // 搜索描述匹配
-      if (item.description?.toLowerCase().includes(term)) return true
-
-      // 搜索关键词匹配
-      if (item.keywords?.some((keyword) => keyword.toLowerCase().includes(term))) return true
-
-      return false
-    })
-  })
-
-  return {
-    filteredItems,
-  }
-}

package/src/suggestion/composables/useTriggerDetection.ts

@@ -1,46 +0,0 @@
-import type { SuggestionProps } from '../index.type'
-
-/**
- * 使用hook处理快捷键触发和命令过滤逻辑
- */
-export const useTriggerDetection = (props: SuggestionProps) => {
-  /**
-   * 检测是否为触发快捷键
-   * @param char 当前字符
-   * @returns 是否为触发字符
-   */
-  const isTriggerKey = (char: string) => {
-    return props.triggerKeys!.includes(char)
-  }
-
-  /**
-   * 处理输入事件，检测触发条件
-   * @param event 输入事件
-   * @param text 当前输入文本
-   * @returns 触发信息
-   */
-  const detectTrigger = (event: Event, text: string) => {
-    const input = event.target as HTMLInputElement
-    const cursorPos = input.selectionStart || 0
-
-    // 检测是否输入了触发字符
-    if (
-      cursorPos > 0 &&
-      isTriggerKey(text[cursorPos - 1]) &&
-      (cursorPos === 1 || text[cursorPos - 2] === ' ' || text[cursorPos - 2] === '\n')
-    ) {
-      // 设置触发信息
-      return {
-        text: text[cursorPos - 1],
-        position: cursorPos - 1,
-      }
-    }
-
-    return null
-  }
-
-  return {
-    isTriggerKey,
-    detectTrigger,
-  }
-}