chore: 编辑器指令编辑优化

index.html

@@ -8,7 +8,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
-    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4711453_lz4oxe9et7.css" />
+    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4711453_6yk5447mfvj.css" />
     <link
       rel="preload"
       href="https://gsst-poe-sit.gz.bcebos.com/front/SourceHanSansCN-Medium.otf"

src/components/custom-editor/content-optimization-edit.vue

@@ -6,21 +6,25 @@ import type { Editor } from 'tinymce'
 import type { DropdownGroupOption, DropdownOption, NDropdown } from 'naive-ui'
 import type { VNode } from 'vue'
 import { useI18n } from 'vue-i18n'
+import MarkdownRender from '@/components/markdown-render/markdown-render.vue'
 
 interface Props {
   editor: Editor | null
-  isSetBottom: boolean
-  location: number
+  locationInfo: {
+    position: 'top' | 'middle' | 'bottom'
+    positionValue: string
+  }
 }
 
 const props = defineProps<Props>()
 
 const isShowModal = defineModel<boolean>('isShowModal', { required: true })
 
-const toneSelectRef = useTemplateRef<InstanceType<typeof NDropdown>>('toneSelectRef')
 const { t } = useI18n()
+const toneSelectRef = useTemplateRef<InstanceType<typeof NDropdown>>('toneSelectRef')
+const contentOptimizationEditMRRef = useTemplateRef<InstanceType<typeof MarkdownRender>>('contentOptimizationEditMRRef')
 
-const containerWrapperStyle = ref<{ top?: string; bottom?: string }>({})
+const containerWrapperStyle = ref<{ top?: string; bottom?: string; transform?: string }>({})
 const questionContent = ref('')
 
 const contentEditStatus = ref<'Normal' | 'Editing' | 'Response'>('Normal')
