@opentiny/tiny-robot 0.2.0-alpha.1 → 0.2.0-alpha.3

package/src/suggestion/components/SuggestionCapsule.vue

@@ -1,183 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount, nextTick, PropType, computed, watchEffect } from 'vue'
-import type { SuggestionItem } from '../index.type'
-import { IconEdit } from '@opentiny/tiny-robot-svgs'
-import { getCachedTextWidth } from '../utils/dom'
-
-const props = defineProps({
-  suggestions: {
-    type: Array as PropType<SuggestionItem[]>,
-    required: true,
-  },
-  isExpanded: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits(['suggestion-click', 'show-expand-button'])
-
-// eslint-disable-next-line
-const capsuleRef = ref<any>(null)
-const showExpandButton = ref(false)
-const isExpandedRef = ref(false)
-const visibleSuggestions = ref<SuggestionItem[]>([])
-const hiddenSuggestions = ref<SuggestionItem[]>([])
-const maxItemsPerRow = ref(0)
-const resizeObserver = ref<ResizeObserver | null>(null)
-
-// 计算每行的胶囊排列，实现从下到上、从左往右的排序
-const arrangedHiddenSuggestions = computed(() => {
-  if (maxItemsPerRow.value <= 0 || hiddenSuggestions.value.length === 0) return []
-
-  // 创建行数组
-  const rows = []
-  const totalSuggestions = [...hiddenSuggestions.value]
-
-  // 按照每行最大容量分组
-  while (totalSuggestions.length > 0) {
-    rows.push(totalSuggestions.splice(0, maxItemsPerRow.value))
-  }
-
-  // 返回行的数组，以便从下到上显示
-  return rows.reverse()
-})
-
-// 检查是否需要显示展开/收起按钮并计算能够容纳的最大胶囊数
-const calculateLayout = async () => {
-  await nextTick()
-  if (!capsuleRef.value || props.suggestions.length === 0) {
-    showExpandButton.value = false
-    emit('show-expand-button', false)
-    return
-  }
-
-  const container = capsuleRef.value
-  const containerWidth = container.clientWidth
-
-  // 重置胶囊分组
-  visibleSuggestions.value = []
-  hiddenSuggestions.value = []
-
-  // 计算一行可以容纳多少个胶囊
-  let accumulatedWidth = 0
-  const margin = 8 // 胶囊之间的间距
-
-  // 先测量一个平均宽度来估算每行可容纳的胶囊数
-  let totalWidth = 0
-  const sampleSize = Math.min(3, props.suggestions.length)
-  for (let i = 0; i < sampleSize; i++) {
-    // 使用缓存测量宽度
-    const itemWidth = getCachedTextWidth(props.suggestions[i].text, 'tr-common-suggestions_item') + margin
-    totalWidth += itemWidth
-  }
-  const avgItemWidth = totalWidth / sampleSize
-  maxItemsPerRow.value = Math.max(1, Math.floor(containerWidth / avgItemWidth))
-
-  // 计算每个胶囊的宽度并确定一行能容纳多少个
-  for (let i = 0; i < props.suggestions.length; i++) {
-    const suggestion = props.suggestions[i]
-    // 使用缓存测量宽度
-    const itemWidth = getCachedTextWidth(suggestion.text, 'tr-common-suggestions_item') + margin
-
-    // 检查是否还能容纳下一个胶囊
-    if (accumulatedWidth + itemWidth <= containerWidth) {
-      accumulatedWidth += itemWidth
-      visibleSuggestions.value.push(suggestion)
-    } else {
-      hiddenSuggestions.value.push(suggestion)
-    }
-  }
-
-  // 如果有隐藏的胶囊，显示展开按钮
-  showExpandButton.value = hiddenSuggestions.value.length > 0
-
-  // 通知父组件是否需要显示展开按钮
-  emit('show-expand-button', showExpandButton.value)
-}
-
-// 处理指令点击
-const handleSuggestionClick = (suggestion: SuggestionItem) => {
-  emit('suggestion-click', suggestion)
-}
-
-// 同步外部展开状态
-watch(
-  () => props.isExpanded,
-  (val) => {
-    isExpandedRef.value = val
-  },
-)
-
-watchEffect(() => {
-  if (capsuleRef.value && props.suggestions.length) {
-    calculateLayout()
-  }
-})
-
-// 组件挂载时使用ResizeObserver监听大小变化
-onMounted(() => {
-  if (capsuleRef.value) {
-    resizeObserver.value = new ResizeObserver(() => {
-      calculateLayout()
-    })
-    resizeObserver.value.observe(capsuleRef.value)
-  }
-})
-
-// 组件卸载时移除监听器
-onBeforeUnmount(() => {
-  if (resizeObserver.value) {
-    resizeObserver.value.disconnect()
-  }
-})
-</script>
-
-<template>
-  <!-- 胶囊式指令 -->
-  <div class="tr-common-suggestions" ref="capsuleRef" :class="{ expanded: isExpandedRef }">
-    <div class="tr-common-suggestions_content">
-      <!-- 向上展开的隐藏胶囊 -->
-      <div class="tr-common-suggestions_expanded-wrapper">
-        <div v-show="isExpandedRef && hiddenSuggestions.length > 0" class="tr-common-suggestions_expanded-area">
-          <div
-            v-for="(row, rowIndex) in arrangedHiddenSuggestions"
-            :key="`row-${rowIndex}`"
-            class="tr-common-suggestions_row"
-          >
-            <div
-              v-for="(suggestion, index) in row"
-              :key="`hidden-${suggestion.id}-${index}`"
-              class="tr-common-suggestions_item"
-              @click="handleSuggestionClick(suggestion)"
-            >
-              <div class="tr-common-suggestions_item_icon">
-                <IconEdit />
-              </div>
-              <div class="tr-common-suggestions_item_text">
-                {{ suggestion.text }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 固定在底部的可见胶囊 -->
-      <div class="tr-common-suggestions_container">
-        <div
-          v-for="(suggestion, index) in visibleSuggestions"
-          :key="`visible-${suggestion.id}-${index}`"
-          class="tr-common-suggestions_item"
-          @click="handleSuggestionClick(suggestion)"
-        >
-          <div class="tr-common-suggestions_item_icon">
-            <IconEdit />
-          </div>
-          <div class="tr-common-suggestions_item_text">
-            {{ suggestion.text }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

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,
-  }
-}