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

package/src/sender/components/TemplateEditor.vue

@@ -0,0 +1,274 @@
+<script setup lang="ts">
+import { ref, computed, nextTick, watch } from 'vue'
+import { TemplatePart, TemplateEditorProps, TemplateEditorEmits, TemplateEditorExpose } from '../index.type'
+
+// 使用类型定义props
+const props = defineProps<TemplateEditorProps>()
+
+// 使用类型定义emits
+const emit = defineEmits<TemplateEditorEmits>()
+
+// 编辑器DOM引用
+const editorRef = ref<HTMLElement | null>(null)
+
+// 输入框引用集合
+// eslint-disable-next-line
+const inputRefs = ref<any>({})
+
+// 当前激活的输入块索引
+const activeFieldIndex = ref<number>(-1)
+
+// 解析模板，将其分解为普通文本和可编辑字段
+const templateParts = computed<TemplatePart[]>(() => {
+  // TODO: 如果已有值，使用现有值填充模板
+  if (props.value) {
+    return parseValueIntoTemplate()
+  }
+
+  // 否则使用模板解析
+  const parts: TemplatePart[] = []
+  let currentIndex = 0
+  let fieldIndex = 0
+
+  // 正则表达式匹配 [xxx] 格式
+  const regex = /\[(.*?)\]/g
+  let match
+
+  while ((match = regex.exec(props.template)) !== null) {
+    // 添加匹配前的普通文本
+    if (match.index > currentIndex) {
+      parts.push({
+        content: props.template.substring(currentIndex, match.index),
+        isField: false,
+      })
+    }
+
+    // 添加匹配的字段
+    parts.push({
+      content: '',
+      placeholder: match[1],
+      isField: true,
+      fieldIndex: fieldIndex++,
+    })
+
+    currentIndex = match.index + match[0].length
+  }
+
+  // 添加剩余的普通文本
+  if (currentIndex < props.template.length) {
+    parts.push({
+      content: props.template.substring(currentIndex),
+      isField: false,
+    })
+  }
+
+  return parts
+})
+
+// 解析现有值填充到模板中
+const parseValueIntoTemplate = (): TemplatePart[] => {
+  // 在实际应用中，这里应该根据模板和现有值进行匹配
+  return templateParts.value
+}
+
+// 生成完整的文本值
+const generateValue = (): string => {
+  return templateParts.value.map((part) => part.content).join('')
+}
+
+// 更新值并触发事件
+const updateValue = (): void => {
+  const newValue = generateValue()
+  emit('update:value', newValue)
+  emit('input', newValue)
+}
+
+// 激活输入块
+const activateField = (index: number): void => {
+  activeFieldIndex.value = index
+
+  // 确保DOM更新后再聚焦
+  nextTick(() => {
+    if (inputRefs.value[index]) {
+      inputRefs.value[index]?.focus()
+    }
+  })
+}
+
+// 取消激活输入块
+const deactivateField = (): void => {
+  updateValue()
+  activeFieldIndex.value = -1
+}
+
+// 处理输入框键盘事件
+const handleInputKeyDown = (event: KeyboardEvent, index: number): void => {
+  if (event.key === 'Tab') {
+    event.preventDefault()
+
+    // 找到下一个输入块
+    const nextFieldIndex = findNextFieldIndex(index, event.shiftKey)
+    if (nextFieldIndex !== -1) {
+      // 先更新当前值
+      updateValue()
+      // 再激活下一个字段
+      activateField(nextFieldIndex)
+    }
+  } else if (event.key === 'Enter') {
+    event.preventDefault()
+    deactivateField()
+  }
+}
+
+// 寻找下一个输入块索引，支持通过 shift+tab 反向查找
+const findNextFieldIndex = (currentIndex: number, isReverse = false): number => {
+  if (isReverse) {
+    // 向前查找（Shift+Tab）
+    for (let i = currentIndex - 1; i >= 0; i--) {
+      if (templateParts.value[i].isField) {
+        return i
+      }
+    }
+
+    // 如果没有找到，则循环到最后一个字段
+    for (let i = templateParts.value.length - 1; i > currentIndex; i--) {
+      if (templateParts.value[i].isField) {
+        return i
+      }
+    }
+  } else {
+    // 向后查找（Tab）
+    for (let i = currentIndex + 1; i < templateParts.value.length; i++) {
+      if (templateParts.value[i].isField) {
+        return i
+      }
+    }
+
+    // 循环回到第一个输入块
+    for (let i = 0; i < currentIndex; i++) {
+      if (templateParts.value[i].isField) {
+        return i
+      }
+    }
+  }
+
+  return -1
+}
+
+// 监听值变化
+watch(
+  () => props.value,
+  (newValue) => {
+    // 如果外部值为空字符串，清空所有字段内容
+    if (newValue === '') {
+      resetFields()
+    }
+  },
+)
+
+// 重置所有字段内容
+const resetFields = (): void => {
+  // 清空所有输入块内容
+  templateParts.value.forEach((part) => {
+    if (part.isField) {
+      part.content = ''
+    }
+  })
+  // 更新值
+  updateValue()
+}
+
+// 导出方法供父组件调用
+defineExpose<TemplateEditorExpose>({
+  activateFirstField: () => {
+    for (let i = 0; i < templateParts.value.length; i++) {
+      if (templateParts.value[i].isField) {
+        activateField(i)
+        break
+      }
+    }
+  },
+  resetFields,
+})
+</script>
+
+<template>
+  <div class="template-editor">
+    <div class="template-content" ref="editorRef">
+      <template v-for="(part, index) in templateParts" :key="index">
+        <!-- 普通文本部分 -->
+        <span v-if="!part.isField">{{ part.content }}</span>
+
+        <!-- 可编辑的输入块部分 -->
+        <span
+          v-else
+          class="template-field"
+          :class="{ 'template-field-active': activeFieldIndex === index }"
+          @click="activateField(index)"
+        >
+          <input
+            v-if="activeFieldIndex === index"
+            :ref="(el) => (inputRefs[index] = el)"
+            v-model="part.content"
+            class="template-input"
+            @blur="deactivateField()"
+            @keydown="handleInputKeyDown($event, index)"
+            @click.stop
+          />
+          <span v-else class="template-placeholder">{{ part.content || part.placeholder }}</span>
+        </span>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.template-editor {
+  width: 100%;
+  min-height: 26px;
+  line-height: 26px;
+}
+
+.template-content {
+  display: inline;
+  word-break: break-word;
+}
+
+.template-field {
+  display: inline-block;
+  height: 26px;
+  min-width: fit-content;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.05);
+  padding: 0 10px;
+  margin: 0 2px;
+  vertical-align: middle;
+  cursor: text;
+  transition: all 0.2s ease;
+}
+
+.template-field:hover {
+  background: rgba(0, 0, 0, 0.08);
+}
+
+.template-placeholder {
+  color: #666;
+  user-select: none;
+}
+
+.template-input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 26px;
+  border: 1px solid rgb(194, 194, 194);
+  border-radius: 4px;
+  padding: 0 10px;
+  outline: none;
+  background: white;
+}
+
+.template-field-active {
+  background: transparent;
+  padding: 0;
+}
+</style>

