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

package/src/sender/index.vue

@@ -1,338 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import TinyInput from '@opentiny/vue-input'
-import type { SenderProps, SenderEmits, InputHandler, KeyboardHandler } from './index.type'
-import { useInputHandler } from './composables/useInputHandler'
-import { useKeyboardHandler } from './composables/useKeyboardHandler'
-import { useSpeechHandler } from './composables/useSpeechHandler'
-import ActionButtons from './components/ActionButtons.vue'
-import TemplateEditor from './components/TemplateEditor.vue'
-import './index.less'
-
-const props = withDefaults(defineProps<SenderProps>(), {
-  autofocus: false,
-  autoSize: false,
-  allowSpeech: true,
-  allowFiles: false,
-  clearable: false,
-  disabled: false,
-  loading: false,
-  modelValue: '',
-  mode: 'single',
-  maxLength: Infinity,
-  placeholder: '请输入内容...',
-  showWordLimit: false,
-  submitType: 'enter',
-  theme: 'light',
-  template: '',
-  hasContent: undefined,
-})
-
-const emit = defineEmits<SenderEmits>()
-
-// 输入引用
-const inputRef = ref<HTMLElement | null>(null)
-const templateEditorRef = ref<InstanceType<typeof TemplateEditor> | null>(null)
-
-// 是否显示模板编辑器
-const showTemplateEditor = computed(() => !!props.template)
-
-// 输入控制
-const { inputValue, isComposing, clearInput: originalClearInput }: InputHandler = useInputHandler(props, emit)
-
-// 清空功能增强：同时处理模板和普通输入，并退出模板编辑模式
-const clearInput = () => {
-  // 调用原始清空方法
-  originalClearInput()
-
-  // 如果当前是模板编辑模式，需要退出模板编辑模式
-  if (props.template) {
-    // 发出一个模板重置事件，通知父组件清除模板
-    emit('reset-template')
-  }
-}
-
-// 输入建议
-const showSuggestions = ref(false)
-const filteredSuggestions = computed(() => {
-  if (!props.suggestions || !inputValue.value) return []
-  return props.suggestions.filter((item) => item.toLowerCase().includes(inputValue.value.toLowerCase()))
-})
-
-const selectSuggestion = (value: string) => {
-  inputValue.value = value
-  showSuggestions.value = false
-  emit('suggestion-select', value)
-}
-
-// 模板相关处理
-const handleTemplateInput = (value: string) => {
-  inputValue.value = value
-  emit('update:modelValue', value)
-}
-
-// 激活第一个模板字段
-const activateTemplateFirstField = () => {
-  if (templateEditorRef.value) {
-    templateEditorRef.value.activateFirstField()
-  }
-}
-
-// 语音识别
-const speechOptions = computed(() => ({
-  ...(typeof props.speech === 'object' ? props.speech : {}),
-  onStart: () => emit('speech-start'),
-  onEnd: (transcript?: string) => emit('speech-end', transcript),
-  onInterim: (transcript: string) => emit('speech-interim', transcript),
-  onFinal: (text: string) => {
-    inputValue.value = text
-    emit('speech-end', text)
-  },
-  onError: (err: Error) => {
-    showError(err.message)
-    emit('speech-error', err)
-  },
-}))
-
-const { speechState, start: startSpeech, stop: stopSpeech } = useSpeechHandler(speechOptions.value)
-
-// 语音控制
-const toggleSpeech = () => {
-  if (speechState.isRecording) {
-    stopSpeech()
-  } else {
-    startSpeech()
-  }
-}
-
-// 键盘处理
-const { handleKeyPress, triggerSubmit }: KeyboardHandler = useKeyboardHandler(
-  props,
-  emit,
-  inputValue,
-  isComposing,
-  speechState,
-  showSuggestions,
-  toggleSpeech,
-)
-
-// 处理焦点事件
-const handleFocus = (event: FocusEvent) => {
-  emit('focus', event)
-}
-
-const handleBlur = (event: FocusEvent) => {
-  emit('blur', event)
-}
-
-// 初始化自适应对象
-const autoSize = computed(() => (props.mode === 'multiple' ? { minRows: 2, maxRows: 5 } : { maxRows: 1 }))
-
-const justifyContent = computed(
-  (): {
-    display: string
-    justifyContent: 'space-between' | 'flex-end'
-    alignItems: string
-  } => {
-    const justifyContent = props.showWordLimit && props.maxLength !== Infinity ? 'space-between' : 'flex-end'
-
-    return {
-      display: 'flex',
-      justifyContent,
-      alignItems: 'center',
-    }
-  },
-)
-
-// 状态计算
-const isDisabled = computed(() => props.disabled)
-const isLoading = computed(() => props.loading)
-const hasContent = computed(() => (props.hasContent !== undefined ? props.hasContent : !!inputValue.value))
-
-// 样式类
-const senderClasses = computed(() => ({
-  'is-disabled': isDisabled.value,
-  'is-loading': isLoading.value,
-  'has-error': !!errorMessage.value,
-}))
-
-// 错误处理
-const errorMessage = ref<string>('')
-const showError = (msg: string) => {
-  errorMessage.value = msg
-  setTimeout(() => (errorMessage.value = ''), 5000)
-}
-
-// 输入法结束处理
-const handleCompositionEnd = () => {
-  isComposing.value = false
-  setTimeout(() => (isComposing.value = false), 50)
-}
-
-// 监听输入变化
-watch(inputValue, () => {
-  showSuggestions.value = !!props.suggestions && !!inputValue.value
-})
-
-// 暴露方法
-defineExpose({
-  focus: () => {
-    if (showTemplateEditor.value && templateEditorRef.value) {
-      activateTemplateFirstField()
-    } else if (inputRef.value) {
-      inputRef.value.focus()
-    } else {
-      const input = document.querySelector('.tiny-input__inner') as HTMLInputElement
-      input?.focus()
-    }
-  },
-  blur: () => {
-    if (inputRef.value) {
-      inputRef.value.blur()
-    } else {
-      const input = document.querySelector('.tiny-input__inner') as HTMLInputElement
-      input?.blur()
-    }
-  },
-  clear: clearInput,
-  submit: triggerSubmit,
-  startSpeech,
-  stopSpeech,
-  activateTemplateFirstField,
-})
-</script>
-
-<template>
-  <div class="tiny-sender" :class="[senderClasses, `theme-${theme}`, `mode-${mode}`]" :data-theme="theme">
-    <!-- 输入区域容器 -->
-    <div class="tiny-sender__container">
-      <div class="tiny-sender__input-wrapper">
-        <!-- 头部插槽 -->
-        <Transition name="tiny-sender-slide-down">
-          <div v-if="$slots.header" class="tiny-sender__header-slot">
-            <slot name="header"></slot>
-          </div>
-        </Transition>
-
-        <!-- 输入行 - 横向布局 -->
-        <div class="tiny-sender__input-row" :class="{ 'has-prefix': $slots.prefix, 'has-header': $slots.header }">
-          <!-- 前缀插槽 -->
-          <div v-if="$slots.prefix" class="tiny-sender__prefix-slot">
-            <slot name="prefix" />
-          </div>
-
-          <!-- 内容区域 - 确保最小宽度，不被挤占 -->
-          <div class="tiny-sender__content-area">
-            <!-- 模板编辑器 -->
-            <template v-if="showTemplateEditor">
-              <TemplateEditor
-                ref="templateEditorRef"
-                :template="template"
-                :value="inputValue"
-                @update:value="handleTemplateInput"
-                @input="handleTemplateInput"
-              />
-            </template>
-            <!-- 普通输入框 -->
-            <tiny-input
-              v-else
-              ref="inputRef"
-              :autosize="autoSize"
-              type="textarea"
-              :readonly="isLoading"
-              resize="none"
-              v-model="inputValue"
-              :disabled="isDisabled"
-              :placeholder="placeholder"
-              :maxlength="maxLength"
-              :autofocus="autofocus"
-              @keydown="handleKeyPress"
-              @compositionstart="isComposing = true"
-              @compositionend="handleCompositionEnd"
-              @focus="handleFocus"
-              @blur="handleBlur"
-            />
-          </div>
-
-          <!-- 操作区域/后置插槽 -->
-          <div v-if="mode === 'single'" class="tiny-sender__actions-slot">
-            <div class="tiny-sender__buttons-container">
-              <slot name="actions" />
-              <action-buttons
-                class="inline-buttons"
-                :allow-speech="allowSpeech"
-                :allow-files="allowFiles"
-                :loading="loading"
-                :disabled="isDisabled"
-                :show-clear="clearable"
-                :has-content="hasContent"
-                :speech-status="speechState"
-                :submit-type="submitType"
-                @clear="clearInput"
-                @toggle-speech="toggleSpeech"
-                @submit="triggerSubmit"
-                @cancel="$emit('cancel')"
-              />
-            </div>
-          </div>
-        </div>
-
-        <!-- 底部插槽 - 底部工具栏作为默认内容 -->
-        <Transition name="tiny-sender-slide-up">
-          <div v-if="$slots.footer" class="tiny-sender__footer-slot">
-            <slot name="footer"></slot>
-          </div>
-          <div
-            v-else-if="mode !== 'single' || (showWordLimit && maxLength !== Infinity)"
-            :style="justifyContent"
-            class="tiny-sender__footer-slot tiny-sender__bottom-row"
-          >
-            <!-- 字数限制 -->
-            <div v-if="showWordLimit && maxLength !== Infinity" class="tiny-sender__word-limit">
-              {{ inputValue.length }}/{{ maxLength }}
-            </div>
-
-            <!-- 多行模式下的操作按钮 -->
-            <div v-if="mode === 'multiple'" class="tiny-sender__toolbar">
-              <div class="tiny-sender__buttons-container">
-                <action-buttons
-                  :allow-speech="allowSpeech"
-                  :allow-files="allowFiles"
-                  :loading="loading"
-                  :disabled="isDisabled"
-                  :show-clear="clearable"
-                  :has-content="hasContent"
-                  :speech-status="speechState"
-                  :submit-type="submitType"
-                  @clear="clearInput"
-                  @toggle-speech="toggleSpeech"
-                  @submit="triggerSubmit"
-                  @cancel="$emit('cancel')"
-                />
-              </div>
-            </div>
-          </div>
-        </Transition>
-      </div>
-    </div>
-
-    <!-- 输入建议 -->
-    <Transition name="tiny-sender-slide-up">
-      <div v-if="showSuggestions && filteredSuggestions.length" class="tiny-sender__suggestions">
-        <div
-          v-for="(item, index) in filteredSuggestions"
-          :key="index"
-          class="suggestion-item"
-          @click="selectSuggestion(item)"
-        >
-          {{ item }}
-        </div>
-      </div>
-    </Transition>
-
-    <!-- 错误提示 -->
-    <div v-if="errorMessage" class="tiny-sender__error">
-      {{ errorMessage }}
-    </div>
-  </div>
-</template>

