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

package/src/suggestion/index.vue

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

@@ -1,66 +0,0 @@
-/**
- * 测量元素文本宽度
- * @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

@@ -1,141 +0,0 @@
-/* ----------------- 颜色变量 ----------------- */
-: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;
-}

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/src/welcome/index.ts

@@ -1,12 +0,0 @@
-import { App } from 'vue'
-import Welcome from './index.vue'
-
-Welcome.name = 'TrWelcome'
-
-const install = function <T>(app: App<T>) {
-  app.component(Welcome.name!, Welcome)
-}
-
-Welcome.install = install
-
-export default Welcome as typeof Welcome & { install: typeof install }

package/src/welcome/index.type.ts

@@ -1,12 +0,0 @@
-import { VNode } from 'vue'
-
-export interface WelcomeProps {
-  title: string
-  description: string
-  align?: 'left' | 'center' | 'right' | string
-  icon?: VNode
-}
-
-export interface WelcomeSlots {
-  footer: () => unknown
-}

package/src/welcome/index.vue

@@ -1,69 +0,0 @@
-<script setup lang="ts">
-import { WelcomeProps, WelcomeSlots } from './index.type'
-
-const props = withDefaults(defineProps<WelcomeProps>(), {
-  align: 'center',
-})
-
-defineSlots<WelcomeSlots>()
-</script>
-
-<template>
-  <div class="tr-welcome">
-    <div class="tr-welcome__title-wrapper">
-      <span v-if="props.icon" class="tr-welcome__icon">
-        <component :is="props.icon"></component>
-      </span>
-      <h3 class="tr-welcome__title">{{ props.title }}</h3>
-    </div>
-    <span class="tr-welcome__description">{{ props.description }}</span>
-    <slot name="footer"></slot>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.tr-welcome {
-  --title-font: 40px;
-  --title-color: rgb(25, 25, 25);
-  --title-font-size: 40px;
-  --title-line-height: 56px;
-  --title-font-weight: 600;
-  --description-color: rgb(25, 25, 25);
-  --description-font-size: 20px;
-  --description-line-height: 34px;
-  --description-font-weight: 500;
-
-  text-align: v-bind('props.align');
-
-  display: flex;
-  flex-direction: column;
-  padding: 16px;
-}
-
-.tr-welcome__title-wrapper {
-}
-
-.tr-welcome__icon {
-  margin-right: 16px;
-}
-
-.tr-welcome__title {
-  color: var(--title-color);
-  font-size: var(--title-font-size);
-  line-height: var(--title-line-height);
-  font-weight: var(--title-font-weight);
-
-  padding: 0;
-  margin: 0;
-  display: inline-block;
-}
-
-.tr-welcome__description {
-  color: var(--description-color);
-  font-size: var(--description-font-size);
-  line-height: var(--description-line-height);
-  font-weight: var(--description-font-weight);
-
-  margin-top: 32px;
-}
-</style>

package/tsconfig.json

@@ -1,37 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": [
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
-    "skipLibCheck": true,
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "preserve",
-    "jsxImportSource": "vue",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue"
-  ],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
-}

package/tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}