package/src/sender/index.less

@@ -2,7 +2,6 @@
 
 // 主要组件样式
 .tiny-sender {
-  background: var(--tr-sender-bg-color);
   position: relative;
   color: var(--tr-sender-text-color);
 
@@ -31,6 +30,12 @@
     color: var(--tr-sender-text-color-secondary);
   }
 
+  .tiny-textarea.is-disabled .tiny-textarea__inner {
+    border: none;
+    background: var(--tr-sender-bg-color);
+    color: var(--tr-sender-text-color-secondary);
+  }
+
   .tiny-input__suffix {
     right: 0;
     display: flex;
@@ -39,9 +44,10 @@
 
   .tiny-textarea__inner {
     border: none;
-    height: var(--tr-sender-input-height);
-    padding-left: 0;
-    padding-right: 0;
+    height: 26px;
+
+    padding: 0;
+    align-content: center; // 使内容垂直居中
     background-color: var(--tr-sender-bg-color);
     color: var(--tr-sender-text-color);
 
@@ -88,7 +94,6 @@
     width: 100%;
     border-radius: 0 0 var(--tr-sender-border-radius) var(--tr-sender-border-radius);
     background: var(--tr-sender-footer-bg);
-    margin-top: var(--tr-sender-gap);
     z-index: 1;
 
     &.tiny-sender__bottom-row {
@@ -248,6 +253,11 @@
       cursor: wait;
       background-color: var(--tr-sender-bg-color);
     }
+
+    .tiny-textarea__inner {
+      cursor: wait;
+      background-color: var(--tr-sender-bg-color);
+    }
   }
 
   // 错误状态
@@ -283,8 +293,8 @@
 .action-buttons {
   display: flex;
   gap: var(--tr-sender-gap);
-  padding: var(--tr-sender-padding-top) var(--tr-sender-padding-right) var(--tr-sender-padding-bottom)
-    var(--tr-sender-padding-left);
+  padding-left: var(--tr-sender-padding-left);
+  padding-right: var(--tr-sender-padding-right);
   background: var(--tr-sender-bg-color);
   border-radius: var(--tr-sender-border-radius);
   align-items: center;

package/src/sender/index.type.ts

@@ -41,6 +41,8 @@ export interface SenderProps {
   showWordLimit?: boolean // 显示字数统计
   suggestions?: string[] // 输入建议
   theme?: ThemeType // 主题
+  template?: string // 模板字符串，格式如 "你好 [称呼]，感谢您的 [事项]"
+  hasContent?: boolean // 手动指定是否有内容，用于模板模式
 }
 
 export interface ActionButtonsProps {
@@ -72,6 +74,7 @@ export type SenderEmits = {
   (e: 'blur', event: FocusEvent): void
   (e: 'escape-press'): void // 按下Esc键时触发
   (e: 'cancel'): void // 取消发送状态时触发
+  (e: 'reset-template'): void // 重置模板状态，退出模板编辑模式
 }
 
 // 语音识别状态
@@ -109,3 +112,51 @@ export interface SpeechHandler {
   start: () => void
   stop: () => void
 }
+
+/**
+ * 模板部分定义
+ */
+export interface TemplatePart {
+  /** 内容文本 */
+  content: string
+  /** 是否为可编辑字段 */
+  isField: boolean
+  /** 占位符文本 (当字段为空时显示) */
+  placeholder?: string
+  /** 字段索引 (用于标识可编辑字段) */
+  fieldIndex?: number
+}
+
+/**
+ * 模板编辑器属性
+ */
+export interface TemplateEditorProps {
+  /** 模板字符串，格式为普通文本与 [占位符] 的组合 */
+  template: string
+  /** 当前值 */
+  value?: string
+}
+
+/**
+ * 模板编辑器事件
+ */
+export interface TemplateEditorEmits {
+  /** 更新值 */
+  (e: 'update:value', value: string): void
+  /** 输入事件 */
+  (e: 'input', value: string): void
+  /** 内容变更状态 - 通知父组件是否有内容 */
+  (e: 'content-status', hasContent: boolean): void
+  /** 字段激活状态变更 */
+  (e: 'field-active', isActive: boolean, index: number): void
+}
+
+/**
+ * 模板编辑器暴露的方法
+ */
+export interface TemplateEditorExpose {
+  /** 激活第一个可编辑字段 */
+  activateFirstField: () => void
+  /** 重置所有字段 */
+  resetFields: () => void
+}

package/src/sender/index.vue

@@ -6,6 +6,7 @@ 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>(), {
@@ -23,15 +24,33 @@ const props = withDefaults(defineProps<SenderProps>(), {
   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 }: InputHandler = useInputHandler(props, emit)
+const { inputValue, isComposing, clearInput: originalClearInput }: InputHandler = useInputHandler(props, emit)
+
+// 清空功能增强：同时处理模板和普通输入，并退出模板编辑模式
+const clearInput = () => {
+  // 调用原始清空方法
+  originalClearInput()
+
+  // 如果当前是模板编辑模式，需要退出模板编辑模式
+  if (props.template) {
+    // 发出一个模板重置事件，通知父组件清除模板
+    emit('reset-template')
+  }
+}
 
 // 输入建议
 const showSuggestions = ref(false)
@@ -46,6 +65,19 @@ const selectSuggestion = (value: string) => {
   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 : {}),
@@ -93,8 +125,8 @@ const handleBlur = (event: FocusEvent) => {
   emit('blur', event)
 }
 
-// 输入框类型计算
-const inputType = computed(() => (props.mode === 'multiple' ? 'textarea' : 'text'))
+// 初始化自适应对象
+const autoSize = computed(() => (props.mode === 'multiple' ? { minRows: 2, maxRows: 5 } : { maxRows: 1 }))
 
 const justifyContent = computed(
   (): {
@@ -115,6 +147,7 @@ const justifyContent = computed(
 // 状态计算
 const isDisabled = computed(() => props.disabled)
 const isLoading = computed(() => props.loading)
+const hasContent = computed(() => (props.hasContent !== undefined ? props.hasContent : !!inputValue.value))
 
 // 样式类
 const senderClasses = computed(() => ({
@@ -144,7 +177,9 @@ watch(inputValue, () => {
 // 暴露方法
 defineExpose({
   focus: () => {
-    if (inputRef.value) {
+    if (showTemplateEditor.value && templateEditorRef.value) {
+      activateTemplateFirstField()
+    } else if (inputRef.value) {
       inputRef.value.focus()
     } else {
       const input = document.querySelector('.tiny-input__inner') as HTMLInputElement
@@ -163,6 +198,7 @@ defineExpose({
   submit: triggerSubmit,
   startSpeech,
   stopSpeech,
+  activateTemplateFirstField,
 })
 </script>
 
@@ -187,12 +223,24 @@ defineExpose({
 
           <!-- 内容区域 - 确保最小宽度，不被挤占 -->
           <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="inputType"
+              type="textarea"
               :readonly="isLoading"
-              :resize="mode === 'multiple' ? 'none' : undefined"
+              resize="none"
               v-model="inputValue"
               :disabled="isDisabled"
               :placeholder="placeholder"
@@ -217,7 +265,7 @@ defineExpose({
                 :loading="loading"
                 :disabled="isDisabled"
                 :show-clear="clearable"
-                :has-content="!!inputValue"
+                :has-content="hasContent"
                 :speech-status="speechState"
                 :submit-type="submitType"
                 @clear="clearInput"
@@ -253,7 +301,7 @@ defineExpose({
                   :loading="loading"
                   :disabled="isDisabled"
                   :show-clear="clearable"
-                  :has-content="!!inputValue"
+                  :has-content="hasContent"
                   :speech-status="speechState"
                   :submit-type="submitType"
                   @clear="clearInput"

package/src/sender/vars.less

@@ -17,7 +17,7 @@
   --tr-sender-padding-bottom: 10px;
   --tr-sender-padding-left: 24px;
   --tr-sender-gap: 8px;
-  --tr-sender-input-height: 100px;
+  --tr-sender-input-height: 26px;
   --tr-sender-input-min-height: 60px;
   --tr-sender-icon-size: 22px;
   --tr-sender-icon-size-small: 18px;
@@ -48,7 +48,7 @@
 
   // 内容区域 (Content)
   --tr-sender-content-min-width: 180px;
-  --tr-sender-content-padding: 15px 10px 10px 24px;
+  --tr-sender-content-padding: 15px 10px 12px 24px;
   --tr-sender-content-padding-with-prefix: 15px 10px 10px 8px;
   --tr-sender-content-flex-grow: 1;
 
@@ -68,7 +68,7 @@
 
 /* 暗色主题 */
 .theme-dark,
-[data-theme="dark"] {
+[data-theme='dark'] {
   --tr-sender-border-color: #4c4d4f;
   --tr-sender-bg-color: #1c1c1c;
   --tr-sender-text-color: #ffffff;

package/src/suggestion/components/CategoryNav.vue

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