feat: Support Sup referencing tags (#4925)

Author: shaohuzhang1

ui/src/App.vue

@@ -1,5 +1,8 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import PopoverManager from '@/components/popover-manager/index.vue'
+</script>
 
 <template>
   <RouterView />
+  <PopoverManager></PopoverManager>
 </template>

ui/src/chat.ts

@@ -57,6 +57,7 @@ config({
                 video: ['src', 'controls', 'width', 'height', 'preload', 'playsinline'],
                 source: ['src', 'type'],
                 input: ['class', 'disabled', 'type', 'checked'],
+                sup: ['data-title'],
                 iframe: [
                   'class',
                   'width',

ui/src/components/popover-manager/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <ElPopover
+    ref="popoverRef"
+    :virtual-ref="currentTarget"
+    virtual-triggering
+    placement="top"
+    :width="240"
+    :show-after="0"
+    :hide-after="80"
+    trigger="hover"
+  >
+    <!-- 富文本内容，data-title 支持 HTML -->
+    <div v-html="currentContent" class="sup-popover__content" />
+  </ElPopover>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { ElPopover } from 'element-plus'
+
+const popoverRef = ref<any>()
+const currentTarget = ref<any>()
+const currentContent = ref<any>('')
+let hideTimer: any = null
+let lastSup: any = null
+
+function onMouseOver(e: any) {
+  const sup = e.target.closest('sup[data-title]')
+  if (!sup || sup === lastSup) return
+
+  clearTimeout(hideTimer)
+  lastSup = sup
+  currentContent.value = sup.dataset.title
+  currentTarget.value = sup
+  popoverRef.value?.onOpen?.()
+}
+
+function onMouseOut(e: any) {
+  const sup = e.target.closest('sup[data-title]')
+  if (!sup) return
+
+  hideTimer = setTimeout(() => {
+    popoverRef.value?.onClose?.()
+    lastSup = null
+  }, 80)
+}
+
+onMounted(() => {
+  document.addEventListener('mouseover', onMouseOver)
+  document.addEventListener('mouseout', onMouseOut)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mouseover', onMouseOver)
+  document.removeEventListener('mouseout', onMouseOut)
+  clearTimeout(hideTimer)
+})
+</script>

ui/src/main.ts

@@ -57,6 +57,7 @@ config({
                 video: ['src', 'controls', 'width', 'height', 'preload', 'playsinline'],
                 source: ['src', 'type'],
                 input: ['class', 'disabled', 'type', 'checked'],
+                sup: ['data-title'],
                 iframe: [
                   'class',
                   'width',

ui/src/styles/md-editor.scss

@@ -29,6 +29,26 @@
   ul {
     list-style: circle;
   }
+  sup[data-title] {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: super;
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 1;
+    padding: 2px 4px;
+    border-radius: 4px;
+    background-color: var(--el-color-primary-light-9);
+    color: var(--el-color-primary);
+    border: 1px solid var(--el-color-primary-light-7);
+    cursor: default;
+    white-space: nowrap;
+    letter-spacing: 0.02em;
+    transition:
+      background-color 0.15s,
+      color 0.15s;
+    cursor: pointer;
+  }
 }
 
 @media only screen and (max-width: 768px) {