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

package/src/suggestion/components/SuggestionCapsule.vue

@@ -0,0 +1,183 @@
+<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

@@ -0,0 +1,147 @@
+<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

@@ -0,0 +1,101 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,46 @@
+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,
+  }
+}