@@ -65,10 +69,12 @@ watch(questionContent, (newValue) => {
 })
 
 watchEffect(() => {
-  if (props.isSetBottom) {
-    containerWrapperStyle.value = { bottom: `${props.location}px`, top: 'unset' }
+  if (props.locationInfo.position === 'bottom') {
+    containerWrapperStyle.value = { bottom: props.locationInfo.positionValue, top: 'unset' }
+  } else if (props.locationInfo.position === 'top') {
+    containerWrapperStyle.value = { top: props.locationInfo.positionValue }
   } else {
-    containerWrapperStyle.value = { top: `${props.location}px` }
+    containerWrapperStyle.value = { top: props.locationInfo.positionValue, transform: 'translateY(-100%)' }
   }
 })
 
@@ -129,7 +135,9 @@ function handleAbbreviation() {
 
 function handleReplaceContent() {
   if (props.editor) {
-    props.editor.selection.setContent(editResponseContent.value)
+    props.editor.selection.setContent(
+      contentOptimizationEditMRRef.value?.getRenderTextContent() || editResponseContent.value,
+    )
 
     contentEditStatus.value = 'Normal'
   }
@@ -211,7 +219,9 @@ function toneSelectMenuRenderOption({ node, option }: { node: VNode; option: Dro
           <ul
             v-show="isShowEditSelectToolbar"
             class="absolute w-[142px] select-none overflow-hidden rounded-[5px] border border-[#9EA3FF] bg-white shadow-md"
-            :class="isSetBottom ? 'top-[6px] -translate-y-full' : 'bottom-[6px] translate-y-full'"
+            :class="
+              locationInfo.position === 'bottom' ? 'top-[6px] -translate-y-full' : 'bottom-[6px] translate-y-full'
+            "
           >
             <li
               class="flex h-[34px] cursor-pointer items-center px-[10px] transition-[background] duration-300 ease-linear hover:bg-[#eeeffe]"
@@ -242,7 +252,7 @@ function toneSelectMenuRenderOption({ node, option }: { node: VNode; option: Dro
               class="!ml-[2px] overflow-hidden border border-[#9EA3FF] bg-white !p-0 !shadow-md"
               content-style="padding: 0;"
               :options="toneList"
-              placement="right-start"
+              :placement="locationInfo.position === 'bottom' ? 'right-end' : 'right-start'"
               :render-option="toneSelectMenuRenderOption"
               @select="handleToneSelect"
             >
@@ -258,9 +268,21 @@ function toneSelectMenuRenderOption({ node, option }: { node: VNode; option: Dro
       </div>
     </div>
     <div v-else-if="contentEditStatus === 'Response'" class="absolute top-1/2 w-full -translate-y-1/2 px-[16px]">
-      <div class="rounded-[5px] border border-[#9EA3FF] bg-white px-[10px] py-[14px]">
+      <div class="rounded-[5px] border border-[#9EA3FF] bg-white py-[14px] pl-[10px]">
         <div class="text-[14px] leading-[18px]">
-          {{ editResponseContent }}
+          <n-scrollbar class="!max-h-[60vh]">
+            <div class="pr-[10px]">
+              <MarkdownRender
+                ref="contentOptimizationEditMRRef"
+                :raw-text-content="
+                  editResponseContent || editResponseLoading
+                    ? editResponseContent
+                    : t('common_module.dialogue_module.empty_message_content')
+                "
+                color="#333"
+              />
+            </div>
+          </n-scrollbar>
         </div>
 
         <Transition>
@@ -268,7 +290,10 @@ function toneSelectMenuRenderOption({ node, option }: { node: VNode; option: Dro
             <span>
               <template v-if="!editResponseContent">生成中...</template>
             </span>
-            <i class="iconfont icon-zanting cursor-pointer text-[18px]" @click="handleEditResponseBreak"></i>
+            <i
+              class="iconfont icon-tingzhi text-theme-color cursor-pointer text-[18px]"
+              @click="handleEditResponseBreak"
+            ></i>
           </div>
         </Transition>
 

src/components/custom-editor/custom-editor.vue

@@ -42,8 +42,13 @@ const isShowEditor = ref(false)
 
 const articleContentModifyContainerShow = ref(false)
 
-const contentOptimizationEditContainerIsSetBottom = ref(false)
-const contentOptimizationEditContainerLocation = ref(0)
+const contentOptimizationEditContainerLocationInfo = ref<{
+  position: 'top' | 'middle' | 'bottom'
+  positionValue: string
+}>({
+  position: 'top',
+  positionValue: '0px',
+})
 
 const editorContent = computed({
   get() {
@@ -127,12 +132,22 @@ onMounted(() => {
             const locationHeight = lastRect.bottom + 46 + 10
 
             if (editorWrapperRefHeight.value - 260 < locationHeight) {
-              contentOptimizationEditContainerIsSetBottom.value = true
-              contentOptimizationEditContainerLocation.value =
-                editorWrapperRefHeight.value - (rects[0].bottom + 46 + 10) + rects[0].height + 16
+              if (rects[0].top < 200) {
+                contentOptimizationEditContainerLocationInfo.value = {
+                  position: 'middle',
+                  positionValue: '50%',
+                }
+              } else {
+                contentOptimizationEditContainerLocationInfo.value = {
+                  position: 'bottom',
+                  positionValue: `${editorWrapperRefHeight.value - (rects[0].bottom + 46 + 10) + rects[0].height + 16}px`,
+                }
+              }
             } else {
-              contentOptimizationEditContainerIsSetBottom.value = false
-              contentOptimizationEditContainerLocation.value = locationHeight
+              contentOptimizationEditContainerLocationInfo.value = {
+                position: 'top',
+                positionValue: `${locationHeight}px`,
+              }
             }
           }
 
@@ -213,8 +228,7 @@ function onDownloadFile() {
     <ContentOptimizationEdit
       v-model:is-show-modal="articleContentModifyContainerShow"
       :editor="editor"
-      :is-set-bottom="contentOptimizationEditContainerIsSetBottom"
-      :location="contentOptimizationEditContainerLocation"
+      :location-info="contentOptimizationEditContainerLocationInfo"
     />
   </div>
   <div v-show="!isShowEditor" class="flex h-full w-full items-center justify-center">