fix:remote ElPopover

src/main.ts

@@ -12,7 +12,6 @@ const pinia = createPinia()
 const app = createApp(App)
 
 app.use(VueVirtualScroller)
-// app.use(ElementPlus)
 app.use(pinia)
 app.use(router)
 

src/pages/pc/article/components/EditArticle.vue

@@ -9,7 +9,7 @@ import {genArticleSectionData, splitCNArticle2, splitEnArticle2, usePlaySentence
 import {_nextTick, _parseLRC, cloneDeep, last} from "@/utils";
 import {watch} from "vue";
 import Empty from "@/components/Empty.vue";
-import {ElInputNumber, ElOption, ElPopover, ElSelect} from "element-plus";
+import {ElInputNumber} from "element-plus";
 import Toast from '@/pages/pc/components/base/toast/Toast.ts'
 import * as Comparison from "string-comparison"
 import BaseIcon from "@/components/BaseIcon.vue";
@@ -17,6 +17,7 @@ import Dialog from "@/pages/pc/components/dialog/Dialog.vue";
 import {getDefaultArticle} from "@/types/func.ts";
 import copy from "copy-to-clipboard";
 import {Option, Select} from "@/pages/pc/components/base/select";
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
 
 interface IProps {
   article?: Article,
@@ -293,25 +294,23 @@ function setStartTime(val: Sentence, i: number, j: number) {
       >
             </textarea>
       <div class="justify-end items-center flex">
-        <ElPopover
-            class="box-item"
-            title="使用方法"
-            placement="top"
-            :width="400"
-        >
-          <ol class="py-0 pl-5 my-0 text-base color-main">
-            <li>复制原文，然后分句</li>
-            <li>点击 <span class="color-red font-bold">分句</span> 按钮进行自动分句<span
-                class="color-red font-bold"> 或</span> 手动编辑分句
-            </li>
-            <li>分句规则：一行一句，段落间空一行</li>
-            <li>修改完成后点击 <span class="color-red font-bold">应用</span> 按钮同步到左侧结果栏
-            </li>
-          </ol>
+        <Tooltip>
+          <Icon icon="ri:question-line" class="mr-3" width="20"/>
           <template #reference>
-            <Icon icon="ri:question-line" class="mr-3" width="20"/>
+            <div>
+              <div class="mb-2">使用方法</div>
+              <ol class="py-0 pl-5 my-0 text-base color-main">
+                <li>复制原文，然后分句</li>
+                <li>点击 <span class="color-red font-bold">分句</span> 按钮进行自动分句<span
+                    class="color-red font-bold"> 或</span> 手动编辑分句
+                </li>
+                <li>分句规则：一行一句，段落间空一行</li>
+                <li>修改完成后点击 <span class="color-red font-bold">应用</span> 按钮同步到左侧结果栏
+                </li>
+              </ol>
+            </div>
           </template>
-        </ElPopover>
+        </Tooltip>
         <BaseButton @click="splitText">分句</BaseButton>
         <BaseButton @click="apply()">应用</BaseButton>
       </div>
@@ -357,25 +356,24 @@ function setStartTime(val: Sentence, i: number, j: number) {
           {{ progress }}%
         </div>
         <div class="flex items-center">
-          <ElPopover
-              class="box-item"
-              title="使用方法"
-              placement="top"
-              :width="400"
-          >
-            <ol class="py-0 pl-5 my-0 text-base color-black/60">
-              <li>复制译文，如果没有请点击 <span class="color-red font-bold">翻译</span> 按钮</li>
-              <li>点击 <span class="color-red font-bold">分句</span> 按钮进行自动分句<span class="color-red font-bold"> 或</span>
-                手动编辑分句
-              </li>
-              <li>分句规则：一行一句，段落间空一行</li>
-              <li>修改完成后点击 <span class="color-red font-bold">应用</span> 按钮同步到左侧结果栏
-              </li>
-            </ol>
+          <Tooltip>
+            <Icon icon="ri:question-line" class="mr-3" width="20"/>
             <template #reference>
-              <Icon icon="ri:question-line" class="mr-3" width="20"/>
+              <div>
+                <div class="mb-2">使用方法</div>
+                <ol class="py-0 pl-5 my-0 text-base color-black/60">
+                  <li>复制译文，如果没有请点击 <span class="color-red font-bold">翻译</span> 按钮</li>
+                  <li>点击 <span class="color-red font-bold">分句</span> 按钮进行自动分句<span
+                      class="color-red font-bold"> 或</span>
+                    手动编辑分句
+                  </li>
+                  <li>分句规则：一行一句，段落间空一行</li>
+                  <li>修改完成后点击 <span class="color-red font-bold">应用</span> 按钮同步到左侧结果栏
+                  </li>
+                </ol>
+              </div>
             </template>
-          </ElPopover>
+          </Tooltip>
           <BaseButton @click="splitTranslateText">分句</BaseButton>
           <BaseButton @click="apply(true)">应用</BaseButton>
         </div>

src/pages/pc/article/components/EditBook.vue

@@ -3,7 +3,7 @@
 import {Dict, DictId, DictType} from "@/types/types.ts";
 import {cloneDeep} from "@/utils";
 
-import {ElForm, ElFormItem, ElInput, FormInstance, FormRules} from "element-plus";
+import {ElForm, ElFormItem, FormInstance, FormRules} from "element-plus";
 import Toast from '@/pages/pc/components/base/toast/Toast.ts'
 import {onMounted, reactive} from "vue";
 import {useRuntimeStore} from "@/stores/runtime.ts";
@@ -11,7 +11,6 @@ import {useBaseStore} from "@/stores/base.ts";
 import BaseButton from "@/components/BaseButton.vue";
 import {getDefaultDict} from "@/types/func.ts";
 import {Option, Select} from "@/pages/pc/components/base/select";
-import Input from "@/pages/pc/components/Input.vue";
 import BaseInput from "@/pages/pc/components/base/BaseInput.vue";
 
 const props = defineProps<{

src/pages/pc/components/Tooltip.vue

@@ -29,7 +29,7 @@ export default {
   methods: {
     showPop(e) {
       if (this.disabled) return
-      if (!this.title) return
+      if (!this.title && !this.$slots?.reference) return;
       e.stopPropagation()
       let rect = e.target.getBoundingClientRect()
       this.show = true
@@ -49,21 +49,20 @@ export default {
     },
   },
   render() {
-    if (!this.title) return this.$slots.default()
-    let Vnode = this.$slots.default()[0]
+    let DefaultNode = this.$slots.default()[0]
+    let ReferenceNode = this.$slots?.reference?.()?.[0]
     return <>
-      <Teleport to="body">
-        <Transition name="fade">
-          {
-              this.show && (
-                  <div ref="tip" class="tip">
-                    {this.title}
-                  </div>
-              )
-          }
-        </Transition>
-      </Teleport>
-      <Vnode
+      <Transition name="fade">
+        <Teleport to="body">
+          {this.show && (
+              <div ref="tip" class="tip">
+                {ReferenceNode ? <ReferenceNode/> : this.title}
+              </div>
+          )}
+        </Teleport>
+      </Transition>
+
+      <DefaultNode
           onClick={() => this.show = false}
           onmouseenter={(e) => this.showPop(e)}
           onmouseleave={() => this.show = false}
@@ -75,13 +74,13 @@ export default {
 <style lang="scss" scoped>
 .tip {
   position: fixed;
-  font-size: 0.9rem;
+  font-size: 1rem;
   z-index: 9999;
   border-radius: .3rem;
   padding: 0.4rem .8rem;
   color: var(--color-font-1);
   background: var(--color-tooltip-bg);
-  //box-shadow: 1px 1px 6px #bbbbbb;
+  max-width: 22rem;
   box-shadow: 0 0 6px 1px var(--color-tooltip-shadow);
 }
 </style>

src/pages/pc/components/WordItem.vue

@@ -4,6 +4,7 @@ import {Word} from "@/types/types.ts";
 import VolumeIcon from "@/components/icon/VolumeIcon.vue";
 import {usePlayWordAudio} from "@/hooks/sound.ts";
 import {ElPopover} from 'element-plus'
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
 
 const props = withDefaults(defineProps<{
   item: Word,
@@ -36,16 +37,12 @@ const playWordAudio = usePlayWordAudio()
         </div>
         <div class="item-sub-title flex flex-col gap-2" v-if="item.trans.length && showTranslate">
           <div v-for="v in item.trans">
-            <ElPopover
+            <Tooltip
                 v-if="v.cn.length > 30 && showTransPop"
-                width="300"
-                :content="v.pos + '  ' + v.cn"
-                placement="top"
+                :title="v.pos + '  ' + v.cn"
             >
-              <template #reference>
-                <span>{{ v.pos + '  ' + v.cn.slice(0, 30) + '...' }}</span>
-              </template>
-            </ElPopover>
+              <span>{{ v.pos + '  ' + v.cn.slice(0, 30) + '...' }}</span>
+            </Tooltip>
             <span v-else>{{ v.pos + '  ' + v.cn }}</span>
           </div>
         </div>

src/pages/pc/components/list/WordList.vue

@@ -4,7 +4,7 @@ import {Word} from "@/types/types.ts";
 import VolumeIcon from "@/components/icon/VolumeIcon.vue";
 import BaseList from "@/pages/pc/components/list/BaseList.vue";
 import {usePlayWordAudio} from "@/hooks/sound.ts";
-import {ElPopover} from 'element-plus'
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
 
 const props = withDefaults(defineProps<{
   list: Word[],
@@ -54,16 +54,13 @@ defineExpose({scrollToBottom, scrollToItem})
       </div>
       <div class="item-sub-title flex flex-col gap-2" v-if="item.trans.length && showTranslate">
         <div v-for="v in item.trans">
-          <ElPopover
+          <Tooltip
               v-if="v.cn.length > 30"
-              width="300"
-              :content="v.pos + '  ' + v.cn"
-              placement="top"
+              :key="item.word"
+              :title="v.pos + '  ' + v.cn"
           >
-            <template #reference>
-              <span>{{ v.pos + '  ' + v.cn.slice(0, 30) + '...' }}</span>
-            </template>
-          </ElPopover>
+            <span>{{ v.pos + '  ' + v.cn.slice(0, 30) + '...' }}</span>
+          </Tooltip>
           <span v-else>{{ v.pos + '  ' + v.cn }}</span>
         </div>
       </div>