package/src/sender/vars.less

@@ -1,84 +0,0 @@
-// 主题变量
-:root {
-  // 基础颜色
-  --tr-sender-border-color: #dcdfe6;
-  --tr-sender-bg-color: #fff;
-  --tr-sender-text-color: #303133;
-  --tr-sender-text-color-secondary: #909399;
-  --tr-sender-error-color: #f56c6c;
-  --tr-sender-input-disabled-bg-color: #f0f0f0;
-  --tr-sender-word-limit-color: #808080;
-  --tr-sender-button-icon-color: #5e7ce0;
-
-  // 尺寸
-  --tr-sender-border-radius: 28px;
-  --tr-sender-padding-top: 15px;
-  --tr-sender-padding-right: 10px;
-  --tr-sender-padding-bottom: 10px;
-  --tr-sender-padding-left: 24px;
-  --tr-sender-gap: 8px;
-  --tr-sender-input-height: 26px;
-  --tr-sender-input-min-height: 60px;
-  --tr-sender-icon-size: 22px;
-  --tr-sender-icon-size-small: 18px;
-
-  // 字体
-  --tr-sender-font-size: 14px;
-  --tr-sender-font-size-small: 12px;
-
-  // 动画
-  --tr-sender-transition-duration: 0.2s;
-
-  // 阴影
-  --tr-sender-box-shadow: 0 4px 16px 0px rgba(0, 0, 0, 0.08);
-  --tr-sender-focus-shadow: 0 0 0 2px rgba(94, 124, 224, 0.3);
-
-  // 插槽变量
-  // 头部插槽 (Header)
-  --tr-sender-header-max-height: 120px;
-  --tr-sender-header-min-height: 40px;
-  --tr-sender-header-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  --tr-sender-header-padding: 10px;
-
-  // 前缀插槽 (Prefix)
-  --tr-sender-prefix-width: 60px;
-  --tr-sender-prefix-min-width: 44px;
-  --tr-sender-prefix-hover-bg: #f5f5f5;
-  --tr-sender-prefix-padding-left: 16px;
-
-  // 内容区域 (Content)
-  --tr-sender-content-min-width: 180px;
-  --tr-sender-content-padding: 15px 10px 12px 24px;
-  --tr-sender-content-padding-with-prefix: 15px 10px 10px 8px;
-  --tr-sender-content-flex-grow: 1;
-
-  // 操作区域 (Actions)
-  --tr-sender-actions-width: auto;
-  --tr-sender-actions-min-width: 32px;
-  --tr-sender-actions-gap: 8px;
-  --tr-sender-actions-icon-size: 20px;
-  --tr-sender-actions-padding-right: 10px;
-
-  // 底部插槽 (Footer)
-  --tr-sender-footer-max-height: 200px;
-  --tr-sender-footer-min-height: 0;
-  --tr-sender-footer-bg: #fff;
-  --tr-sender-footer-hover: #f9f9f9;
-}
-
-/* 暗色主题 */
-.theme-dark,
-[data-theme='dark'] {
-  --tr-sender-border-color: #4c4d4f;
-  --tr-sender-bg-color: #1c1c1c;
-  --tr-sender-text-color: #ffffff;
-  --tr-sender-text-color-secondary: #a0a0a0;
-  --tr-sender-input-disabled-bg-color: #2a2a2a;
-  --tr-sender-box-shadow: 0 4px 16px 0px rgba(0, 0, 0, 0.2);
-  --tr-sender-button-icon-color: #a0a0a0;
-
-  // 暗色主题插槽变量
-  --tr-sender-prefix-hover-bg: #333;
-  --tr-sender-footer-bg: #2c2c2c;
-  --tr-sender-footer-hover: #3a3a3a;
-}

package/src/suggestion/components/CategoryNav.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { PropType } from 'vue'
-import { Category } from '../index.type'
-
-defineProps({
-  categories: {
-    type: Array as PropType<Category[]>,
-    required: true,
-  },
-  activeCategory: {
-    type: String,
-    default: '',
-  },
-})
-
-const emit = defineEmits(['category-select'])
-
-const handleCategorySelect = (categoryId: string) => {
-  emit('category-select', categoryId)
-}
-</script>
-
-<template>
-  <div class="tr-suggestion-categories">
-    <div
-      v-for="category in categories"
-      :key="category.id"
-      class="tr-suggestion-categories-item"
-      :class="{ active: activeCategory === category.id }"
-      @click="handleCategorySelect(category.id)"
-    >
-      <slot name="category-label" :category="category">
-        <div class="category-icon" v-if="category.icon">{{ category.icon }}</div>
-        <span>{{ category.label }}</span>
-      </slot>
-    </div>
-  </div>
-</template>

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>