cd-aichat 1.0.0

package/src/components/RichTextEditor.vue

@@ -0,0 +1,437 @@
+<template>
+  <div class="rich-text-editor">
+    <editor-content :editor="editor" class="editor-content" />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, watch, onMounted, onBeforeUnmount } from 'vue';
+import { useEditor, EditorContent } from '@tiptap/vue-3';
+import StarterKit from '@tiptap/starter-kit';
+import Image from '@tiptap/extension-image';
+import Link from '@tiptap/extension-link';
+import Placeholder from '@tiptap/extension-placeholder';
+import Mention from '@tiptap/extension-mention';
+import { VueRenderer } from '@tiptap/vue-3';
+import tippy from 'tippy.js';
+import 'tippy.js/dist/tippy.css';
+import MentionList from './MentionList.vue';
+import ResourceList from './ResourceList.vue';
+
+export default defineComponent({
+  name: 'RichTextEditor',
+  components: {
+    EditorContent,
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: '输入消息...'
+    },
+    members: {
+      type: Array,
+      default: () => []
+    },
+    resources: {
+      type: Array,
+      default: () => []
+    },
+    chatType: {
+      type: String,
+      default: 'ai'
+    }
+  },
+  emits: ['update:modelValue', 'submit', 'openPersonSelector', 'openResourceSelector'],
+  setup(props, { emit }) {
+    const editorDom = ref(null);
+
+    const editor = useEditor({
+      content: props.modelValue,
+      extensions: [
+        StarterKit.configure({
+          heading: false,
+          codeBlock: false,
+          horizontalRule: false,
+          blockquote: false,
+        }),
+        Placeholder.configure({
+          placeholder: props.placeholder,
+        }),
+        Image.configure({
+          inline: true,
+          allowBase64: true,
+        }),
+        Link.extend({
+          inclusive: false,
+        }).configure({
+          openOnClick: false,
+          HTMLAttributes: {
+            target: '_blank',
+            rel: 'noopener noreferrer',
+          },
+        }),
+        // @ 提及人员
+        Mention.configure({
+          HTMLAttributes: {
+            class: 'mention',
+          },
+          suggestion: {
+            items: ({ query }) => {
+              // AI聊天模式：不显示成员列表，触发打开人员选择器
+              if (props.chatType === 'ai') {
+                return [];
+              }
+
+              // 群聊模式：显示过滤后的成员列表
+              return props.members
+                .filter(member =>
+                  member.name.toLowerCase().includes(query.toLowerCase()) ||
+                  (member.account && member.account.toLowerCase().includes(query.toLowerCase()))
+                )
+                .slice(0, 8);
+            },
+            render: () => {
+              let component;
+              let popup;
+
+              return {
+                onStart: (suggestionProps) => {
+                  // AI聊天模式：触发打开"选择人员"对话框（用于分享）
+                  if (props.chatType === 'ai') {
+                    emit('openPersonSelector');
+                    return;
+                  }
+
+                  // 群聊模式：显示成员列表
+                  component = new VueRenderer(MentionList, {
+                    props: suggestionProps,
+                    editor: suggestionProps.editor,
+                  });
+
+                  if (!suggestionProps.clientRect) {
+                    return;
+                  }
+
+                  popup = tippy('body', {
+                    getReferenceClientRect: suggestionProps.clientRect,
+                    appendTo: () => document.body,
+                    content: component.element,
+                    showOnCreate: true,
+                    interactive: true,
+                    trigger: 'manual',
+                    placement: 'top-start',
+                    zIndex: 99999,
+                  });
+                },
+                onUpdate(suggestionProps) {
+                  if (!component) return;
+
+                  component.updateProps(suggestionProps);
+
+                  if (!suggestionProps.clientRect) {
+                    return;
+                  }
+
+                  if (popup && popup[0]) {
+                    popup[0].setProps({
+                      getReferenceClientRect: suggestionProps.clientRect,
+                    });
+                  }
+                },
+                onKeyDown(suggestionProps) {
+                  if (suggestionProps.event.key === 'Escape') {
+                    if (popup && popup[0]) {
+                      popup[0].hide();
+                    }
+                    return true;
+                  }
+
+                  return component?.ref?.onKeyDown(suggestionProps);
+                },
+                onExit() {
+                  if (popup && popup[0]) {
+                    popup[0].destroy();
+                  }
+                  if (component) {
+                    component.destroy();
+                  }
+                },
+              };
+            },
+          },
+        }),
+        // # 引用资源
+        Mention.extend({
+          name: 'hashtag',
+        }).configure({
+          HTMLAttributes: {
+            class: 'hashtag',
+          },
+          suggestion: {
+            char: '#',
+            items: ({ query }) => {
+              // AI聊天模式：不显示资源列表，触发打开资源选择器
+              if (props.chatType === 'ai') {
+                return [];
+              }
+
+              // 显示过滤后的资源列表
+              return props.resources
+                .filter(resource =>
+                  resource.name.toLowerCase().includes(query.toLowerCase()) ||
+                  (resource.code && resource.code.toLowerCase().includes(query.toLowerCase()))
+                )
+                .slice(0, 8);
+            },
+            render: () => {
+              let component;
+              let popup;
+
+              return {
+                onStart: (suggestionProps) => {
+                  // AI聊天模式：触发打开资源选择器
+                  if (props.chatType === 'ai') {
+                    emit('openResourceSelector');
+                    return;
+                  }
+
+                  // 显示资源列表
+                  component = new VueRenderer(ResourceList, {
+                    props: suggestionProps,
+                    editor: suggestionProps.editor,
+                  });
+
+                  if (!suggestionProps.clientRect) {
+                    return;
+                  }
+
+                  popup = tippy('body', {
+                    getReferenceClientRect: suggestionProps.clientRect,
+                    appendTo: () => document.body,
+                    content: component.element,
+                    showOnCreate: true,
+                    interactive: true,
+                    trigger: 'manual',
+                    placement: 'top-start',
+                    zIndex: 99999,
+                  });
+                },
+                onUpdate(suggestionProps) {
+                  if (!component) return;
+
+                  component.updateProps(suggestionProps);
+
+                  if (!suggestionProps.clientRect) {
+                    return;
+                  }
+
+                  if (popup && popup[0]) {
+                    popup[0].setProps({
+                      getReferenceClientRect: suggestionProps.clientRect,
+                    });
+                  }
+                },
+                onKeyDown(suggestionProps) {
+                  if (suggestionProps.event.key === 'Escape') {
+                    if (popup && popup[0]) {
+                      popup[0].hide();
+                    }
+                    return true;
+                  }
+
+                  return component?.ref?.onKeyDown(suggestionProps);
+                },
+                onExit() {
+                  if (popup && popup[0]) {
+                    popup[0].destroy();
+                  }
+                  if (component) {
+                    component.destroy();
+                  }
+                },
+              };
+            },
+          },
+        }),
+      ],
+      editorProps: {
+        handlePaste: (view, event) => {
+          // 处理图片粘贴
+          const items = Array.from(event.clipboardData?.items || []);
+          const imageItem = items.find(item => item.type.indexOf('image') !== -1);
+
+          if (imageItem) {
+            event.preventDefault();
+            const file = imageItem.getAsFile();
+            if (file) {
+              const reader = new FileReader();
+              reader.onload = (e) => {
+                editor.value?.chain().focus().setImage({ src: e.target?.result }).run();
+              };
+              reader.readAsDataURL(file);
+            }
+            return true;
+          }
+
+          return false;
+        },
+        handleDrop: (view, event) => {
+          // 处理图片拖放
+          const hasFiles = event.dataTransfer?.files?.length;
+
+          if (!hasFiles) {
+            return false;
+          }
+
+          const images = Array.from(event.dataTransfer.files).filter(file =>
+            /image/i.test(file.type)
+          );
+
+          if (images.length === 0) {
+            return false;
+          }
+
+          event.preventDefault();
+
+          images.forEach(image => {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+              editor.value?.chain().focus().setImage({ src: e.target?.result }).run();
+            };
+            reader.readAsDataURL(image);
+          });
+
+          return true;
+        },
+      },
+      onUpdate: ({ editor }) => {
+        emit('update:modelValue', editor.getHTML());
+      },
+    });
+
+    // 监听外部值变化
+    watch(() => props.modelValue, (value) => {
+      const isSame = editor.value?.getHTML() === value;
+      if (!isSame && editor.value) {
+        editor.value.commands.setContent(value, false);
+      }
+    });
+
+    // Enter 键提交
+    const handleKeyDown = (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        emit('submit');
+      }
+    };
+
+    onMounted(() => {
+      if (editor.value?.view?.dom) {
+        editorDom.value = editor.value.view.dom;
+        editorDom.value.addEventListener('keydown', handleKeyDown);
+      }
+    });
+
+    onBeforeUnmount(() => {
+      if (editorDom.value) {
+        editorDom.value.removeEventListener('keydown', handleKeyDown);
+      }
+      if (editor.value) {
+        editor.value.destroy();
+      }
+    });
+
+    // 暴露方法
+    const focus = () => {
+      editor.value?.commands.focus();
+    };
+
+    const clear = () => {
+      editor.value?.commands.clearContent();
+    };
+
+    return {
+      editor,
+      focus,
+      clear,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.rich-text-editor {
+  width: 100%;
+  border: 1px solid #dcdcdc;
+  border-radius: 4px;
+  background: white;
+}
+
+.editor-content {
+  min-height: 60px;
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+:deep(.ProseMirror) {
+  outline: none;
+  min-height: 60px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+:deep(.ProseMirror p.is-editor-empty:first-child::before) {
+  color: #adb5bd;
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+:deep(.mention) {
+  background-color: #e3f2fd;
+  border-radius: 4px;
+  padding: 2px 6px;
+  color: #1976d2;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+:deep(.mention:hover) {
+  background-color: #bbdefb;
+}
+
+:deep(.hashtag) {
+  background-color: #fff3e0;
+  border-radius: 4px;
+  padding: 2px 6px;
+  color: #e65100;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+:deep(.hashtag:hover) {
+  background-color: #ffe0b2;
+}
+
+:deep(img) {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+  margin: 4px 0;
+}
+
+:deep(a) {
+  color: #1890ff;
+  text-decoration: none;
+}
+
+:deep(a:hover) {
+  text-decoration: underline;
+}
+</style>