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

package/src/suggestion/index.vue

@@ -0,0 +1,338 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import SuggestionCapsule from './components/SuggestionCapsule.vue'
+import SuggestionPanel from './components/SuggestionPanel.vue'
+import { useTriggerDetection } from './composables/useTriggerDetection'
+import type {
+  SuggestionItem,
+  SuggestionProps,
+  SuggestionEmits,
+  TriggerHandler,
+  TriggerInfo,
+  TriggerContext,
+  Category,
+} from './index.type'
+import { IconHotQuestion, IconArrowUp, IconArrowDown } from '@opentiny/tiny-robot-svgs'
+
+import './index.less'
+
+const props = withDefaults(defineProps<SuggestionProps>(), {
+  open: undefined,
+  theme: 'light',
+  loading: false,
+  title: '快捷指令',
+  items: () => [],
+  categories: () => [],
+  triggerKeys: () => ['/'],
+  maxVisibleItems: 5,
+  defaultExpanded: false,
+  closeOnOutsideClick: true,
+})
+
+const emit = defineEmits<SuggestionEmits>()
+
+// 状态管理
+const internalOpen = ref(false)
+const currentItems = ref<SuggestionItem[]>([])
+const triggerInfo = ref<TriggerContext>({
+  text: '',
+  position: 0,
+})
+
+// 是否展开完整指令列表
+const isExpanded = ref(props.defaultExpanded)
+
+// 是否显示展开按钮
+const showExpandButton = ref(false)
+
+// 切换指令列表的展开状态
+const toggleExpand = () => {
+  isExpanded.value = !isExpanded.value
+  emit('update:expanded', isExpanded.value)
+}
+
+// 处理显示展开按钮
+const handleShowExpandButton = (value: boolean) => {
+  showExpandButton.value = value
+}
+
+// 当前激活的分类
+const activeCategory = ref<string>('')
+
+// 当前选中的项目索引
+const activeItemIndex = ref(-1)
+
+// 元素引用
+const rootRef = ref<HTMLElement | null>(null)
+const panelRef = ref<InstanceType<typeof SuggestionPanel> | null>(null)
+
+// 计算实际打开状态
+const panelOpen = computed(() => (props.open !== undefined ? props.open : internalOpen.value))
+
+// 计算当前激活分类的项目列表
+const activeItems = computed(() => {
+  // 如果没有分类或没有选中分类，直接显示 items
+  if (props.categories.length === 0 || !activeCategory.value) {
+    return currentItems.value
+  }
+
+  // 查找当前激活的分类
+  const category = props.categories.find((cat) => cat.id === activeCategory.value)
+  return category ? category.items : []
+})
+
+// 监听打开状态变化，重置选中项
+watch(panelOpen, (isOpen) => {
+  if (isOpen) {
+    // 初始化选中项
+    activeItemIndex.value = activeItems.value.length > 0 ? 0 : -1
+  } else {
+    // 重置选中项
+    activeItemIndex.value = -1
+  }
+})
+
+// 监听项目列表变化，更新选中项
+watch(activeItems, (items) => {
+  if (items.length > 0 && activeItemIndex.value === -1) {
+    activeItemIndex.value = 0
+  } else if (items.length === 0) {
+    activeItemIndex.value = -1
+  } else if (activeItemIndex.value >= items.length) {
+    activeItemIndex.value = items.length - 1
+  }
+})
+
+// 初始化激活的分类
+watch(
+  () => props.categories,
+  (categories) => {
+    if (categories.length > 0 && !activeCategory.value) {
+      activeCategory.value = categories[0].id
+    }
+  },
+  { immediate: true },
+)
+
+// 处理 items 数据
+const processItems = () => {
+  currentItems.value = [...props.items]
+}
+
+// 初始化hooks
+const { detectTrigger } = useTriggerDetection(props)
+
+// 处理胶囊式指令点击
+const handleSuggestionClick = (item: SuggestionItem) => {
+  // 发出事件，便于父组件处理回填
+  emit('suggestion-select', item)
+
+  // 如果存在触发信息，可以利用它进行回填
+  // 否则直接将值传递给父组件
+  emit('select', item.value, {
+    text: '',
+    position: 0,
+  })
+
+  // 如果指令包含模板，在选择后填充模板
+  if (item.template) {
+    emit('fill-template', item.template)
+  }
+}
+
+// 触发事件处理
+const handleTrigger: TriggerHandler = (info: TriggerInfo) => {
+  if (info === false) {
+    closePanel()
+  } else {
+    // 保存触发信息，用于回填
+    if (typeof info === 'object' && info !== null) {
+      triggerInfo.value = {
+        text: info.text || '',
+        position: info.position || 0,
+      }
+    }
+    processItems()
+    internalOpen.value = true
+    emit('update:open', true)
+  }
+}
+
+// 核心功能：处理输入事件，用于检测触发字符
+const handleInputEvent = (event: Event, text: string) => {
+  // 检测触发条件
+  const newTriggerInfo = detectTrigger(event, text)
+
+  if (newTriggerInfo) {
+    // 设置触发信息
+    triggerInfo.value = newTriggerInfo
+
+    // 触发指令面板
+    handleTrigger(newTriggerInfo)
+    return true
+  }
+
+  // 如果指令面板已打开，关闭面板
+  if (panelOpen.value && text === '') {
+    handleTrigger(false)
+    return true
+  }
+
+  return false
+}
+
+// 键盘事件处理，委托给面板组件
+const handleKeyDown = (e: KeyboardEvent) => {
+  if (panelOpen.value && panelRef.value) {
+    panelRef.value.handleKeyDown(e)
+    return
+  }
+}
+
+// 关闭面板
+const closePanel = () => {
+  if (props.open === undefined) {
+    internalOpen.value = false
+  }
+  emit('update:open', false)
+  emit('close')
+}
+
+// 处理分类选择
+const handleCategorySelect = (category: Category) => {
+  activeCategory.value = category.id
+  // 重置选中项索引
+  activeItemIndex.value = 0
+
+  emit('category-select', category)
+}
+
+// 处理指令选择
+const handleSelect = (value: SuggestionItem, context: TriggerContext) => {
+  emit('select', value.text, context)
+
+  // 如果指令包含模板，在选择后填充模板
+  if (value.template) {
+    emit('fill-template', value.template)
+  }
+
+  closePanel()
+}
+
+// 点击外部关闭
+const handleClickOutside = (event: MouseEvent) => {
+  if (props.closeOnOutsideClick && panelOpen.value && rootRef.value && !rootRef.value.contains(event.target as Node)) {
+    closePanel()
+  }
+}
+
+// 按钮切换面板是否可见
+const handleOpenPanel = () => {
+  if (panelOpen.value) {
+    closePanel()
+  } else {
+    processItems()
+    internalOpen.value = true
+    emit('update:open', true)
+  }
+}
+
+// 监听点击外部事件
+onMounted(() => {
+  if (props.closeOnOutsideClick) {
+    document.addEventListener('click', handleClickOutside)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (props.closeOnOutsideClick) {
+    document.removeEventListener('click', handleClickOutside)
+  }
+})
+
+// 暴露给父组件的方法
+defineExpose({
+  trigger: handleTrigger,
+  keyDown: handleKeyDown,
+  input: handleInputEvent,
+  toggleExpand,
+})
+</script>
+
+<template>
+  <div ref="rootRef" :class="['tr-suggestion', className, { 'tr-suggestion--dark': theme === 'dark' }]">
+    <div class="tr-suggestion__header">
+      <div class="tr-suggestion__trigger" @click="handleOpenPanel">
+        <IconHotQuestion />
+      </div>
+
+      <!-- 胶囊式指令 -->
+      <SuggestionCapsule
+        :suggestions="items"
+        :isExpanded="isExpanded"
+        @suggestion-click="handleSuggestionClick"
+        @show-expand-button="handleShowExpandButton"
+      >
+        <template #suggestion-icon="slotProps">
+          <slot name="capsule-icon" :suggestion="slotProps.suggestion">
+            <IconEdit />
+          </slot>
+        </template>
+      </SuggestionCapsule>
+
+      <!-- 常规指令完整内容触发按钮 -->
+      <div v-if="showExpandButton" class="tr-suggestion__expand-button" @click="toggleExpand">
+        <IconArrowUp v-if="!isExpanded" />
+        <IconArrowDown v-else />
+      </div>
+    </div>
+
+    <!-- 自定义输入区域 -->
+    <slot name="trigger" :onTrigger="handleTrigger" :onKeyDown="handleKeyDown" :onInput="handleInputEvent">
+      <!-- 默认输入框实现 -->
+    </slot>
+
+    <!-- 指令面板（弹窗显示在输入框上方） -->
+    <SuggestionPanel
+      v-if="panelOpen"
+      ref="panelRef"
+      class="tr-suggestion-panel placement-top"
+      :items="currentItems"
+      :categories="categories"
+      :loading="loading"
+      :title="title"
+      :maxVisibleItems="maxVisibleItems"
+      :triggerContext="triggerInfo"
+      @close="closePanel"
+      @select="handleSelect"
+      @category-select="handleCategorySelect"
+    >
+      <!-- 转发所有插槽到面板组件 -->
+      <template #title-icon>
+        <slot name="title-icon">
+          <IconHotQuestion style="font-size: 36px" />
+        </slot>
+      </template>
+
+      <template #category-label="slotProps">
+        <slot name="category-label" :category="slotProps.category"></slot>
+      </template>
+
+      <template #item="slotProps">
+        <slot name="item" :item="slotProps.item" :active="slotProps.active"></slot>
+      </template>
+
+      <template #loading-indicator>
+        <slot name="loading-indicator">
+          <div class="tr-suggestion__loading-spinner"></div>
+        </slot>
+      </template>
+
+      <template #empty>
+        <slot name="empty">
+          <p>无匹配结果</p>
+        </slot>
+      </template>
+    </SuggestionPanel>
+  </div>
+</template>

package/src/suggestion/utils/dom.ts

@@ -0,0 +1,66 @@
+/**
+ * 测量元素文本宽度
+ * @param text 要测量的文本
+ * @param className 应用的样式类名
+ * @returns 测量后的宽度
+ */
+export function measureTextWidth(text: string, className: string = ''): number {
+  // 创建临时元素
+  const temp = document.createElement('div')
+  if (className) {
+    temp.className = className
+  }
+
+  // 设置样式确保准确测量
+  temp.style.visibility = 'hidden'
+  temp.style.position = 'absolute'
+  temp.style.whiteSpace = 'nowrap'
+  temp.textContent = text
+
+  // 添加到DOM并测量
+  document.body.appendChild(temp)
+  const width = temp.offsetWidth
+  document.body.removeChild(temp)
+
+  return width
+}
+
+/**
+ * 确保元素在容器中可见
+ * @param container 容器元素
+ * @param element 需要显示的元素
+ */
+export function ensureElementVisible(container: HTMLElement, element: HTMLElement): void {
+  const containerRect = container.getBoundingClientRect()
+  const elementRect = element.getBoundingClientRect()
+
+  if (elementRect.bottom > containerRect.bottom) {
+    // 元素底部超出容器
+    container.scrollTop += elementRect.bottom - containerRect.bottom
+  } else if (elementRect.top < containerRect.top) {
+    // 元素顶部超出容器
+    container.scrollTop -= containerRect.top - elementRect.top
+  }
+}
+
+// 文本宽度缓存
+const widthCache = new Map<string, number>()
+
+/**
+ * 带缓存的文本宽度测量
+ * @param text 要测量的文本
+ * @param className 样式类名
+ * @returns 测量后的宽度
+ */
+export function getCachedTextWidth(text: string, className: string = ''): number {
+  const key = `${text}::${className}`
+
+  if (widthCache.has(key)) {
+    return widthCache.get(key)!
+  }
+
+  const width = measureTextWidth(text, className)
+  widthCache.set(key, width)
+
+  return width
+}

package/src/suggestion/vars.less

@@ -0,0 +1,141 @@
+/* ----------------- 颜色变量 ----------------- */
+:root {
+  /* 主题基础颜色 */
+  --tr-suggestion-primary-color: #1890ff;
+  --tr-suggestion-background-color: #ffffff;
+  --tr-suggestion-modal-background-color: #ffffff;
+  --tr-suggestion-text-color: #333333;
+  --tr-suggestion-text-color-secondary: #666666;
+  --tr-suggestion-border-color: #e8e8e8;
+  --tr-suggestion-hover-color: #f5f5f5;
+  --tr-suggestion-tab-hover-bg: #f0f0f0;
+  --tr-suggestion-active-tab-color: var(--tr-suggestion-primary-color);
+  --tr-suggestion-active-tab-bg: #e6f7ff;
+
+  /* 弹窗相关颜色 */
+  --tr-suggestion-header-bg: #f9f9f9;
+  --tr-suggestion-title-color: #1d2129;
+  --tr-suggestion-close-icon-color: #86909c;
+  --tr-suggestion-tab-active-bg: #e8f3ff;
+  --tr-suggestion-tab-active-text: #1890ff;
+  --tr-suggestion-tab-text: #4e5969;
+  --tr-suggestion-tab-border: #f0f0f0;
+  --tr-suggestion-list-divider-color: #f0f0f0;
+  --tr-suggestion-modal-backdrop-color: rgba(0, 0, 0, 0.5);
+
+  /* 常见内容颜色 */
+  --tr-suggestion-common-bg: #fff;
+  --tr-suggestion-common-text: #191919;
+  --tr-suggestion-common-hover-bg: #ebebeb;
+  --tr-suggestion-common-shadow: rgba(0, 0, 0, 0.04);
+
+  /* 背景颜色 */
+  --tr-suggestion-container-bg: #f8f8f8;
+  --tr-suggestion-list-item-bg: #fff;
+  --tr-suggestion-list-hover-shadow: rgba(0, 0, 0, 0.08);
+  --tr-suggestion-category-bg: rgba(0, 0, 0, 0.04);
+  --tr-suggestion-category-hover-bg: rgba(0, 0, 0, 0.08);
+  --tr-suggestion-category-active-border: #191919;
+  --tr-suggestion-item-border-color: rgba(0, 0, 0, 0.04);
+
+  /* 滚动条颜色 */
+  --tr-suggestion-scrollbar-track-bg: rgba(16, 31, 28, 0.1);
+  --tr-suggestion-scrollbar-thumb-bg: rgba(144, 147, 153, 0.5);
+  --tr-suggestion-scrollbar-thumb-hover-bg: rgba(144, 147, 153, 0.3);
+
+  /* ----------------- 尺寸变量 ----------------- */
+  /* 圆角 */
+  --tr-suggestion-border-radius: 24px;
+  --tr-suggestion-category-border-radius: 8px;
+  --tr-suggestion-list-border-radius: 12px;
+  --tr-suggestion-common-border-radius: 16px;
+  --tr-suggestion-scrollbar-border-radius: 2em;
+
+  /* 间距和尺寸 */
+  --tr-suggestion-spacing: 16px;
+  --tr-suggestion-icon-size: 16px;
+  --tr-suggestion-container-height: 46px;
+  --tr-suggestion-item-height: 85px;
+  --tr-suggestion-trigger-size: 32px;
+  --tr-suggestion-common-item-height: 32px;
+  --tr-suggestion-category-height: 38px;
+  --tr-suggestion-scrollbar-width: 4px;
+  --tr-suggestion-modal-padding: 20px;
+  --tr-suggestion-modal-max-height: 553px;
+  --tr-suggestion-modal-max-width: 640px;
+  --tr-suggestion-content-max-height: calc(553px - 120px);
+  --tr-suggestion-z-index: 1000;
+
+  /* ----------------- 文字变量 ----------------- */
+  /* 字体 */
+  --tr-suggestion-font-size: 14px;
+  --tr-suggestion-title-font-size: 18px;
+  --tr-suggestion-title-font-weight: 600;
+  --tr-suggestion-item-font-weight: 500;
+  --tr-suggestion-line-height: 1.5;
+  --tr-suggestion-item-line-height: 22px;
+  --tr-suggestion-item-extra-font-size: 14px;
+  --tr-suggestion-item-extra-color: #191919;
+
+  /* ----------------- 特效变量 ----------------- */
+  /* 阴影 */
+  --tr-suggestion-panel-shadow:
+    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --tr-suggestion-trigger-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
+  --tr-suggestion-common-item-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
+  --tr-suggestion-list-item-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  --tr-suggestion-wrap-trigger-shadow: 2px 0 9px rgba(0, 0, 0, 0.04);
+
+  /* 动画 */
+  --tr-suggestion-transition-duration: 0.3s;
+  --tr-suggestion-transition-timing: ease;
+  --tr-suggestion-hover-transition: all var(--tr-suggestion-transition-duration) var(--tr-suggestion-transition-timing);
+}
+
+/* ----------------- 暗色主题变量 ----------------- */
+[data-theme='dark'],
+.theme-dark {
+  /* 主题基础颜色 */
+  --tr-suggestion-primary-color: #177ddc;
+  --tr-suggestion-background-color: #1f1f1f;
+  --tr-suggestion-modal-background-color: #2a2a2a;
+  --tr-suggestion-text-color: #f0f0f0;
+  --tr-suggestion-text-color-secondary: #aaaaaa;
+  --tr-suggestion-border-color: #434343;
+  --tr-suggestion-hover-color: #303030;
+  --tr-suggestion-tab-hover-bg: #3a3a3a;
+  --tr-suggestion-active-tab-color: var(--tr-suggestion-primary-color);
+  --tr-suggestion-active-tab-bg: #113a5c;
+
+  /* 弹窗相关颜色 */
+  --tr-suggestion-header-bg: #2a2a2a;
+  --tr-suggestion-title-color: #c9d1d9;
+  --tr-suggestion-close-icon-color: #8b949e;
+  --tr-suggestion-tab-active-bg: #30363d;
+  --tr-suggestion-tab-active-text: #58a6ff;
+  --tr-suggestion-tab-text: #8b949e;
+  --tr-suggestion-tab-border: #30363d;
+  --tr-suggestion-list-divider-color: #30363d;
+  --tr-suggestion-modal-backdrop-color: rgba(0, 0, 0, 0.7);
+
+  /* 常见内容颜色 */
+  --tr-suggestion-common-bg: #2a2a2a;
+  --tr-suggestion-common-text: #e6e6e6;
+  --tr-suggestion-common-hover-bg: #3a3a3a;
+  --tr-suggestion-common-shadow: rgba(0, 0, 0, 0.2);
+
+  /* 背景颜色 */
+  --tr-suggestion-container-bg: #141414;
+  --tr-suggestion-list-item-bg: #2a2a2a;
+  --tr-suggestion-list-hover-shadow: rgba(0, 0, 0, 0.3);
+  --tr-suggestion-category-bg: rgba(255, 255, 255, 0.04);
+  --tr-suggestion-category-hover-bg: rgba(255, 255, 255, 0.08);
+  --tr-suggestion-category-active-border: #e6e6e6;
+  --tr-suggestion-item-border-color: rgba(255, 255, 255, 0.04);
+
+  /* 滚动条颜色 */
+  --tr-suggestion-scrollbar-track-bg: rgba(255, 255, 255, 0.05);
+  --tr-suggestion-scrollbar-thumb-bg: rgba(255, 255, 255, 0.2);
+  --tr-suggestion-scrollbar-thumb-hover-bg: rgba(255, 255, 255, 0.3);
+  --tr-suggestion-item-extra-color: #aaaaaa;
+}