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

package/src/sender/components/TemplateEditor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, nextTick, watch } from 'vue'
+import { ref, nextTick, watch, onMounted } from 'vue'
 import { TemplatePart, TemplateEditorProps, TemplateEditorEmits, TemplateEditorExpose } from '../index.type'
 
 // 使用类型定义props
@@ -11,21 +11,26 @@ const emit = defineEmits<TemplateEditorEmits>()
 // 编辑器DOM引用
 const editorRef = ref<HTMLElement | null>(null)
 
-// 输入框引用集合
-// eslint-disable-next-line
-const inputRefs = ref<any>({})
+// 可编辑元素引用集合
+const editableRefs = ref<Record<number, HTMLElement>>({})
 
 // 当前激活的输入块索引
 const activeFieldIndex = ref<number>(-1)
 
-// 解析模板，将其分解为普通文本和可编辑字段
-const templateParts = computed<TemplatePart[]>(() => {
-  // TODO: 如果已有值，使用现有值填充模板
-  if (props.value) {
-    return parseValueIntoTemplate()
-  }
+// 是否有内容标志
+const hasContent = ref(false)
+
+// 标记是否是用户手动编辑
+const isUserEditing = ref(false)
 
-  // 否则使用模板解析
+// 标记是否是内部更新，避免循环更新
+const isInternalUpdate = ref(false)
+
+// 使用ref代替computed属性，作为组件的主要状态来源
+const editableParts = ref<TemplatePart[]>([])
+
+// 解析模板，将其分解为普通文本和可编辑字段
+const parseTemplate = (template: string): TemplatePart[] => {
   const parts: TemplatePart[] = []
   let currentIndex = 0
   let fieldIndex = 0
@@ -34,18 +39,18 @@ const templateParts = computed<TemplatePart[]>(() => {
   const regex = /\[(.*?)\]/g
   let match
 
-  while ((match = regex.exec(props.template)) !== null) {
+  while ((match = regex.exec(template)) !== null) {
     // 添加匹配前的普通文本
     if (match.index > currentIndex) {
       parts.push({
-        content: props.template.substring(currentIndex, match.index),
+        content: template.substring(currentIndex, match.index),
         isField: false,
       })
     }
 
-    // 添加匹配的字段
+    // 添加匹配的字段，将placeholder作为默认内容
     parts.push({
-      content: '',
+      content: match[1], // 使用占位符作为默认内容
       placeholder: match[1],
       isField: true,
       fieldIndex: fieldIndex++,
@@ -55,134 +60,319 @@ const templateParts = computed<TemplatePart[]>(() => {
   }
 
   // 添加剩余的普通文本
-  if (currentIndex < props.template.length) {
+  if (currentIndex < template.length) {
     parts.push({
-      content: props.template.substring(currentIndex),
+      content: template.substring(currentIndex),
       isField: false,
     })
   }
 
   return parts
-})
+}
+
+// 初始化editableParts
+const initializeEditableParts = (): void => {
+  editableParts.value = parseTemplate(props.template)
+  if (props.value) {
+    updatePartsFromValue(props.value)
+  }
+}
 
-// 解析现有值填充到模板中
-const parseValueIntoTemplate = (): TemplatePart[] => {
-  // 在实际应用中，这里应该根据模板和现有值进行匹配
-  return templateParts.value
+// 从value更新各个部分的内容
+const updatePartsFromValue = (value: string): void => {
+  if (!value || isInternalUpdate.value) return
+
+  // 仅在值确实不同时才更新，避免不必要的处理
+  const currentValue = generateValue()
+  if (currentValue === value) return
+
+  // 创建一个临时的解析结果用于比较
+  const templateStructure = parseTemplate(props.template)
+
+  // 计算模板的静态部分（非字段部分）
+  const staticParts: string[] = []
+
+  templateStructure.forEach((part) => {
+    if (!part.isField) {
+      staticParts.push(part.content)
+    } else {
+      // 用一个占位符标记字段位置
+      staticParts.push(`__FIELD_${part.fieldIndex}__`)
+    }
+  })
+
+  // 使用静态部分作为分隔符，尝试提取字段值
+  let remainingValue = value
+  let currentFieldIndex = 0
+
+  // 遍历editableParts，找到字段并更新
+  for (let i = 0; i < editableParts.value.length; i++) {
+    const part = editableParts.value[i]
+
+    if (!part.isField) continue
+
+    // 尝试找到当前字段前的静态部分
+    const prevStaticPart = staticParts[currentFieldIndex]
+    currentFieldIndex++
+
+    // 下一个静态部分（如果有）
+    const nextStaticPart = staticParts[currentFieldIndex] || ''
+
+    if (prevStaticPart && remainingValue.startsWith(prevStaticPart)) {
+      // 移除前导静态部分
+      remainingValue = remainingValue.substring(prevStaticPart.length)
+
+      // 如果有下一个静态部分，提取中间的字段值
+      if (nextStaticPart && remainingValue.includes(nextStaticPart)) {
+        const fieldEndIndex = remainingValue.indexOf(nextStaticPart)
+        const fieldValue = remainingValue.substring(0, fieldEndIndex)
+
+        // 更新字段内容
+        if (fieldValue) {
+          editableParts.value[i].content = fieldValue
+
+          // 如果当前字段是激活状态，更新DOM内容，但不改变光标位置
+          if (activeFieldIndex.value === i && editableRefs.value[i]) {
+            // 使用MutationObserver来禁用临时
+            isUserEditing.value = true
+            // 不要直接设置textContent，避免干扰用户输入
+          }
+        }
+
+        // 移除已处理的部分
+        remainingValue = remainingValue.substring(fieldEndIndex)
+      } else if (!nextStaticPart && remainingValue) {
+        // 如果是最后一个字段，则剩余的全部是它的值
+        editableParts.value[i].content = remainingValue
+        remainingValue = ''
+      }
+    }
+  }
+
+  // 更新内容状态
+  checkHasContent(value)
 }
 
 // 生成完整的文本值
 const generateValue = (): string => {
-  return templateParts.value.map((part) => part.content).join('')
+  return editableParts.value.map((part) => part.content).join('')
 }
 
 // 更新值并触发事件
 const updateValue = (): void => {
+  isInternalUpdate.value = true
   const newValue = generateValue()
   emit('update:value', newValue)
   emit('input', newValue)
+  checkHasContent(newValue)
+
+  // 延迟重置标志，防止循环更新
+  setTimeout(() => {
+    isInternalUpdate.value = false
+  }, 0)
+}
+
+// 检查是否有内容
+const checkHasContent = (value?: string): void => {
+  const contentValue = value || generateValue()
+  const newHasContent = contentValue.trim().length > 0
+
+  if (hasContent.value !== newHasContent) {
+    hasContent.value = newHasContent
+    emit('content-status', newHasContent)
+  }
+}
+
+// 注册可编辑元素引用
+const registerEditableRef = (el: HTMLSpanElement | null, index: number): void => {
+  if (el) {
+    // 保存引用
+    editableRefs.value[index] = el
+
+    // 设置初始内容 (只在初始时设置，后续由用户输入控制)
+    if (!el.textContent) {
+      el.textContent = editableParts.value[index].content
+    }
+
+    // 使用MutationObserver监听内容变化，但避免循环更新
+    const observer = new MutationObserver(() => {
+      if (activeFieldIndex.value === index && !isUserEditing.value) {
+        isUserEditing.value = true
+
+        // 延迟更新模型，避免与Vue渲染循环冲突
+        setTimeout(() => {
+          editableParts.value[index].content = el.textContent !== null ? el.textContent : ''
+          isUserEditing.value = false
+        }, 0)
+      }
+    })
+
+    observer.observe(el, {
+      characterData: true,
+      childList: true,
+      subtree: true,
+    })
+  }
+}
+
+// 处理内容输入事件
+const handleContentInput = (event: Event, index: number): void => {
+  isUserEditing.value = true
+
+  // 获取当前输入内容
+  const target = event.target as HTMLElement
+  const content = target.textContent !== null ? target.textContent : ''
+
+  // 更新模型，但不触发DOM更新
+  if (editableParts.value[index].content !== content) {
+    editableParts.value[index].content = content
+    updateValue()
+  }
+
+  // 通过延时重置标志，防止与MutationObserver冲突
+  setTimeout(() => {
+    isUserEditing.value = false
+  }, 10)
+}
+
+// 将光标放到元素内容末尾
+const placeCaretAtEnd = (el: HTMLElement): void => {
+  if (document.createRange) {
+    const range = document.createRange()
+    range.selectNodeContents(el)
+    // false表示光标放到末尾
+    range.collapse(false)
+
+    const selection = window.getSelection()
+    if (selection) {
+      selection.removeAllRanges()
+      selection.addRange(range)
+    }
+  }
 }
 
 // 激活输入块
 const activateField = (index: number): void => {
+  // 如果点击的就是当前激活的字段，不做任何处理
+  if (activeFieldIndex.value === index) {
+    return
+  }
+
+  // 如果当前已有激活的字段，先保存它的值
+  if (activeFieldIndex.value !== -1) {
+    const currentIndex = activeFieldIndex.value
+    const el = editableRefs.value[currentIndex]
+    if (el) {
+      editableParts.value[currentIndex].content = el.textContent !== null ? el.textContent : ''
+      updateValue()
+    }
+  }
+
+  // 设置激活状态
   activeFieldIndex.value = index
+  emit('field-active', true, index)
 
   // 确保DOM更新后再聚焦
   nextTick(() => {
-    if (inputRefs.value[index]) {
-      inputRefs.value[index]?.focus()
+    const el = editableRefs.value[index]
+    if (el) {
+      // 先获取焦点
+      el.focus()
+
+      // 确保元素有内容以便放置光标
+      if (!el.textContent && editableParts.value[index].content) {
+        el.textContent = editableParts.value[index].content
+      }
+
+      // 将光标放到末尾
+      placeCaretAtEnd(el)
     }
   })
 }
 
 // 取消激活输入块
 const deactivateField = (): void => {
+  const currentIndex = activeFieldIndex.value
+  if (currentIndex >= 0) {
+    // 更新当前编辑的内容
+    const el = editableRefs.value[currentIndex]
+    if (el) {
+      // 使用实际内容，不回退到占位符
+      const content = el.textContent !== null ? el.textContent : ''
+      editableParts.value[currentIndex].content = content
+    }
+
+    emit('field-active', false, currentIndex)
+  }
+
   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') {
+const handleInputKeyDown = (event: KeyboardEvent): void => {
+  // 只处理Enter键
+  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) => {
-    // 如果外部值为空字符串，清空所有字段内容
+    // 如果外部值为空字符串，重置为默认placeholder值
     if (newValue === '') {
-      resetFields()
+      resetToDefaultValues()
+    } else if (newValue && !isInternalUpdate.value) {
+      // 如果新值不为空，并且不是内部更新触发的，更新各部分内容
+      updatePartsFromValue(newValue)
     }
   },
 )
 
-// 重置所有字段内容
-const resetFields = (): void => {
-  // 清空所有输入块内容
-  templateParts.value.forEach((part) => {
+// 监听模板变化
+watch(
+  () => props.template,
+  () => {
+    // 当模板变化时，重新初始化
+    initializeEditableParts()
+    // 检查内容状态
+    nextTick(() => {
+      checkHasContent()
+    })
+  },
+  { immediate: true },
+)
+
+// 重置所有字段内容为默认值
+const resetToDefaultValues = (): void => {
+  editableParts.value.forEach((part) => {
     if (part.isField) {
-      part.content = ''
+      part.content = part.placeholder || ''
     }
   })
   // 更新值
   updateValue()
 }
 
+// 重置所有字段内容
+const resetFields = (): void => {
+  resetToDefaultValues()
+}
+
+// 组件挂载时
+onMounted(() => {
+  // 初始化内容状态
+  checkHasContent()
+})
+
 // 导出方法供父组件调用
 defineExpose<TemplateEditorExpose>({
   activateFirstField: () => {
-    for (let i = 0; i < templateParts.value.length; i++) {
-      if (templateParts.value[i].isField) {
+    for (let i = 0; i < editableParts.value.length; i++) {
+      if (editableParts.value[i].isField) {
         activateField(i)
         break
       }
@@ -195,7 +385,7 @@ defineExpose<TemplateEditorExpose>({
 <template>
   <div class="template-editor">
     <div class="template-content" ref="editorRef">
-      <template v-for="(part, index) in templateParts" :key="index">
+      <template v-for="(part, index) in editableParts" :key="index">
         <!-- 普通文本部分 -->
         <span v-if="!part.isField">{{ part.content }}</span>
 
@@ -206,23 +396,26 @@ defineExpose<TemplateEditorExpose>({
           :class="{ 'template-field-active': activeFieldIndex === index }"
           @click="activateField(index)"
         >
-          <input
+          <!-- 编辑状态显示 -->
+          <span
             v-if="activeFieldIndex === index"
-            :ref="(el) => (inputRefs[index] = el)"
-            v-model="part.content"
-            class="template-input"
+            :ref="(el) => registerEditableRef(el as HTMLSpanElement, index)"
+            class="template-editable"
+            contenteditable="true"
+            @input="handleContentInput($event, index)"
             @blur="deactivateField()"
-            @keydown="handleInputKeyDown($event, index)"
+            @keydown="handleInputKeyDown($event)"
             @click.stop
-          />
-          <span v-else class="template-placeholder">{{ part.content || part.placeholder }}</span>
+          ></span>
+          <!-- 非编辑状态显示 -->
+          <span v-else class="template-placeholder">{{ part.content }}</span>
         </span>
       </template>
     </div>
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 .template-editor {
   width: 100%;
   min-height: 26px;
@@ -245,30 +438,28 @@ defineExpose<TemplateEditorExpose>({
   vertical-align: middle;
   cursor: text;
   transition: all 0.2s ease;
-}
 
-.template-field:hover {
-  background: rgba(0, 0, 0, 0.08);
-}
+  &-active {
+    background-color: #ffffff;
+    border: 1px solid rgba(194, 194, 194);
+    border-radius: 4px;
+  }
 
-.template-placeholder {
-  color: #666;
-  user-select: none;
+  .template-placeholder {
+    color: #333;
+    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;
+.template-editable {
+  display: inline-block;
+  min-width: 1px; // 防止编辑框过窄
   outline: none;
-  background: white;
-}
+  white-space: nowrap;
+  color: #333;
 
-.template-field-active {
-  background: transparent;
-  padding: 0;
+  &:focus {
+    outline: none;
+  }
 }
 </style>

package/dist/bubble/components/actions/copy.vue.d.ts

@@ -1,10 +0,0 @@
-import { BubbleProps } from '../../index.type';
-type __VLS_Props = {
-    bubbleItem: BubbleProps;
-};
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    click: (...args: any[]) => void;
-}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClick?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
-export default _default;

package/dist/bubble/components/actions/index.d.ts

@@ -1,2 +0,0 @@
-export { default as CopyAction } from './copy.vue';
-export { default as RefreshAction } from './refresh.vue';

package/dist/bubble/components/actions/refresh.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLButtonElement>;
-export default _default;

package/dist/bubble/useScroll.d.ts

@@ -1,4 +0,0 @@
-import { Ref } from 'vue';
-export declare const useElementScroll: (elemRef: Ref<HTMLElement | null | undefined>) => {
-    scrollToBottom: () => void;
-};

package/dist/packages/components/src/bubble/bubble-list.vue.js

@@ -1,7 +0,0 @@
-import o from "./bubble-list.vue2.js";
-/* empty css                 */
-import t from "../../../../_virtual/_plugin-vue_export-helper.js";
-const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-5d3d74c8"]]);
-export {
-  s as default
-};

package/dist/packages/components/src/bubble/bubble-list.vue2.js

@@ -1,37 +0,0 @@
-import { defineComponent as i, ref as p, computed as b, watch as d, createElementBlock as n, openBlock as r, Fragment as _, renderList as B, createBlock as g, mergeProps as C } from "vue";
-import k from "./bubble.vue.js";
-import { useElementScroll as h } from "./useScroll.js";
-const x = /* @__PURE__ */ i({
-  __name: "bubble-list",
-  props: {
-    items: {},
-    roles: {},
-    autoScroll: { type: Boolean }
-  },
-  setup(s) {
-    const t = s, l = p(), { scrollToBottom: c } = h(l), u = b(() => t.items.at(-1));
-    d([() => t.items.length, () => {
-      var e;
-      return (e = u.value) == null ? void 0 : e.content;
-    }], () => {
-      t.autoScroll && c();
-    });
-    const a = (e) => {
-      var o;
-      return { ...e.role ? ((o = t.roles) == null ? void 0 : o[e.role]) || {} : {}, ...e };
-    };
-    return (e, m) => (r(), n("div", {
-      class: "tr-bubble-list",
-      ref_key: "scrollContainer",
-      ref: l
-    }, [
-      (r(!0), n(_, null, B(t.items, (o, f) => (r(), g(k, C({
-        key: o.id || f,
-        ref_for: !0
-      }, a(o)), null, 16))), 128))
-    ], 512));
-  }
-});
-export {
-  x as default
-};

package/dist/packages/components/src/bubble/bubble.vue.js

@@ -1,7 +0,0 @@
-import o from "./bubble.vue2.js";
-/* empty css            */
-import t from "../../../../_virtual/_plugin-vue_export-helper.js";
-const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-f7db2e1c"]]);
-export {
-  e as default
-};