feat: 🚀 富文本自定义tabs功能

package-lock.json

@@ -14,6 +14,7 @@
                 "@vueuse/core": "^10.1.2",
                 "@wangeditor/editor": "^5.1.23",
                 "@wangeditor/editor-for-vue": "^5.1.12",
+                "@zhj-target/vue3-kind-editor": "^0.1.3",
                 "async-validator": "^4.2.5",
                 "axios": "^1.4.0",
                 "bwip-js": "^4.3.2",
@@ -3896,6 +3897,11 @@
                 "snabbdom": "^3.1.0"
             }
         },
+        "node_modules/@zhj-target/vue3-kind-editor": {
+            "version": "0.1.3",
+            "resolved": "https://registry.npmmirror.com/@zhj-target/vue3-kind-editor/-/vue3-kind-editor-0.1.3.tgz",
+            "integrity": "sha512-tzSutZUBmGBRFBW8UMu2w5qmFMzp0RbaER8YQnMytq3COc04BHETiQkMOQ2PCHkrUXitzjBOWNSquW/AibizQA=="
+        },
         "node_modules/acorn": {
             "version": "8.8.2",
             "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.8.2.tgz",
@@ -17949,6 +17955,11 @@
             "integrity": "sha512-ZdodDPqKQrgx3IwWu4ZiQmXI8EXZ3hm2/fM6E3t5dB8tCaIGWQZhmqd6P5knfkRAd3z2+YRSRbxOGfoRSp/rLg==",
             "requires": {}
         },
+        "@zhj-target/vue3-kind-editor": {
+            "version": "0.1.3",
+            "resolved": "https://registry.npmmirror.com/@zhj-target/vue3-kind-editor/-/vue3-kind-editor-0.1.3.tgz",
+            "integrity": "sha512-tzSutZUBmGBRFBW8UMu2w5qmFMzp0RbaER8YQnMytq3COc04BHETiQkMOQ2PCHkrUXitzjBOWNSquW/AibizQA=="
+        },
         "acorn": {
             "version": "8.8.2",
             "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.8.2.tgz",

package.json

@@ -26,6 +26,7 @@
         "@vueuse/core": "^10.1.2",
         "@wangeditor/editor": "^5.1.23",
         "@wangeditor/editor-for-vue": "^5.1.12",
+        "@zhj-target/vue3-kind-editor": "^0.1.3",
         "async-validator": "^4.2.5",
         "axios": "^1.4.0",
         "bwip-js": "^4.3.2",

src/api/index.ts

@@ -71,16 +71,25 @@ class RequestHttp {
          */
         this.service.interceptors.response.use(
             (response: AxiosResponse) => {
-                const { data } = response;
+                const { data, request } = response;
+
                 tryHideFullScreenLoading();
+                const imgId = request?.responseURL?.split("imgId=")[1];
                 //获取导出表格名称
                 getDispositionName(response);
                 // 获取响应头中的 Authorization 信息
                 const authorization = response.headers["authorization"];
+                if (imgId) {
+                    return {
+                        imgId,
+                        data
+                    };
+                }
                 if (authorization) {
                     // 可以在这里更新用户的 token 信息
                     const userStore = useUserStore();
                     userStore.setToken(authorization);
+                    console.log("123232323");
                     return data;
                 }
 

src/api/modules/articleClass.ts

@@ -19,7 +19,7 @@ export const getArticleClassDelApi = (params: any) => {
 };
 //文章分类更新(用于编辑后)
 export const getArticleClassEditUpApi = (params: any) => {
-    const { id, name, sort, is_show, pid, seo_title, seo_keywords, seo_desc } = params;
+    const { id, name, sort, is_show, pid, seo_title, seo_keywords, seo_desc, icon } = params;
 
     return http.put<any>(`/article/category/update/${id}`, {
         name,
@@ -28,7 +28,8 @@ export const getArticleClassEditUpApi = (params: any) => {
         pid,
         seo_title,
         seo_keywords,
-        seo_desc
+        seo_desc,
+        icon
     });
 };
 //文章分类详情(用于编辑)

src/api/modules/upload.ts

@@ -11,8 +11,8 @@ import http from "@/api";
  * @name 文件上传模块
  */
 // 图片上传
-export const uploadImg = (params: any, name?: any) => {
+export const uploadImg = (params: any, name?: any, id?: any) => {
-    return http.post<any>(`/images/${name}/upload`, params);
+    return http.post<any>(`/images/${name}/upload?imgId=${id}`, params);
 };
 
 // 视频上传

src/auto-import.d.ts

@@ -4,67 +4,66 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const EffectScope: typeof import('vue')['EffectScope']
+    const EffectScope: typeof import("vue")["EffectScope"];
-  const ElNotification: typeof import('element-plus/es')['ElNotification']
+    const computed: typeof import("vue")["computed"];
-  const computed: typeof import('vue')['computed']
+    const createApp: typeof import("vue")["createApp"];
-  const createApp: typeof import('vue')['createApp']
+    const customRef: typeof import("vue")["customRef"];
-  const customRef: typeof import('vue')['customRef']
+    const defineAsyncComponent: typeof import("vue")["defineAsyncComponent"];
-  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+    const defineComponent: typeof import("vue")["defineComponent"];
-  const defineComponent: typeof import('vue')['defineComponent']
+    const effectScope: typeof import("vue")["effectScope"];
-  const effectScope: typeof import('vue')['effectScope']
+    const getCurrentInstance: typeof import("vue")["getCurrentInstance"];
-  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+    const getCurrentScope: typeof import("vue")["getCurrentScope"];
-  const getCurrentScope: typeof import('vue')['getCurrentScope']
+    const h: typeof import("vue")["h"];
-  const h: typeof import('vue')['h']
+    const inject: typeof import("vue")["inject"];
-  const inject: typeof import('vue')['inject']
+    const isProxy: typeof import("vue")["isProxy"];
-  const isProxy: typeof import('vue')['isProxy']
+    const isReactive: typeof import("vue")["isReactive"];
-  const isReactive: typeof import('vue')['isReactive']
+    const isReadonly: typeof import("vue")["isReadonly"];
-  const isReadonly: typeof import('vue')['isReadonly']
+    const isRef: typeof import("vue")["isRef"];
-  const isRef: typeof import('vue')['isRef']
+    const markRaw: typeof import("vue")["markRaw"];
-  const markRaw: typeof import('vue')['markRaw']
+    const nextTick: typeof import("vue")["nextTick"];
-  const nextTick: typeof import('vue')['nextTick']
+    const onActivated: typeof import("vue")["onActivated"];
-  const onActivated: typeof import('vue')['onActivated']
+    const onBeforeMount: typeof import("vue")["onBeforeMount"];
-  const onBeforeMount: typeof import('vue')['onBeforeMount']
+    const onBeforeRouteLeave: typeof import("vue-router")["onBeforeRouteLeave"];
-  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+    const onBeforeRouteUpdate: typeof import("vue-router")["onBeforeRouteUpdate"];
-  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+    const onBeforeUnmount: typeof import("vue")["onBeforeUnmount"];
-  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+    const onBeforeUpdate: typeof import("vue")["onBeforeUpdate"];
-  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+    const onDeactivated: typeof import("vue")["onDeactivated"];
-  const onDeactivated: typeof import('vue')['onDeactivated']
+    const onErrorCaptured: typeof import("vue")["onErrorCaptured"];
-  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+    const onMounted: typeof import("vue")["onMounted"];
-  const onMounted: typeof import('vue')['onMounted']
+    const onRenderTracked: typeof import("vue")["onRenderTracked"];
-  const onRenderTracked: typeof import('vue')['onRenderTracked']
+    const onRenderTriggered: typeof import("vue")["onRenderTriggered"];
-  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+    const onScopeDispose: typeof import("vue")["onScopeDispose"];
-  const onScopeDispose: typeof import('vue')['onScopeDispose']
+    const onServerPrefetch: typeof import("vue")["onServerPrefetch"];
-  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+    const onUnmounted: typeof import("vue")["onUnmounted"];
-  const onUnmounted: typeof import('vue')['onUnmounted']
+    const onUpdated: typeof import("vue")["onUpdated"];
-  const onUpdated: typeof import('vue')['onUpdated']
+    const provide: typeof import("vue")["provide"];
-  const provide: typeof import('vue')['provide']
+    const reactive: typeof import("vue")["reactive"];
-  const reactive: typeof import('vue')['reactive']
+    const readonly: typeof import("vue")["readonly"];
-  const readonly: typeof import('vue')['readonly']
+    const ref: typeof import("vue")["ref"];
-  const ref: typeof import('vue')['ref']
+    const resolveComponent: typeof import("vue")["resolveComponent"];
-  const resolveComponent: typeof import('vue')['resolveComponent']
+    const shallowReactive: typeof import("vue")["shallowReactive"];
-  const shallowReactive: typeof import('vue')['shallowReactive']
+    const shallowReadonly: typeof import("vue")["shallowReadonly"];
-  const shallowReadonly: typeof import('vue')['shallowReadonly']
+    const shallowRef: typeof import("vue")["shallowRef"];
-  const shallowRef: typeof import('vue')['shallowRef']
+    const toRaw: typeof import("vue")["toRaw"];
-  const toRaw: typeof import('vue')['toRaw']
+    const toRef: typeof import("vue")["toRef"];
-  const toRef: typeof import('vue')['toRef']
+    const toRefs: typeof import("vue")["toRefs"];
-  const toRefs: typeof import('vue')['toRefs']
+    const toValue: typeof import("vue")["toValue"];
-  const toValue: typeof import('vue')['toValue']
+    const triggerRef: typeof import("vue")["triggerRef"];
-  const triggerRef: typeof import('vue')['triggerRef']
+    const unref: typeof import("vue")["unref"];
-  const unref: typeof import('vue')['unref']
+    const useAttrs: typeof import("vue")["useAttrs"];
-  const useAttrs: typeof import('vue')['useAttrs']
+    const useCssModule: typeof import("vue")["useCssModule"];
-  const useCssModule: typeof import('vue')['useCssModule']
+    const useCssVars: typeof import("vue")["useCssVars"];
-  const useCssVars: typeof import('vue')['useCssVars']
+    const useLink: typeof import("vue-router")["useLink"];
-  const useLink: typeof import('vue-router')['useLink']
+    const useRoute: typeof import("vue-router")["useRoute"];
-  const useRoute: typeof import('vue-router')['useRoute']
+    const useRouter: typeof import("vue-router")["useRouter"];
-  const useRouter: typeof import('vue-router')['useRouter']
+    const useSlots: typeof import("vue")["useSlots"];
-  const useSlots: typeof import('vue')['useSlots']
+    const watch: typeof import("vue")["watch"];
-  const watch: typeof import('vue')['watch']
+    const watchEffect: typeof import("vue")["watchEffect"];
-  const watchEffect: typeof import('vue')['watchEffect']
+    const watchPostEffect: typeof import("vue")["watchPostEffect"];
-  const watchPostEffect: typeof import('vue')['watchPostEffect']
+    const watchSyncEffect: typeof import("vue")["watchSyncEffect"];
-  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
 }
 // for type re-export
 declare global {
-  // @ts-ignore
+    // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+    export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from "vue";
 }

src/components/Editor/index.scss

@@ -24,7 +24,7 @@
 }
 .ql-snow .ql-picker.ql-size .ql-picker-label::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item::before {
-    content: "14px";
+    content: "12px";
 }
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
@@ -78,3 +78,149 @@
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
     content: "等宽字体";
 }
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
+    font-family: SimSun, sans-serif;
+    content: "宋体";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
+    font-family: SimHei, sans-serif;
+    content: "黑体";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
+    font-family: "Microsoft YaHei", sans-serif;
+    content: "微软雅黑";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
+    font-family: KaiTi, sans-serif;
+    content: "楷体";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
+    font-family: FangSong, sans-serif;
+    content: "仿宋";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
+    font-family: Arial, sans-serif;
+    content: "Arial";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times-New-Roman"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times-New-Roman"]::before {
+    font-family: "Times New Roman", sans-serif;
+    content: "Times New Roman";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
+    font-family: sans-serif;
+    content: "sans-serif";
+}
+.ql-font-SimSun {
+    font-family: SimSun, sans-serif;
+}
+.ql-font-SimHei {
+    font-family: SimHei, sans-serif;
+}
+.ql-font-Microsoft-YaHei {
+    font-family: "Microsoft YaHei", sans-serif;
+}
+.ql-font-KaiTi {
+    font-family: KaiTi, sans-serif;
+}
+.ql-font-FangSong {
+    font-family: FangSong, sans-serif;
+}
+.ql-font-Arial {
+    font-family: Arial, sans-serif;
+}
+.ql-font-Times-New-Roman {
+    font-family: "Times New Roman", sans-serif;
+}
+.ql-font-sans-serif {
+    font-family: sans-serif;
+}
+
+// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
+// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
+//     content: "10px";
+// }
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
+    content: "12px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
+    content: "14px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
+    content: "16px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
+    content: "18px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
+    content: "20px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
+    content: "22px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
+    content: "24px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
+    content: "26px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
+    content: "28px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
+    content: "30px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
+    content: "32px";
+}
+
+// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
+// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
+//     content: "32px";
+// }
+// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
+// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
+//     content: "36px";
+// }
+// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="38px"]::before,
+// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="38px"]::before {
+//     content: "38px";
+// }
+// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="40px"]::before,
+// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="40px"]::before {
+//     content: "40px";
+// }
+// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="42px"]::before,
+// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="42px"]::before {
+//     content: "44px";
+// }
+// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="44px"]::before,
+// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="44px"]::before {
+//     content: "44px";
+// }
+// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="45px"]::before,
+// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="45px"]::before {
+//     content: "45px";
+// }
+// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="50px"]::before,
+// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="50px"]::before {
+//     content: "50px";
+// }

src/components/Editor/index.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- 图片上传组件 -->
     <el-upload
         :id="uuid"
         action="#"
@@ -12,7 +13,7 @@
         <i ref="uploadRef" class="Plus editor-img-uploader"></i>
     </el-upload>
 
-    <!-- 使用input 标签劫持原本视频上传事件，实现视频上传 -->
+    <!-- 视频上传组件 -->
     <input
         type="file"
         accept="video/*"
@@ -22,9 +23,11 @@
         @change="handleVideoUpload"
         style="width: 0; height: 0; cursor: pointer; opacity: 0"
     />
+
+    <!-- 主富文本编辑器 -->
     <div class="editor">
         <QuillEditor
-            id="editorId"
+            id="mainEditor"
             ref="myQuillEditor"
             v-model:content="editorContent"
             contentType="html"
@@ -32,185 +35,318 @@
             :options="options"
         />
     </div>
+
+    <!-- 标签页配置弹窗 -->
+    <div>
+        <el-dialog
+            v-model="outerVisible"
+            title="标签页配置"
+            style="width: 1200px; height: 900px"
+            close-on-click-modal
+            close-on-press-escape
+            :before-close="handleBeforeClose"
+        >
+            <el-tabs
+                v-model="activeName"
+                type="card"
+                class="demo-tabs"
+                editable
+                @edit="handleTabsEdit"
+                @tab-change="handleTabChange"
+            >
+                <!-- 标签页：标题支持编辑 -->
+                <el-tab-pane
+                    :label="item.title"
+                    :name="item.key"
+                    v-for="(item, index) in tabsData"
+                    :key="item.key"
+                    @keydown.delete.stop
+                    @keydown.backspace.stop
+                >
+                    <template #label>
+                        <div class="tab-title-edit">
+                            <!-- 文字显示状态 -->
+                            <span v-if="!item.isEditing" @click="startEditTitle(index)" class="title-text">
+                                {{ item.title }}
+                            </span>
+                            <!-- 输入框编辑状态 -->
+                            <el-input
+                                @click.stop
+                                @keydown.delete.stop
+                                @keydown.backspace.stop
+                                v-else
+                                v-model="item.title"
+                                :ref="el => (editInputRefs[index] = el)"
+                                size="small"
+                                class="title-input"
+                                @blur="finishEditTitle(index)"
+                            />
+                        </div>
+                    </template>
+
+                    <!-- 标签页编辑器内容 -->
+                    <QuillEditor
+                        :id="`tabEditor_${item.key}`"
+                        :ref="
+                            el => {
+                                if (el) tabEditors[index] = el;
+                            }
+                        "
+                        v-model:content="item.content"
+                        contentType="html"
+                        :options="options1"
+                    />
+                </el-tab-pane>
+            </el-tabs>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="handleQX">取消</el-button>
+                    <el-button type="primary" @click="handleQR"> 确认 </el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
 </template>
 
 <script setup name="Editor">
 import { QuillEditor, Quill } from "@vueup/vue-quill";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
-import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted } from "vue";
+import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted, nextTick } from "vue";
 import { generateUUID } from "@/utils";
 import { h } from "@/utils/url";
 import { routerObj } from "./utils.js";
 import { titleConfig } from "./titleConfig.js";
 import { uploadVideo, uploadImg } from "@/api/modules/upload";
-// 引入插入图片标签自定义的类
+import { ElNotification } from "element-plus";
+import { useRouter } from "vue-router";
+import { useMsg } from "@/hooks/useMsg";
+// 字体配置
+let fontSizeStyle = Quill.import("attributors/style/size");
+fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "30px", "32px"];
+Quill.register(fontSizeStyle, true);
+
+// 自定义Blot
 import ImageBlot from "./quill-image";
 import Video from "./quill-video";
+import TabsBlot from "./quill-tabs";
+Quill.register(Video);
+Quill.register(ImageBlot);
+Quill.register(TabsBlot);
+
+// 基础变量
+const { proxy } = getCurrentInstance();
+const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
 const uuid = ref("id-" + generateUUID());
 const $router = useRouter();
 const routerValueName = $router.currentRoute.value.name;
-
 const routerName = ref(routerObj[routerValueName]);
-
-Quill.register(Video);
-Quill.register(ImageBlot);
-
-const { proxy } = getCurrentInstance();
-const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
 const uploadFileVideo = ref(null);
+const outerVisible = ref(false);
+const imageList = ref([]);
+const imageListDb = ref([]);
+const activeName = ref(null); // 跟踪当前激活的标签页key
+const activeEditor = ref("main"); // 跟踪当前活跃编辑器：main/tab-索引
+
+// 标签页数据（新增key作为唯一标识，isEditing控制编辑状态）
+const tabsData = ref([]);
+// 标签页编辑器ref数组
+const tabEditors = ref([]);
+// 标题编辑输入框的ref
+const editInputRefs = ref([]);
+const currentEditingTabsRef = ref(null);
+// Props
 const props = defineProps({
-    /* 编辑器的内容 */
+    content: { type: String, default: "" },
-    content: {
+    readOnly: { type: Boolean, default: false },
-        type: String,
+    fileSizeLimit: { type: Number, default: 10 }
-        default: ""
-    },
-    /* 只读 */
-    readOnly: {
-        type: Boolean,
-        default: false
-    },
-    // 上传文件大小限制(MB)
-    fileSizeLimit: {
-        type: Number,
-        default: 10
-    }
 });
-//值
+
+// 主编辑器内容双向绑定
 const editorContent = computed({
     get: () => props.content,
     set: val => {
         emit("update:content", val);
     }
 });
-//富文本ref
+const myQuillEditor = ref(null); // 主编辑器ref
-const myQuillEditor = ref(null);
+
-//富文本值
+// 主编辑器配置（保持不变）
-const oldContent = ref("");
-//富文本配置项
 const options = reactive({
     theme: "snow",
     debug: "warn",
     modules: {
-        // 工具栏配置
         toolbar: {
             container: [
-                ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
+                ["bold", "italic", "underline", "strike"],
-                ["blockquote", "code-block"], // 引用  代码块
+                ["blockquote", "code-block"],
-                [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
+                [{ list: "ordered" }, { list: "bullet" }],
-                [{ indent: "-1" }, { indent: "+1" }], // 缩进
+                [{ indent: "-1" }, { indent: "+1" }],
-                [{ size: ["small", false, "large", "huge"] }], // 字体大小
+                [{ size: fontSizeStyle.whitelist }],
-                [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+                [{ header: [1, 2, 3, 4, 5, 6, false] }],
-                [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
+                [{ color: [] }, { background: [] }],
-                [{ align: [] }], // 对齐方式
+                [{ align: [] }],
-                ["clean"], // 清除文本格式
+                ["clean"],
-                ["link", "image", "video"] // 链接、图片、视频
+                ["link", "image", "video", "tabs"]
             ],
             handlers: {
-                // 重写图片上传事件
                 image: function (value) {
                     if (value) {
-                        //调用图片上传
+                        activeEditor.value = "main";
                         proxy.$refs.uploadRef.click();
-                    } else {
+                    } else Quill.format("customImage", true);
-                        Quill.format("image", true);
-                    }
                 },
                 video: function (value) {
                     if (value) {
-                        // 劫持原来的视频点击按钮事件
+                        activeEditor.value = "main";
                         document.querySelector("#uploadFileVideo")?.click();
-                    } else {
+                    } else Quill.format("customVideo", true);
-                        Quill.format("video", true);
+                },
-                    }
+                tabs: function (value) {
+                    outerVisible.value = value;
                 }
             }
         }
     },
     placeholder: "请输入内容...",
-    readOnly: props.readOnly,
+    readOnly: props.readOnly
-    clipboard: {
-        matchers: [
-            [
-                "img",
-                (node, delta) => {
-                    const src = node.getAttribute("src");
-                    const id = node.getAttribute("id");
-                    delta.insert({ image: { src, id: id } });
-                }
-            ]
-        ]
-    }
 });
-//上传前的钩子
+
+// 标签页编辑器配置（保持不变）
+const options1 = reactive({
+    theme: "snow",
+    debug: "warn",
+    modules: {
+        toolbar: {
+            container: [
+                ["bold", "italic", "underline", "strike"],
+                ["blockquote", "code-block"],
+                [{ list: "ordered" }, { list: "bullet" }],
+                [{ indent: "-1" }, { indent: "+1" }],
+                [{ size: fontSizeStyle.whitelist }],
+                [{ header: [1, 2, 3, 4, 5, 6, false] }],
+                [{ color: [] }, { background: [] }],
+                [{ align: [] }],
+                ["clean"],
+                ["link", "image", "video"]
+            ],
+            handlers: {
+                image: function (value) {
+                    if (value) {
+                        const currentIndex = tabsData.value.findIndex(item => item.key === activeName.value);
+                        activeEditor.value = `tab-${currentIndex}`;
+                        proxy.$refs.uploadRef.click();
+                    } else Quill.format("customImage", true);
+                },
+                video: function (value) {
+                    if (value) {
+                        const currentIndex = tabsData.value.findIndex(item => item.key === activeName.value);
+                        activeEditor.value = `tab-${currentIndex}`;
+                        document.querySelector("#uploadFileVideo")?.click();
+                    } else Quill.format("customVideo", true);
+                }
+            }
+        }
+    },
+    placeholder: "请输入内容...",
+    readOnly: props.readOnly
+});
+
+// 上传前校验（保持不变）
 const handleBeforeUpload = file => {
     const fileType = file.type;
+    file.customUid = generateUUID();
+    imageListDb.value.push(file);
 
-    // 图片
+    const validTypes = ["image/jpeg", "image/png", "image/gif", "image/jpg", "image/bmp", "image/webp"];
-    if (
+    if (!validTypes.includes(fileType)) {
-        fileType == "image/jpeg" ||
+        ElNotification({ title: "格式错误", message: "仅支持图片格式", type: "warning" });
-        fileType == "image/png" ||
+        imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
-        fileType == "image/gif" ||
-        fileType == "image/jpg" ||
-        fileType == "image/bmp" ||
-        fileType == "image/webp" ||
-        fileType == "video/mov" ||
-        fileType == "video/ts" ||
-        fileType == "video/mp4" ||
-        fileType == "video/avi"
-    ) {
-        const fileSizeLimit = file.size;
-        // 校检文件大小
-        const isLt = fileSizeLimit / 1024 / 1024 < props.fileSizeLimit;
-        if (!isLt) {
-            console.log(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`);
-            alert(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`);
-            return false;
-        } else {
-            console.log(`RIch MB!`);
-            return true;
-        }
-    } else {
-        alert(`文件格式不正确！`);
         return false;
     }
-};
+
-//图片上传
+    const isLt = file.size / 1024 / 1024 < props.fileSizeLimit;
-const handleHttpUpload = async options => {
+    if (!isLt) {
-    let formData = new FormData();
+        ElNotification({ title: "大小超限", message: `不能超过 ${props.fileSizeLimit} MB`, type: "warning" });
-    //这里要根据后端设置的name设置key值,如果name是file就传file是image就传image
+        imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
-    formData.append("image", options.file);
+        return false;
-    try {
+    }
-        const result = await uploadImg(formData, routerName.value);
+    return true;
-        if (result?.code === 0) {
-            const { data } = result;
-            let rawMyQuillEditor = toRaw(myQuillEditor.value);
-            // 获取富文本实例
-            let quill = rawMyQuillEditor.getQuill();
-            // 获取光标位置
-            let length = quill.selection.savedRange.index;
-            quill.insertEmbed(length, "image", {
-                url: h + data.path,
-                id: generateUUID()
-            });
-            quill.setSelection(length + 1);
-        }
-    } catch (error) {}
 };
 
-//视频上传
+// 图片上传（保持不变）
-const handleVideoUpload = async evt => {
+const handleHttpUpload = async options => {
-    if (evt.target.files.length === 0) {
+    let formData = new FormData();
-        return;
+    formData.append("image", options.file);
+    imageList.value.push(options.file);
+
+    try {
+        const result = await uploadImg(formData, routerName.value, options.file.customUid);
+        if (result?.data?.code === 0) {
+            const { data } = result.data;
+            const { imgId } = result;
+
+            const fileItem = imageListDb.value.find(item => item.customUid === imgId);
+            if (fileItem) {
+                fileItem.serverImgId = imgId;
+                fileItem.path = data.path;
+            }
+
+            const allFilesUploaded = imageListDb.value.every(item => item.path);
+            if (allFilesUploaded) {
+                let rawQuillEditor = "";
+                let quill = "";
+                if (activeEditor.value === "main") {
+                    rawQuillEditor = toRaw(myQuillEditor.value);
+                    quill = rawQuillEditor.getQuill();
+                } else {
+                    const tabIndex = parseInt(activeEditor.value.split("-")[1]);
+                    rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
+                    quill = rawQuillEditor.getQuill();
+                }
+
+                imageListDb.value.forEach(item => {
+                    const length = quill.getLength() - 1;
+                    quill.insertEmbed(length, "customImage", {
+                        url: h + item.path,
+                        id: item.serverImgId || generateUUID()
+                    });
+                    quill.setSelection(length + 1);
+                });
+
+                const finalLength = quill.getLength();
+                quill.setSelection(finalLength);
+
+                imageList.value = [];
+                imageListDb.value = [];
+            }
+        }
+    } catch (error) {
+        console.error("图片上传失败:", error);
+        imageList.value = imageList.value.filter(item => item.customUid !== options.file.customUid);
+        imageListDb.value = imageListDb.value.filter(item => item.customUid !== options.file.customUid);
     }
+};
+
+// 视频上传（保持不变）
+const handleVideoUpload = async evt => {
+    if (evt.target.files.length === 0) return;
     const formData = new FormData();
     formData.append("video", evt.target.files[0]);
     try {
-        let quill = toRaw(myQuillEditor.value).getQuill();
+        let rawQuillEditor = "";
-        // 获取光标位置
+        let quill = "";
+        if (activeEditor.value === "main") {
+            rawQuillEditor = toRaw(myQuillEditor.value);
+            quill = rawQuillEditor.getQuill();
+        } else {
+            const tabIndex = parseInt(activeEditor.value.split("-")[1]);
+            rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
+            quill = rawQuillEditor.getQuill();
+        }
         let length = quill.selection.savedRange.index;
         const { data } = await uploadVideo(formData);
-        quill.insertEmbed(length, "video", {
+        quill.insertEmbed(length, "customVideo", {
-            url: h + data.path, //h + data.fileUrl, //
+            url: h + data.path,
             id: generateUUID()
         });
         uploadFileVideo.value.value = "";
@@ -219,24 +355,218 @@ const handleVideoUpload = async evt => {
     }
 };
 
-// 监听富文本内容变化，删除被服务器中被用户回车删除的图片
+// 标签页切换事件（基于key切换）
-const onContentChange = content => {
+const handleTabChange = key => {
-    emit("handleRichTextContentChange", content);
+    const tabIndex = tabsData.value.findIndex(item => item.key === key);
+    activeName.value = key;
+    activeEditor.value = `tab-${tabIndex}`;
 };
-// 增加hover工具栏有中文提示
+
-const initTitle = () => {
+// 标签页增删事件
-    document.getElementsByClassName("ql-editor")[0].dataset.placeholder = "";
+const handleTabsEdit = (targetKey, action) => {
-    for (let item of titleConfig.value) {
+    if (action === "add") {
-        let tip = document.querySelector(".ql-toolbar " + item.Choice);
+        if (tabsData.value.length > 5) {
-        if (!tip) continue;
+            return useMsg("error", "标签页已达上限 !");
-        tip.setAttribute("title", item.title);
+        }
+        // 新增标签页：生成唯一key，默认标题，初始不处于编辑状态
+        const newKey = `tab_${generateUUID()}`;
+        const newIndex = tabsData.value.length;
+        tabsData.value.push({
+            key: newKey,
+            title: `标签${newIndex + 1}`,
+            content: "",
+            isEditing: false // 新增时默认不编辑
+        });
+        nextTick(() => {
+            activeName.value = newKey;
+            activeEditor.value = `tab-${newIndex}`;
+            // 新增后自动进入编辑状态
+            setTimeout(() => {
+                startEditTitle(newIndex);
+            }, 100);
+        });
+    } else if (action === "remove") {
+        // 删除标签页
+        const index = tabsData.value.findIndex(item => item.key === targetKey);
+        tabsData.value.splice(index, 1);
+        tabEditors.value.splice(index, 1);
+        editInputRefs.value.splice(index, 1);
+
+        // 调整活跃编辑器索引
+        if (activeEditor.value.startsWith("tab-")) {
+            const currentTabIndex = parseInt(activeEditor.value.split("-")[1]);
+            if (currentTabIndex > index) {
+                activeEditor.value = `tab-${currentTabIndex - 1}`;
+            } else if (currentTabIndex === index) {
+                // 若删除当前活跃标签，切换到第一个或主编辑器
+                activeEditor.value = tabsData.value.length > 0 ? "tab-0" : "main";
+                activeName.value = tabsData.value.length > 0 ? tabsData.value[0].key : null;
+            }
+        }
     }
 };
+
+// 开始编辑标签页标题
+const startEditTitle = index => {
+    const tab = tabsData.value[index];
+    if (!tab) return;
+    // 记录原始标题（用于取消编辑时恢复）
+    tab.originalTitle = tab.title;
+    tab.isEditing = true;
+    // 延迟获取焦点，确保输入框已渲染
+    nextTick(() => {
+        editInputRefs.value[index]?.focus();
+    });
+};
+
+// 完成编辑（失去焦点或回车）
+const finishEditTitle = index => {
+    const tab = tabsData.value[index];
+    if (!tab) return;
+    // 校验标题（不能为空）
+    if (!tab.title.trim()) {
+        tab.title = tab.originalTitle || `标签${index + 1}`;
+        ElNotification({ title: "提示", message: "标签标题不能为空", type: "info" });
+    }
+    tab.isEditing = false;
+    // 更新activeName（如果当前编辑的是活跃标签）
+    if (tab.key === activeName.value) {
+        activeName.value = tab.key; // 触发重绘
+    }
+};
+
+// 其他方法（保持不变）
+const onContentChange = content => {
+    emit("handleRichTextContentChange", content);
+    emit("update:content", content);
+};
+const setTabsInfo = () => {
+    outerVisible.value = false;
+    //清空
+    tabsData.value = [];
+    activeName.value = null;
+    activeEditor.value = "main";
+};
+//弹窗关闭前的钩子
+const handleBeforeClose = () => {
+    setTabsInfo();
+};
+// 确认按钮点击事件（修改后）
+const handleQR = () => {
+    const quill = toRaw(myQuillEditor.value)?.getQuill();
+    if (!quill) return;
+    if (!tabsData.value.length) {
+        return useMsg("error", "标签页内容为空 !");
+    }
+    const range = quill.getSelection(true);
+    // 判断是否是编辑已有标签页（通过 currentEditingTabsRef 是否有值）
+    if (currentEditingTabsRef.value) {
+        // 1. 编辑模式：更新原有标签页组件
+        const blot = currentEditingTabsRef.value;
+        // 更新 blot 的数据（触发 DOM 更新）
+        blot.updateContents(tabsData.value); // 需要在 TabsBlot 中添加 updateContents 方法
+        // 清除编辑状态标记
+        currentEditingTabsRef.value = null;
+    } else {
+        // 2. 新增模式：插入新的标签页组件
+        quill.insertEmbed(range.index, "tabs", tabsData.value);
+        quill.setSelection(range.index + 1);
+    }
+    // 关闭弹窗并清空临时数据
+    setTabsInfo();
+};
+//取消
+const handleQX = () => {
+    setTabsInfo();
+};
+const initTitle = () => {
+    const editor = document.querySelector(".ql-editor");
+    if (editor) editor.dataset.placeholder = "";
+    titleConfig.value.forEach(item => {
+        const tip = document.querySelector(`.ql-toolbar ${item.Choice}`);
+        if (tip) tip.setAttribute("title", item.title);
+    });
+};
+// 定义 loadTabsDataToEditor 函数
+const loadTabsDataToEditor = tabs => {
+    // 清空现有数据
+    tabsData.value = [];
+    // 转换原始标签数据为编辑所需格式（添加key和编辑状态）
+    tabs.forEach((tab, index) => {
+        tabsData.value.push({
+            key: `tab_${generateUUID()}`, // 生成唯一key
+            title: tab.title || `标签${index + 1}`, // 避免空标题
+            content: tab.content || "", // 标签页内容
+            isEditing: false // 编辑状态标记
+        });
+    });
+    // 激活第一个标签页（如果有数据）
+    nextTick(() => {
+        if (tabsData.value.length > 0) {
+            activeName.value = tabsData.value[0].key;
+            activeEditor.value = "tab-0";
+        }
+    });
+};
+
 onMounted(() => {
     initTitle();
-    oldContent.value = props.content;
+    // 监听编辑按钮点击事件
+    const editorEl = document.querySelector(".ql-editor");
+    if (editorEl) {
+        editorEl.addEventListener("edit-tabs", e => {
+            console.log(1232, "测试");
+            console.log(e.detail.blot, "=e.detail=");
+            const tabsData = TabsBlot.value(e.detail.blot.domNode);
+            console.log(tabsData, "=tabsData=");
+            if (tabsData.length > 0) {
+                // 保存当前编辑的标签页引用
+                currentEditingTabsRef.value = e.detail.blot;
+                console.log(currentEditingTabsRef.value, "=currentEditingTabsRef.value =");
+                // 加载数据到弹窗
+                loadTabsDataToEditor(tabsData);
+                // 显示弹窗
+                outerVisible.value = true;
+            }
+        });
+    }
+});
+
+defineExpose({
+    clearEditor: () => {
+        const quill = toRaw(myQuillEditor.value)?.getQuill();
+        if (quill) {
+            quill.setText("");
+            editorContent.value = "";
+        }
+    }
 });
 </script>
+
 <style lang="scss">
 @import "./index.scss";
+
+// 增加编辑器内容区交互性确保删除可用
+.ql-editor {
+    min-height: 600px; // 确保空编辑器也有点击区域
+    cursor: text !important;
+    user-select: text !important;
+}
+
+// /* 标签页样式 */
+.quill-tabs {
+    margin: 15px 0;
+    overflow: hidden;
+    border-radius: 4px;
+}
+
+// /* 用伪元素添加图标（可替换为自己的图标） */
+.ql-tabs::before {
+    font-size: 16px;
+    content: "T"; /* 用 emoji 或字体图标 */
+}
+.title-input {
+    width: 100px;
+    margin: -2px 0; /* 与标签对齐 */
+}
 </style>

src/components/Editor/index2.vue

@@ -0,0 +1,550 @@
+<template>
+    <!-- 图片上传组件 -->
+    <el-upload
+        :id="uuid"
+        action="#"
+        :multiple="true"
+        :show-file-list="false"
+        :http-request="handleHttpUpload"
+        :before-upload="handleBeforeUpload"
+        class="editor-img-uploader"
+        accept=".jpeg,.jpg,.png,.gif"
+    >
+        <i ref="uploadRef" class="Plus editor-img-uploader"></i>
+    </el-upload>
+
+    <!-- 视频上传组件 -->
+    <input
+        type="file"
+        accept="video/*"
+        name="file"
+        ref="uploadFileVideo"
+        id="uploadFileVideo"
+        @change="handleVideoUpload"
+        style="width: 0; height: 0; cursor: pointer; opacity: 0"
+    />
+
+    <!-- 主富文本编辑器 -->
+    <div class="editor">
+        <QuillEditor
+            id="mainEditor"
+            ref="myQuillEditor"
+            v-model:content="editorContent"
+            contentType="html"
+            @update:content="onContentChange"
+            :options="options"
+        />
+    </div>
+
+    <!-- 标签页配置弹窗 -->
+    <div>
+        <el-dialog
+            v-model="outerVisible"
+            title="标签页配置"
+            style="width: 1200px; height: 900px"
+            close-on-click-modal
+            close-on-press-escape
+            :before-close="handleBeforeClose"
+        >
+            <el-tabs
+                v-model="activeName"
+                type="card"
+                class="demo-tabs"
+                editable
+                @edit="handleTabsEdit"
+                @tab-change="handleTabChange"
+            >
+                <!-- 标签页：标题支持编辑 -->
+                <el-tab-pane :label="item.title" :name="item.key" v-for="(item, index) in tabsData" :key="item.key">
+                    <template #label>
+                        <div class="tab-title-edit">
+                            <!-- 文字显示状态 -->
+                            <span v-if="!item.isEditing" @click="startEditTitle(index)" class="title-text">
+                                {{ item.title }}
+                            </span>
+                            <!-- 输入框编辑状态 -->
+                            <el-input
+                                v-else
+                                v-model="item.title"
+                                :ref="el => (editInputRefs[index] = el)"
+                                size="small"
+                                class="title-input"
+                                @blur="finishEditTitle(index)"
+                                @keyup.enter="finishEditTitle(index)"
+                                @keyup.esc="cancelEditTitle(index)"
+                            />
+                        </div>
+                    </template>
+
+                    <!-- 标签页编辑器内容 -->
+                    <QuillEditor
+                        :id="`tabEditor_${item.key}`"
+                        :ref="
+                            el => {
+                                if (el) tabEditors[index] = el;
+                            }
+                        "
+                        v-model:content="item.content"
+                        contentType="html"
+                        :options="options1"
+                    />
+                </el-tab-pane>
+            </el-tabs>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="handleQX">取消</el-button>
+                    <el-button type="primary" @click="handleQR"> 确认 </el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup name="Editor">
+import { QuillEditor, Quill } from "@vueup/vue-quill";
+import "@vueup/vue-quill/dist/vue-quill.snow.css";
+import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted, nextTick } from "vue";
+import { generateUUID } from "@/utils";
+import { h } from "@/utils/url";
+import { routerObj } from "./utils.js";
+import { titleConfig } from "./titleConfig.js";
+import { uploadVideo, uploadImg } from "@/api/modules/upload";
+import { ElNotification } from "element-plus";
+import { useRouter } from "vue-router";
+
+// 字体配置
+let fontSizeStyle = Quill.import("attributors/style/size");
+fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "30px", "32px"];
+Quill.register(fontSizeStyle, true);
+
+// 自定义Blot
+import ImageBlot from "./quill-image";
+import Video from "./quill-video";
+import TabsBlot from "./quill-tabs";
+Quill.register(Video);
+Quill.register(ImageBlot);
+Quill.register(TabsBlot);
+
+// 基础变量
+const { proxy } = getCurrentInstance();
+const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
+const uuid = ref("id-" + generateUUID());
+const $router = useRouter();
+const routerValueName = $router.currentRoute.value.name;
+const routerName = ref(routerObj[routerValueName]);
+const uploadFileVideo = ref(null);
+const outerVisible = ref(false);
+const imageList = ref([]);
+const imageListDb = ref([]);
+const activeName = ref(null); // 跟踪当前激活的标签页key
+const activeEditor = ref("main"); // 跟踪当前活跃编辑器：main/tab-索引
+
+// 标签页数据（新增key作为唯一标识，isEditing控制编辑状态）
+const tabsData = ref([]);
+// 标签页编辑器ref数组
+const tabEditors = ref([]);
+// 标题编辑输入框的ref
+const editInputRefs = ref([]);
+
+// Props
+const props = defineProps({
+    content: { type: String, default: "" },
+    readOnly: { type: Boolean, default: false },
+    fileSizeLimit: { type: Number, default: 10 }
+});
+
+// 主编辑器内容双向绑定
+const editorContent = computed({
+    get: () => props.content,
+    set: val => {
+        emit("update:content", val);
+    }
+});
+const myQuillEditor = ref(null); // 主编辑器ref
+
+// 主编辑器配置（保持不变）
+const options = reactive({
+    theme: "snow",
+    debug: "warn",
+    modules: {
+        toolbar: {
+            container: [
+                ["bold", "italic", "underline", "strike"],
+                ["blockquote", "code-block"],
+                [{ list: "ordered" }, { list: "bullet" }],
+                [{ indent: "-1" }, { indent: "+1" }],
+                [{ size: fontSizeStyle.whitelist }],
+                [{ header: [1, 2, 3, 4, 5, 6, false] }],
+                [{ color: [] }, { background: [] }],
+                [{ align: [] }],
+                ["clean"],
+                ["link", "image", "video", "tabs"]
+            ],
+            handlers: {
+                image: function (value) {
+                    if (value) {
+                        activeEditor.value = "main";
+                        proxy.$refs.uploadRef.click();
+                    } else Quill.format("customImage", true);
+                },
+                video: function (value) {
+                    if (value) {
+                        activeEditor.value = "main";
+                        document.querySelector("#uploadFileVideo")?.click();
+                    } else Quill.format("customVideo", true);
+                },
+                tabs: function (value) {
+                    outerVisible.value = value;
+                }
+            }
+        }
+    },
+    placeholder: "请输入内容...",
+    readOnly: props.readOnly
+});
+
+// 标签页编辑器配置（保持不变）
+const options1 = reactive({
+    theme: "snow",
+    debug: "warn",
+    modules: {
+        toolbar: {
+            container: [
+                ["bold", "italic", "underline", "strike"],
+                ["blockquote", "code-block"],
+                [{ list: "ordered" }, { list: "bullet" }],
+                [{ indent: "-1" }, { indent: "+1" }],
+                [{ size: fontSizeStyle.whitelist }],
+                [{ header: [1, 2, 3, 4, 5, 6, false] }],
+                [{ color: [] }, { background: [] }],
+                [{ align: [] }],
+                ["clean"],
+                ["link", "image", "video"]
+            ],
+            handlers: {
+                image: function (value) {
+                    if (value) {
+                        const currentIndex = tabsData.value.findIndex(item => item.key === activeName.value);
+                        activeEditor.value = `tab-${currentIndex}`;
+                        proxy.$refs.uploadRef.click();
+                    } else Quill.format("customImage", true);
+                },
+                video: function (value) {
+                    if (value) {
+                        const currentIndex = tabsData.value.findIndex(item => item.key === activeName.value);
+                        activeEditor.value = `tab-${currentIndex}`;
+                        document.querySelector("#uploadFileVideo")?.click();
+                    } else Quill.format("customVideo", true);
+                }
+            }
+        }
+    },
+    placeholder: "请输入内容...",
+    readOnly: props.readOnly
+});
+
+// 上传前校验（保持不变）
+const handleBeforeUpload = file => {
+    const fileType = file.type;
+    file.customUid = generateUUID();
+    imageListDb.value.push(file);
+
+    const validTypes = ["image/jpeg", "image/png", "image/gif", "image/jpg", "image/bmp", "image/webp"];
+    if (!validTypes.includes(fileType)) {
+        ElNotification({ title: "格式错误", message: "仅支持图片格式", type: "warning" });
+        imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
+        return false;
+    }
+
+    const isLt = file.size / 1024 / 1024 < props.fileSizeLimit;
+    if (!isLt) {
+        ElNotification({ title: "大小超限", message: `不能超过 ${props.fileSizeLimit} MB`, type: "warning" });
+        imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
+        return false;
+    }
+    return true;
+};
+
+// 图片上传（保持不变）
+const handleHttpUpload = async options => {
+    let formData = new FormData();
+    formData.append("image", options.file);
+    imageList.value.push(options.file);
+
+    try {
+        const result = await uploadImg(formData, routerName.value, options.file.customUid);
+        if (result?.data?.code === 0) {
+            const { data } = result.data;
+            const { imgId } = result;
+
+            const fileItem = imageListDb.value.find(item => item.customUid === imgId);
+            if (fileItem) {
+                fileItem.serverImgId = imgId;
+                fileItem.path = data.path;
+            }
+
+            const allFilesUploaded = imageListDb.value.every(item => item.path);
+            if (allFilesUploaded) {
+                let rawQuillEditor = "";
+                let quill = "";
+                if (activeEditor.value === "main") {
+                    rawQuillEditor = toRaw(myQuillEditor.value);
+                    quill = rawQuillEditor.getQuill();
+                } else {
+                    const tabIndex = parseInt(activeEditor.value.split("-")[1]);
+                    rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
+                    quill = rawQuillEditor.getQuill();
+                }
+
+                imageListDb.value.forEach(item => {
+                    const length = quill.getLength() - 1;
+                    quill.insertEmbed(length, "customImage", {
+                        url: h + item.path,
+                        id: item.serverImgId || generateUUID()
+                    });
+                    quill.setSelection(length + 1);
+                });
+
+                const finalLength = quill.getLength();
+                quill.setSelection(finalLength);
+
+                imageList.value = [];
+                imageListDb.value = [];
+            }
+        }
+    } catch (error) {
+        console.error("图片上传失败:", error);
+        imageList.value = imageList.value.filter(item => item.customUid !== options.file.customUid);
+        imageListDb.value = imageListDb.value.filter(item => item.customUid !== options.file.customUid);
+    }
+};
+
+// 视频上传（保持不变）
+const handleVideoUpload = async evt => {
+    if (evt.target.files.length === 0) return;
+    const formData = new FormData();
+    formData.append("video", evt.target.files[0]);
+    try {
+        let rawQuillEditor = "";
+        let quill = "";
+        if (activeEditor.value === "main") {
+            rawQuillEditor = toRaw(myQuillEditor.value);
+            quill = rawQuillEditor.getQuill();
+        } else {
+            const tabIndex = parseInt(activeEditor.value.split("-")[1]);
+            rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
+            quill = rawQuillEditor.getQuill();
+        }
+        let length = quill.selection.savedRange.index;
+        const { data } = await uploadVideo(formData);
+        quill.insertEmbed(length, "customVideo", {
+            url: h + data.path,
+            id: generateUUID()
+        });
+        uploadFileVideo.value.value = "";
+    } catch (error) {
+        console.log(error);
+    }
+};
+
+// 标签页切换事件（基于key切换）
+const handleTabChange = key => {
+    const tabIndex = tabsData.value.findIndex(item => item.key === key);
+    activeName.value = key;
+    activeEditor.value = `tab-${tabIndex}`;
+};
+
+// 标签页增删事件
+const handleTabsEdit = (targetKey, action) => {
+    if (action === "add") {
+        // 新增标签页：生成唯一key，默认标题，初始不处于编辑状态
+        const newKey = `tab_${generateUUID()}`;
+        const newIndex = tabsData.value.length;
+        tabsData.value.push({
+            key: newKey,
+            title: `标签${newIndex + 1}`,
+            content: "",
+            isEditing: false // 新增时默认不编辑
+        });
+        nextTick(() => {
+            activeName.value = newKey;
+            activeEditor.value = `tab-${newIndex}`;
+            // 新增后自动进入编辑状态
+            setTimeout(() => {
+                startEditTitle(newIndex);
+            }, 100);
+        });
+    } else if (action === "remove") {
+        // 删除标签页
+        const index = tabsData.value.findIndex(item => item.key === targetKey);
+        tabsData.value.splice(index, 1);
+        tabEditors.value.splice(index, 1);
+        editInputRefs.value.splice(index, 1);
+
+        // 调整活跃编辑器索引
+        if (activeEditor.value.startsWith("tab-")) {
+            const currentTabIndex = parseInt(activeEditor.value.split("-")[1]);
+            if (currentTabIndex > index) {
+                activeEditor.value = `tab-${currentTabIndex - 1}`;
+            } else if (currentTabIndex === index) {
+                // 若删除当前活跃标签，切换到第一个或主编辑器
+                activeEditor.value = tabsData.value.length > 0 ? "tab-0" : "main";
+                activeName.value = tabsData.value.length > 0 ? tabsData.value[0].key : null;
+            }
+        }
+    }
+};
+
+// 开始编辑标签页标题
+const startEditTitle = index => {
+    const tab = tabsData.value[index];
+    if (!tab) return;
+    // 记录原始标题（用于取消编辑时恢复）
+    tab.originalTitle = tab.title;
+    tab.isEditing = true;
+    // 延迟获取焦点，确保输入框已渲染
+    nextTick(() => {
+        editInputRefs.value[index]?.focus();
+    });
+};
+
+// 完成编辑（失去焦点或回车）
+const finishEditTitle = index => {
+    const tab = tabsData.value[index];
+    if (!tab) return;
+    // 校验标题（不能为空）
+    if (!tab.title.trim()) {
+        tab.title = tab.originalTitle || `标签${index + 1}`;
+        ElNotification({ title: "提示", message: "标签标题不能为空", type: "info" });
+    }
+    tab.isEditing = false;
+    // 更新activeName（如果当前编辑的是活跃标签）
+    if (tab.key === activeName.value) {
+        activeName.value = tab.key; // 触发重绘
+    }
+};
+
+// 其他方法（保持不变）
+const onContentChange = content => {
+    emit("handleRichTextContentChange", content);
+    emit("update:content", content);
+};
+const setTabsInfo = () => {
+    outerVisible.value = false;
+    //清空
+    tabsData.value = [];
+    activeName.value = null;
+    activeEditor.value = "main";
+};
+//弹窗关闭前的钩子
+const handleBeforeClose = () => {
+    setTabsInfo();
+};
+//确认
+const handleQR = () => {
+    const quill = toRaw(myQuillEditor.value)?.getQuill();
+    if (quill) {
+        const range = quill.getSelection(true);
+        quill.insertEmbed(range.index, "tabs", tabsData.value);
+        quill.setSelection(range.index + 1);
+        setTabsInfo();
+    }
+};
+//取消
+const handleQX = () => {
+    setTabsInfo();
+};
+const initTitle = () => {
+    const editor = document.querySelector(".ql-editor");
+    if (editor) editor.dataset.placeholder = "";
+    titleConfig.value.forEach(item => {
+        const tip = document.querySelector(`.ql-toolbar ${item.Choice}`);
+        if (tip) tip.setAttribute("title", item.title);
+    });
+};
+
+onMounted(() => {
+    initTitle();
+});
+
+defineExpose({
+    clearEditor: () => {
+        const quill = toRaw(myQuillEditor.value)?.getQuill();
+        if (quill) {
+            quill.setText("");
+            editorContent.value = "";
+        }
+    }
+});
+</script>
+
+<style lang="scss">
+@import "./index.scss";
+
+// 增加编辑器内容区交互性确保删除可用
+.ql-editor {
+    min-height: 600px; // 确保空编辑器也有点击区域
+    cursor: text !important;
+    user-select: text !important;
+}
+
+/* 标签页样式 */
+.quill-tabs {
+    margin: 15px 0;
+    overflow: hidden;
+    border: 1px solid #dddddd;
+    border-radius: 4px;
+}
+
+/* 用伪元素添加图标（可替换为自己的图标） */
+.ql-tabs::before {
+    font-size: 16px;
+    content: "T"; /* 用 emoji 或字体图标 */
+}
+.quill-tab-list {
+    display: flex;
+    background-color: #f8f9fa;
+    border-bottom: 1px solid #dddddd;
+}
+.quill-tab-button {
+    padding: 10px 15px;
+    font-weight: 500;
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    transition: background-color 0.2s;
+}
+.quill-tab-button.active {
+    color: #007bff;
+    background-color: white;
+    border-bottom: 2px solid #007bff;
+}
+.quill-tab-content-list {
+    padding: 15px;
+}
+.quill-tab-content {
+    display: none;
+}
+.quill-tab-content.active {
+    display: block;
+}
+
+/* 标签页标题编辑样式 */
+.tab-title-edit {
+    display: flex;
+    align-items: center;
+    .title-text {
+        display: inline-block;
+        min-width: 60px;
+        padding: 0 4px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        cursor: pointer;
+    }
+    .title-input {
+        width: 100px;
+        margin: -2px 0; /* 与标签对齐 */
+    }
+}
+</style>

src/components/Editor/quill-image.js

@@ -5,9 +5,16 @@ class ImageBlot extends BlockEmbed {
         let node = super.create();
         node.setAttribute("src", value.url);
         node.setAttribute("id", value.id);
+
+        console.log("图片信息", node);
         return node;
     }
-
+    // 允许通过键盘删除
+    deleteAt(index, length) {
+        console.log(index, length, "===============>");
+        console.log("===========super===========");
+        super.deleteAt(index, length);
+    }
     static value(node) {
         return {
             url: node.getAttribute("src"),
@@ -15,6 +22,6 @@ class ImageBlot extends BlockEmbed {
         };
     }
 }
-ImageBlot.blotName = "image";
+ImageBlot.blotName = "customImage";
 ImageBlot.tagName = "img";
 export default ImageBlot;

src/components/Editor/quill-tabs.js

@@ -0,0 +1,375 @@
+import { Quill } from "@vueup/vue-quill";
+
+const BlockEmbed = Quill.import("blots/block/embed");
+
+class TabsBlot extends BlockEmbed {
+    static blotName = "tabs";
+    static tagName = "div";
+    static className = "m-quill-tabs";
+
+    constructor(domNode) {
+        super(domNode);
+        this.bindEvents();
+        this.bindDeleteKeyEvent(); // 绑定删除键事件
+    }
+
+    static create(value) {
+        const node = super.create(value);
+        const tabs = value || [];
+
+        // 主容器样式
+        node.setAttribute(
+            "style",
+            `
+            margin: 15px 0;
+            overflow: hidden;
+            border-radius: 4px;
+            position: relative;
+        `
+        );
+
+        // 标签栏
+        const tabList = document.createElement("div");
+        tabList.className = "m-quill-tab-list";
+        tabList.setAttribute(
+            "style",
+            `
+            display: flex;
+            border-bottom: 1px solid #dddddd;
+        `
+        );
+
+        // 内容区
+        const contentList = document.createElement("div");
+        contentList.className = "m-quill-tab-content-list";
+        contentList.setAttribute(
+            "style",
+            `
+            padding: 15px;
+        `
+        );
+
+        // 生成标签按钮和内容面板
+        tabs.forEach((tab, index) => {
+            // 标签按钮
+            const btn = document.createElement("button");
+            btn.className = `m-quill-tab-button`;
+            btn.setAttribute("data-index", index);
+            btn.textContent = tab.title;
+            btn.setAttribute(
+                "style",
+                `
+                padding: 10px 15px;
+                font-weight: 900;
+                color: #8f9099;
+                cursor: pointer;
+                background: transparent;
+                border: none;
+                margin-right: 60px;
+                cursor: pointer;
+                font-size:16px;
+                ${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
+            `
+            );
+            tabList.appendChild(btn);
+
+            // 内容面板 - 关键修改：设置为可编辑
+            const panel = document.createElement("div");
+            panel.className = `m-quill-tab-content`;
+            panel.setAttribute("data-index", index);
+            panel.innerHTML = tab.content;
+            panel.setAttribute(
+                "style",
+                `
+                display: ${index === 0 ? "block" : "none"};
+                min-height: 50px; 
+            `
+            );
+            panel.contentEditable = "false"; // 内容面板可编辑
+            contentList.appendChild(panel);
+        });
+
+        // 编辑按钮
+        const editBtn = document.createElement("button");
+        editBtn.className = "m-quill-tab-edit-btn";
+        editBtn.innerHTML = "编辑";
+        editBtn.setAttribute("data-action", "edit");
+        editBtn.setAttribute(
+            "style",
+            `
+          
+            padding: 10px;
+            margin-left: auto;
+            color: #606266;
+            cursor: pointer;
+            background: transparent;
+            border: none;
+            display:block;
+        `
+        );
+        //  display: flex;
+        //align-items: center;
+        // editBtn.onmouseover = () => {
+        //     editBtn.style.color = "#007bff";
+        // };
+        // editBtn.onmouseout = () => {
+        //     editBtn.style.color = "#606266";
+        // };
+        tabList.appendChild(editBtn);
+
+        // 标签页切换逻辑
+        const scriptTag = document.createElement("script");
+        // 修改 scriptTag.textContent 中的逻辑
+        scriptTag.textContent = `
+                (function() {
+                    const container = document.currentScript.parentElement;
+                    const isAdmin = window.location.pathname.includes('/admin');
+                    const editBtn1 = container.querySelector('.m-quill-tab-edit-btn'); 
+                    
+                    // 仅在非管理系统（文章网站）隐藏编辑按钮，管理系统保持显示
+                    if (!isAdmin && editBtn1) {
+                        editBtn1.style.display = 'none'; // 文章网站隐藏按钮
+                    } else if (isAdmin && editBtn1) {
+                        editBtn1.style.display = 'block'; // 管理系统强制显示按钮
+                    }
+                    
+                    // 非管理系统才执行标签切换逻辑（管理系统不执行）
+                    if (!isAdmin) {
+                        const tabButtons = container.querySelectorAll('.m-quill-tab-button:not([data-action])');
+                        const contentPanels = container.querySelectorAll('.m-quill-tab-content');
+                        tabButtons.forEach(btn => {
+                            btn.addEventListener('click', function() {
+                                const index = parseInt(this.dataset.index);
+                                tabButtons.forEach((b, i) => {
+                                    b.setAttribute('style', \`
+                                        padding: 10px 15px;
+                                        font-weight: 900;
+                                        cursor: pointer;
+                                        background: transparent;
+                                        font-size:16px;
+                                        margin-right: 60px;
+                                        color: #8f9099;
+                                        border: none;
+                                        \${i === index ? 
+                                            'color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;' : 
+                                            ''
+                                        }
+                                    \`);
+                                });
+                                contentPanels.forEach((panel, i) => {
+                                    panel.style.display = i === index ? 'block' : 'none';
+                                });
+                            });
+                        });
+                      }
+                    })();
+                  `;
+
+        node.appendChild(tabList);
+        node.appendChild(contentList);
+        node.appendChild(scriptTag);
+        node.setAttribute("contenteditable", "false");
+        return node;
+    }
+
+    bindEvents() {
+        if (!this.eventBoundElements) {
+            this.eventBoundElements = new WeakMap();
+        }
+
+        // 移除 eventBoundElements 依赖，直接重新绑定事件（避免弱映射导致的问题）
+        const editBtn = this.domNode.querySelector(".m-quill-tab-edit-btn");
+        if (editBtn) {
+            // 先移除旧事件，避免重复绑定
+            editBtn.removeEventListener("click", this.handleEditClick);
+            // 绑定新事件（使用箭头函数确保 this 指向正确）
+            this.handleEditClick = e => {
+                e.stopPropagation();
+                console.log("1232323");
+                this.domNode.dispatchEvent(
+                    new CustomEvent("edit-tabs", {
+                        bubbles: true,
+                        detail: { blot: this }
+                    })
+                );
+            };
+            editBtn.addEventListener("click", this.handleEditClick);
+        }
+
+        // 标签切换事件
+        const tabButtons = this.domNode.querySelectorAll(".m-quill-tab-button:not([data-action])");
+        tabButtons.forEach(btn => {
+            if (!this.eventBoundElements.has(btn)) {
+                btn.addEventListener("click", () => {
+                    const index = parseInt(btn.dataset.index, 10);
+                    this.selectTab(index);
+                });
+                this.eventBoundElements.set(btn, true);
+            }
+        });
+    }
+
+    // 增强版删除键处理
+    bindDeleteKeyEvent() {
+        // 阻止从外部删除整个组件
+        this.domNode.addEventListener(
+            "keydown",
+            e => {
+                if (e.key === "Backspace" || e.key === "Delete") {
+                    const selection = window.getSelection();
+                    if (!selection.rangeCount) return;
+
+                    const range = selection.getRangeAt(0);
+                    const parentBlock = this.domNode;
+
+                    // 判断光标是否在组件内部
+                    const isInside = parentBlock.contains(range.commonAncestorContainer);
+
+                    // 如果光标在组件外部，阻止删除
+                    if (!isInside) {
+                        e.preventDefault();
+                        return;
+                    }
+
+                    // 检查是否选中了整个组件
+                    if (
+                        range.startContainer === parentBlock &&
+                        range.endContainer === parentBlock &&
+                        range.startOffset === 0 &&
+                        range.endOffset >= parentBlock.childNodes.length
+                    ) {
+                        e.preventDefault(); // 阻止删除整个组件
+                    }
+                }
+            },
+            true
+        ); // 使用捕获阶段
+
+        // 标签栏禁止编辑
+        const tabList = this.domNode.querySelector(".m-quill-tab-list");
+        if (tabList) {
+            tabList.querySelectorAll("*").forEach(el => {
+                el.contentEditable = "false";
+            });
+        }
+    }
+
+    selectTab(index) {
+        const buttons = this.domNode.querySelectorAll(".m-quill-tab-button:not([data-action])");
+        const panels = this.domNode.querySelectorAll(".m-quill-tab-content");
+
+        buttons.forEach((btn, i) => {
+            btn.setAttribute(
+                "style",
+                `
+                padding: 10px 15px;
+                font-weight: 900;
+                cursor: pointer;
+                background: transparent;
+                border: none;
+                font-size:16px;
+                margin-right: 60px;
+                color: #8f9099;
+                border-bottom: 3px solid transparent;
+                ${i === index ? "color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
+            `
+            );
+        });
+
+        panels.forEach((panel, i) => {
+            panel.style.display = i === index ? "block" : "none";
+        });
+    }
+
+    static value(node) {
+        const tabs = [];
+        const buttons = node.querySelectorAll(".m-quill-tab-button:not([data-action])");
+        const panels = node.querySelectorAll(".m-quill-tab-content");
+
+        buttons.forEach((btn, i) => {
+            tabs.push({
+                title: btn.textContent,
+                content: panels[i]?.innerHTML || ""
+            });
+        });
+
+        return tabs;
+    }
+
+    update(mutations, context) {
+        super.update(mutations, context);
+        const scriptTag = this.domNode.querySelector("script");
+        if (scriptTag) {
+            const newScript = document.createElement("script");
+
+            newScript.textContent = scriptTag.textContent;
+            scriptTag.parentNode.replaceChild(newScript, scriptTag);
+        }
+        this.bindEvents();
+        this.bindDeleteKeyEvent(); // 重新绑定删除事件
+    }
+
+    getValue() {
+        return TabsBlot.value(this.domNode);
+    }
+
+    // 更新标签页数据（编辑后更新 DOM）
+    updateContents(tabs) {
+        // 清空原有内容
+        const contentList = this.domNode.querySelector(".m-quill-tab-content-list");
+        const tabList = this.domNode.querySelector(".m-quill-tab-list");
+        // 保留编辑按钮（如果需要）
+        const editBtn = this.domNode.querySelector(".m-quill-tab-edit-btn");
+        // 清空标签栏和内容区（保留编辑按钮）
+        Array.from(tabList.children).forEach(child => {
+            if (!child.classList.contains("m-quill-tab-edit-btn")) {
+                child.remove();
+            }
+        });
+        contentList.innerHTML = "";
+
+        // 重新渲染标签页（复用 create 方法中的逻辑）
+        tabs.forEach((tab, index) => {
+            // 重建标签按钮
+            const btn = document.createElement("button");
+            btn.className = "m-quill-tab-button";
+            btn.setAttribute("data-index", index);
+            btn.textContent = tab.title;
+            btn.setAttribute(
+                "style",
+                `
+              padding: 10px 15px;
+              font-weight: 900;
+              color: #8f9099;
+              cursor: pointer;
+              background: transparent;
+              border: none;
+              margin-right: 60px;
+              font-size:16px;
+              ${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
+          `
+            );
+            tabList.insertBefore(btn, editBtn); // 插入到编辑按钮前
+
+            // 重建内容面板
+            const panel = document.createElement("div");
+            panel.className = "m-quill-tab-content";
+            panel.setAttribute("data-index", index);
+            panel.innerHTML = tab.content;
+            panel.setAttribute(
+                "style",
+                `
+              display: ${index === 0 ? "block" : "none"};
+              min-height: 50px; 
+          `
+            );
+            panel.contentEditable = "false";
+            contentList.appendChild(panel);
+        });
+
+        // 重新绑定事件（确保切换功能正常）
+        this.bindEvents();
+    }
+}
+
+export default TabsBlot;

src/components/Editor/quill-tabs1.js

@@ -0,0 +1,287 @@
+import { Quill } from "@vueup/vue-quill";
+
+const BlockEmbed = Quill.import("blots/block/embed");
+
+class TabsBlot extends BlockEmbed {
+    static blotName = "tabs";
+    static tagName = "div";
+    static className = "quill-tabs";
+
+    constructor(domNode) {
+        super(domNode);
+        this.bindEvents();
+        this.bindDeleteKeyEvent(); // 绑定删除键事件
+    }
+
+    static create(value) {
+        const node = super.create(value);
+        const tabs = value || [];
+
+        // 主容器样式
+        node.setAttribute(
+            "style",
+            `
+            margin: 15px 0;
+            overflow: hidden;
+            border: 1px solid #dddddd;
+            border-radius: 4px;
+            position: relative;
+        `
+        );
+
+        // 标签栏
+        const tabList = document.createElement("div");
+        tabList.className = "quill-tab-list";
+        tabList.setAttribute(
+            "style",
+            `
+            display: flex;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #dddddd;
+        `
+        );
+
+        // 内容区
+        const contentList = document.createElement("div");
+        contentList.className = "quill-tab-content-list";
+        contentList.setAttribute(
+            "style",
+            `
+            padding: 15px;
+        `
+        );
+
+        // 生成标签按钮和内容面板
+        tabs.forEach((tab, index) => {
+            // 标签按钮
+            const btn = document.createElement("button");
+            btn.className = `quill-tab-button ${index === 0 ? "active" : ""}`;
+            btn.setAttribute("data-index", index);
+            btn.textContent = tab.title;
+            btn.setAttribute(
+                "style",
+                `
+                padding: 10px 15px;
+                font-weight: 500;
+                cursor: pointer;
+                background: transparent;
+                border: none;
+                transition: background-color 0.2s;
+                ${index === 0 ? "color: #007bff; background-color: white; border-bottom: 2px solid #007bff;" : ""}
+            `
+            );
+            tabList.appendChild(btn);
+
+            // 内容面板 - 关键修改：设置为可编辑
+            const panel = document.createElement("div");
+            panel.className = `quill-tab-content ${index === 0 ? "active" : ""}`;
+            panel.setAttribute("data-index", index);
+            panel.innerHTML = tab.content;
+            panel.setAttribute(
+                "style",
+                `
+                display: ${index === 0 ? "block" : "none"};
+                min-height: 50px; /* 确保有编辑区域 */
+            `
+            );
+            panel.contentEditable = "true"; // 内容面板可编辑
+            contentList.appendChild(panel);
+        });
+
+        // 编辑按钮
+        const editBtn = document.createElement("button");
+        editBtn.className = "quill-tab-edit-btn";
+        editBtn.innerHTML = "编辑";
+        editBtn.setAttribute("data-action", "edit");
+        editBtn.setAttribute(
+            "style",
+            `
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            margin-left: auto;
+            color: #606266;
+            cursor: pointer;
+            background: transparent;
+            border: none;
+        `
+        );
+        editBtn.onmouseover = () => {
+            editBtn.style.color = "#007bff";
+        };
+        editBtn.onmouseout = () => {
+            editBtn.style.color = "#606266";
+        };
+        tabList.appendChild(editBtn);
+        // 标签页切换逻辑
+        const scriptTag = document.createElement("script");
+        scriptTag.textContent = `
+            (function() {
+                const container = document.currentScript.parentElement;
+                const tabButtons = container.querySelectorAll('.quill-tab-button:not([data-action])');
+                const contentPanels = container.querySelectorAll('.quill-tab-content');
+                tabButtons.forEach(btn => {
+                    btn.addEventListener('click', function() {
+                        const index = parseInt(this.dataset.index);
+                        tabButtons.forEach((b, i) => {
+                            b.setAttribute('style', \`
+                                padding: 10px 15px;
+                                font-weight: 500;
+                                cursor: pointer;
+                                background: transparent;
+                                border: none;
+                                transition: background-color 0.2s;
+                                \${i === index ? 
+                                    'color: #007bff; background-color: white; border-bottom: 2px solid #007bff;' : 
+                                    ''
+                                }
+                            \`);
+                        });
+                        
+                        contentPanels.forEach((panel, i) => {
+                            panel.style.display = i === index ? 'block' : 'none';
+                        });
+                    });
+                });
+            })();
+        `;
+
+        // 组装结构 - 关键修改：移除contenteditable="false"
+        node.appendChild(tabList);
+        node.appendChild(contentList);
+        node.appendChild(scriptTag);
+
+        return node;
+    }
+
+    bindEvents() {
+        if (!this.eventBoundElements) {
+            this.eventBoundElements = new WeakMap();
+        }
+
+        // 编辑按钮事件
+        const editBtn = this.domNode.querySelector(".quill-tab-edit-btn");
+        if (editBtn && !this.eventBoundElements.has(editBtn)) {
+            editBtn.addEventListener("click", e => {
+                e.stopPropagation();
+                this.domNode.dispatchEvent(
+                    new CustomEvent("edit-tabs", {
+                        bubbles: true,
+                        detail: { blot: this }
+                    })
+                );
+            });
+            this.eventBoundElements.set(editBtn, true);
+        }
+
+        // 标签切换事件
+        const tabButtons = this.domNode.querySelectorAll(".quill-tab-button:not([data-action])");
+        tabButtons.forEach(btn => {
+            if (!this.eventBoundElements.has(btn)) {
+                btn.addEventListener("click", () => {
+                    const index = parseInt(btn.dataset.index, 10);
+                    this.selectTab(index);
+                });
+                this.eventBoundElements.set(btn, true);
+            }
+        });
+    }
+
+    // 增强版删除键处理
+    bindDeleteKeyEvent() {
+        // 阻止从外部删除整个组件
+        this.domNode.addEventListener(
+            "keydown",
+            e => {
+                if (e.key === "Backspace" || e.key === "Delete") {
+                    const selection = window.getSelection();
+                    if (!selection.rangeCount) return;
+
+                    const range = selection.getRangeAt(0);
+                    const parentBlock = this.domNode;
+
+                    // 判断光标是否在组件内部
+                    const isInside = parentBlock.contains(range.commonAncestorContainer);
+
+                    // 如果光标在组件外部，阻止删除
+                    if (!isInside) {
+                        e.preventDefault();
+                        return;
+                    }
+
+                    // 检查是否选中了整个组件
+                    if (
+                        range.startContainer === parentBlock &&
+                        range.endContainer === parentBlock &&
+                        range.startOffset === 0 &&
+                        range.endOffset >= parentBlock.childNodes.length
+                    ) {
+                        e.preventDefault(); // 阻止删除整个组件
+                    }
+                }
+            },
+            true
+        ); // 使用捕获阶段
+
+        // 标签栏禁止编辑
+        const tabList = this.domNode.querySelector(".quill-tab-list");
+        if (tabList) {
+            tabList.querySelectorAll("*").forEach(el => {
+                el.contentEditable = "false";
+            });
+        }
+    }
+
+    selectTab(index) {
+        const buttons = this.domNode.querySelectorAll(".quill-tab-button:not([data-action])");
+        const panels = this.domNode.querySelectorAll(".quill-tab-content");
+
+        buttons.forEach((btn, i) => {
+            btn.setAttribute(
+                "style",
+                `
+                padding: 10px 15px;
+                font-weight: 500;
+                cursor: pointer;
+                background: transparent;
+                border: none;
+                transition: background-color 0.2s;
+                ${i === index ? "color: #007bff; background-color: white; border-bottom: 2px solid #007bff;" : ""}
+            `
+            );
+        });
+
+        panels.forEach((panel, i) => {
+            panel.style.display = i === index ? "block" : "none";
+        });
+    }
+
+    static value(node) {
+        const tabs = [];
+        const buttons = node.querySelectorAll(".quill-tab-button:not([data-action])");
+        const panels = node.querySelectorAll(".quill-tab-content");
+
+        buttons.forEach((btn, i) => {
+            tabs.push({
+                title: btn.textContent,
+                content: panels[i].innerHTML
+            });
+        });
+
+        return { tabs };
+    }
+
+    update(mutations, context) {
+        super.update(mutations, context);
+        const scriptTag = this.domNode.querySelector("script");
+        if (scriptTag) {
+            const newScript = document.createElement("script");
+            newScript.textContent = scriptTag.textContent;
+            scriptTag.parentNode.replaceChild(newScript, scriptTag);
+        }
+        this.bindEvents();
+        this.bindDeleteKeyEvent(); // 重新绑定删除事件
+    }
+}
+
+export default TabsBlot;

src/components/Editor/quill-tabs222.js

@@ -0,0 +1,180 @@
+import { Quill } from "@vueup/vue-quill";
+
+const BlockEmbed = Quill.import("blots/block/embed");
+
+class TabsBlot extends BlockEmbed {
+    static blotName = "tabs";
+    static tagName = "div";
+    static className = "quill-tabs";
+
+    constructor(domNode) {
+        super(domNode);
+        this.bindEvents();
+    }
+
+    static create(value) {
+        const tabs = Array.isArray(value) ? value : [];
+        const node = super.create(value);
+
+        // 主容器样式
+        node.setAttribute(
+            "style",
+            `
+            margin: 15px 0;
+            overflow: hidden;
+            border: 1px solid #dddddd;
+            border-radius: 4px;
+            position: relative;
+        `
+        );
+
+        // 标签栏容器
+        const tabList = document.createElement("div");
+        tabList.className = "quill-tab-list";
+        tabList.style.cssText = `
+            display: flex;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #dddddd;
+        `;
+
+        // 内容区容器
+        const contentList = document.createElement("div");
+        contentList.className = "quill-tab-content-list";
+        contentList.style.cssText = "padding: 15px;";
+
+        // 生成标签和内容
+        tabs.forEach((tab, index) => {
+            // 标签按钮
+            const btn = document.createElement("button");
+            btn.className = `quill-tab-button ${index === 0 ? "active" : ""}`;
+            btn.dataset.index = index;
+            btn.textContent = tab.title || `标签${index + 1}`;
+            btn.style.cssText = `
+                padding: 10px 15px;
+                font-weight: 500;
+                cursor: pointer;
+                background: transparent;
+                border: none;
+                ${index === 0 ? "color: #007bff; background-color: white; border-bottom: 2px solid #007bff;" : ""}
+            `;
+            tabList.appendChild(btn);
+
+            // 内容面板
+            const panel = document.createElement("div");
+            panel.className = `quill-tab-content ${index === 0 ? "active" : ""}`;
+            panel.dataset.index = index;
+            panel.innerHTML = tab.content || "";
+            panel.style.display = index === 0 ? "block" : "none";
+            contentList.appendChild(panel);
+        });
+
+        // 编辑按钮
+        const editBtn = document.createElement("button");
+        editBtn.className = "quill-tab-edit-btn";
+        editBtn.textContent = "编辑";
+        editBtn.dataset.action = "edit";
+        editBtn.style.cssText = `
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            margin-left: auto;
+            color: #606266;
+            cursor: pointer;
+            background: transparent;
+            border: none;
+        `;
+        editBtn.onmouseover = () => (editBtn.style.color = "#007bff");
+        editBtn.onmouseout = () => (editBtn.style.color = "#606266");
+        tabList.appendChild(editBtn);
+
+        // 组装DOM
+        node.appendChild(tabList);
+        node.appendChild(contentList);
+        node.contentEditable = "false";
+
+        return node;
+    }
+
+    // 改进的事件绑定方法，避免重复绑定
+    bindEvents() {
+        // 使用WeakMap存储已绑定的元素，避免重复绑定
+        if (!this.eventBoundElements) {
+            this.eventBoundElements = new WeakMap();
+        }
+
+        // 编辑按钮事件
+        const editBtn = this.domNode.querySelector(".quill-tab-edit-btn");
+        if (editBtn && !this.eventBoundElements.has(editBtn)) {
+            editBtn.addEventListener("click", e => {
+                e.stopPropagation();
+                this.domNode.dispatchEvent(
+                    new CustomEvent("edit-tabs", {
+                        bubbles: true,
+                        detail: { blot: this }
+                    })
+                );
+            });
+            this.eventBoundElements.set(editBtn, true);
+        }
+
+        // 标签切换事件
+        const tabButtons = this.domNode.querySelectorAll(".quill-tab-button:not([data-action])");
+        tabButtons.forEach(btn => {
+            if (!this.eventBoundElements.has(btn)) {
+                btn.addEventListener("click", () => {
+                    const index = parseInt(btn.dataset.index, 10);
+                    this.selectTab(index);
+                });
+                this.eventBoundElements.set(btn, true);
+            }
+        });
+    }
+
+    // 移除了有问题的unbindEvents方法
+
+    selectTab(index) {
+        const buttons = this.domNode.querySelectorAll(".quill-tab-button:not([data-action])");
+        const panels = this.domNode.querySelectorAll(".quill-tab-content");
+
+        if (index < 0 || index >= buttons.length) return;
+
+        // 更新按钮样式
+        buttons.forEach((btn, i) => {
+            btn.style.cssText = `
+                padding: 10px 15px;
+                font-weight: 500;
+                cursor: pointer;
+                background: transparent;
+                border: none;
+                ${i === index ? "color: #007bff; background-color: white; border-bottom: 2px solid #007bff;" : ""}
+            `;
+        });
+
+        // 更新内容面板显示
+        panels.forEach((panel, i) => {
+            panel.style.display = i === index ? "block" : "none";
+        });
+    }
+
+    static value(node) {
+        const tabs = [];
+        const buttons = node.querySelectorAll(".quill-tab-button:not([data-action])");
+        const panels = node.querySelectorAll(".quill-tab-content");
+
+        buttons.forEach((btn, i) => {
+            tabs.push({
+                title: btn.textContent,
+                content: panels[i]?.innerHTML || ""
+            });
+        });
+
+        return tabs;
+    }
+
+    update(mutations, context) {
+        super.update(mutations, context);
+        this.bindEvents();
+    }
+}
+
+export default TabsBlot;

src/components/Editor/quill-video.js

@@ -57,7 +57,7 @@ class Video extends BlockEmbed {
         return `<a href="${video}">${video}</a>`;
     }
 }
-Video.blotName = "video"; // 这里不用改，不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
+Video.blotName = "customVideo"; // 这里不用改，不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
 Video.className = "ql-video"; // 可添加样式，看实际使用需要
 Video.tagName = "video"; // 用video标签替换iframe
 

src/components/FormTable/index.vue

@@ -28,7 +28,7 @@
                     </template>
                     <template #default="scope" v-if="item.formType === 'inputNumber'">
                         <el-input-number
-                            :min="1"
+                            :min="0"
                             :max="9999"
                             :controls="true"
                             style="width: 125px"

src/components/Upload/UploadImg.vue

@@ -119,9 +119,9 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
         const api = props.api ?? uploadImg;
 
         const result = await api(formData, routerName.value);
-        if (result?.code === 0) {
+        console.log(result, "============>>>");
-            const { data } = result;
+        if (result?.data?.code === 0) {
-            emit("update:imageUrl", data.path);
+            emit("update:imageUrl", result?.data?.data.path);
         }
 
         // 调用 el-form 内部的校验方法（可自动校验）

src/components/Upload/UploadImgs.vue

@@ -134,9 +134,10 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
     formData.append("image", options.file);
     try {
         const api = props.api ?? uploadImg;
+
         const { data } = await api(formData, routerName.value);
-        console.log(data.path, "========data==========");
+        console.log(data.data.path, "========data==========");
-        options.onSuccess(data.path);
+        options.onSuccess(data.data.path);
     } catch (error) {
         options.onError(error as any);
     }

src/components/rulesForm/index.vue

@@ -53,7 +53,7 @@
                 </template>
                 <template v-if="item.type === 'inputNumber'">
                     <el-input-number
-                        :min="1"
+                        :min="0"
                         :max="9999"
                         :controls="true"
                         v-model="_ruleForm[`${item.prop}`]"
@@ -178,7 +178,7 @@
                     <slot />
                 </template>
                 <template v-if="item.type === 'WangEditor'">
-                    <Editor v-model:content="_ruleForm[`${item.prop}`]"></Editor>
+                    <Editor v-model:content="_ruleForm[`${item.prop}`]" ref="editorRef"></Editor>
                 </template>
             </el-form-item>
         </template>
@@ -209,7 +209,7 @@ const emits = defineEmits<{
     (e: "handleRadioGroupEmits", result?: any): void;
     (e: "handleTreesSelectChangeEmits", result?: any): void;
 }>();
-
+const editorRef = ref<any>(null);
 const ruleFormRef = ref<FormInstance>();
 const props = defineProps<IProps>();
 //本地化处理,props是单向的,通过本地化就可以改变父组件传过来的值了
@@ -235,7 +235,8 @@ const handleRadioGroup = (value: any) => {
 // 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
 defineExpose({
     ruleForm: _ruleForm,
-    ruleFormRef: ruleFormRef
+    ruleFormRef: ruleFormRef,
+    editorRef: editorRef
 });
 </script>
 

src/styles/element.scss

@@ -271,5 +271,5 @@
     white-space: nowrap;
 }
 .el-message__wrapper {
-    z-index: 9999 !important; /* 一个较大的值，确保在抽屉之上 */
+    z-index: 3000 !important; /* 一个较大的值，确保在抽屉之上 */
 }

src/views/QAManagement/list/edit.vue

@@ -20,7 +20,7 @@
 
                 <el-tab-pane label="问答详细" name="third">
                     <div style="width: 1280px; margin: 0 auto">
-                        <Editor v-model:content="dataStore.editRuleForm.answer" />
+                        <Editor v-model:content="dataStore.editRuleForm.answer" ref="editorRef" />
                     </div>
                 </el-tab-pane>
             </el-tabs>
@@ -47,6 +47,7 @@ const dataStore = reactive<any>({
     rules: RULES
 });
 const formRef: any = ref(null);
+const editorRef = ref<any>(null);
 //详情
 const getQAListDetails = async () => {
     let id = $route.query.id;
@@ -58,6 +59,9 @@ const getQAListDetails = async () => {
         const { data } = result;
         //这里是传给基本信息组件的表单数据
         dataStore.editRuleForm = cloneDeep(data);
+        if (!data.answer) {
+            editorRef?.value?.clearEditor();
+        }
         // dataStore.editRuleForm.answer = convertSpanToDiv(dataStore.editRuleForm.answer);
 
         dataStore.value = data.answer;
@@ -93,9 +97,11 @@ const handleReset = () => {
 const resetFields = () => {
     if (!formRef.value!.ruleFormRef) return;
     formRef!.value!.ruleFormRef.resetFields();
+    editorRef?.value?.clearEditor();
     for (let key in dataStore.editRuleForm) {
         dataStore.editRuleForm[key] = "";
     }
+    dataStore.editRuleForm.sort = 0;
     // dataStore.value = "";
 };
 

src/views/articleManagement/class/constant/edit.ts

@@ -53,13 +53,19 @@ export const EDIT_FORM_DATA: FormItem[] = [
         type: "treeSelect",
         label: "所属分类: ",
         options: []
+    },
+    {
+        prop: "icon",
+        type: "upImg",
+        label: "图片: "
     }
 ];
 export const EDIT_RULE_FORM = {
     is_show: 1,
-    sort: 1,
+    sort: 0,
     name: "",
-    pid: 0
+    pid: 0,
+    icon: ""
 };
 // editRuleForm: {},
 //editFormData: [],

src/views/articleManagement/class/index.vue

@@ -76,6 +76,7 @@
 
 <script setup lang="ts" name="articleClassListIndex">
 import rulesForm from "@/components/rulesForm/index.vue";
+import SearchForm from "@/components/SearchForm/index.vue";
 import { integerRexg } from "@/utils/regexp/index";
 import { addLabelValue } from "@/utils/addLabelValue";
 import { h } from "@/utils/url";
@@ -174,7 +175,6 @@ const getArticleClassAddSave = async () => {
 };
 //文章编辑
 const getArticleClassUpEdit = async () => {
-    console.log("编辑");
     const result = await getArticleClassEditUpApi(dataStore.editRuleForm);
     const { msg, code } = result;
 

src/views/articleManagement/list/edit.vue

@@ -20,7 +20,7 @@
 
                 <el-tab-pane label="详细内容" name="third">
                     <div style="width: 1280px; margin: 0 auto">
-                        <Editor v-model:content="dataStore.editRuleForm.content"></Editor>
+                        <Editor v-model:content="dataStore.editRuleForm.content" ref="editorRef"></Editor>
                     </div>
                 </el-tab-pane>
             </el-tabs>
@@ -47,7 +47,7 @@ import { useMsg } from "@/hooks/useMsg";
 const formRef = ref<any>(null);
 const activeName = ref("basicInfo");
 const $route = useRoute();
-
+const editorRef = ref<any>(null);
 //数据集合
 const dataStore = reactive<any>({
     rules: cloneDeep(RULES), //抽屉表单验证
@@ -79,6 +79,9 @@ const getArticleListDetails = async () => {
     if (result?.code === 0) {
         const { data } = result;
         dataStore.editRuleForm = data;
+        if (!data.content) {
+            editorRef?.value?.clearEditor(); // 调用子组件的清空方法
+        }
         // dataStore.editRuleForm.content = convertSpanToDiv(dataStore.editRuleForm.content);
         let is = dataStore.editFormData[1].options.some((item: any) =>
             recursiveCompare(item, dataStore.editRuleForm.category_id)
@@ -148,6 +151,13 @@ const handleConfirmClick = () => {
 const handleReset = () => {
     if ($route.query.type === "add") {
         dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+        editorRef?.value?.clearEditor(); // 调用子组件的清空方法
+        //     if (!data.detail) {
+        //     dataStore.detail = "";
+        //     editorRef.value.clearEditor(); // 调用子组件的清空方法
+        // } else {
+        //     dataStore.detail = cloneDeep(data.detail);
+        // }
     } else {
         getArticleListDetails();
     }

src/views/bannerManagement/list/index.vue

@@ -121,6 +121,7 @@ const dataStore = reactive<any>({
     formData: FORM_DATA, // 搜索配置项 dataStore.formData
     visible: false,
     data: [],
+    type: "image",
     isFirstRequest: true
 });
 
@@ -140,6 +141,7 @@ const getProductCategoryList = async () => {
     const result = await getProductCategoryListApi();
     if (result?.code === 0) {
         let dataClone: any = cloneDeep(result?.data);
+        console.log(dataClone, "=dataClone=");
         dataStore.editFormData[7].options = addLabelValue(dataClone);
     }
 };
@@ -164,6 +166,7 @@ const buildTree = (data: any, outerLinkTo: any = "") => {
 };
 // let isFirstRequest = true;
 const handleRadioGroupEmits = (value: any) => {
+    dataStore.type = value;
     if (value === "video") {
         dataStore.editFormData = EDIT_FORM_DATA1;
         dataStore.rules = RULES1;
@@ -205,6 +208,7 @@ const getSystemUrls = async (node: any, resolve: any) => {
     }
 };
 const setImgOrVideo = (result: any) => {
+    dataStore.type = result?.data?.type;
     if (result?.data?.type === "image") {
         dataStore.editFormData = cloneDeep(EDIT_FORM_DATA);
     }
@@ -224,6 +228,9 @@ const getBannerRead = async (id: any) => {
     if (result?.code === 0) {
         setImgOrVideo(result);
         getProductCategoryList();
+        if (result?.data?.type === "image" && !result?.data?.desc) {
+            formRef?.value?.editorRef[0]?.clearEditor();
+        }
         nextTick(() => {
             dataStore.editRuleForm = result?.data;
             if (dataStore.editRuleForm.link && dataStore.editRuleForm.link_to) {
@@ -231,7 +238,6 @@ const getBannerRead = async (id: any) => {
                 if (!id || !name || !link) {
                     return;
                 }
-                console.log("1232323");
                 let obj: any = {
                     label: name, // 确保这里的name是你想要显示的文本
                     value: `${dataStore.editRuleForm.link_to}` + "/" + `${id}` + "/" + `${name}`,
@@ -249,6 +255,7 @@ const getBannerRead = async (id: any) => {
 };
 const handleCheck = (checkedNodes: any, values: any) => {
     const { checkedKeys } = values;
+    console.log(checkedKeys, "=checkedKeys=");
     if (checkedKeys.length) {
         dataStore.editRuleForm.link = checkedNodes.url;
         dataStore.editRuleForm.link_to = checkedNodes.link_to;
@@ -331,6 +338,9 @@ const handleConfirmClick = () => {
 const resetFields = () => {
     if (!formRef.value!.ruleFormRef) return;
     formRef!.value!.ruleFormRef.resetFields();
+    if (dataStore.type === "image") {
+        formRef?.value?.editorRef[0]?.clearEditor();
+    }
 };
 // 抽屉重置
 const handleResetClick = () => {

src/views/downloadManagement/list/edit.vue

@@ -61,7 +61,7 @@ const $route = useRoute();
 import { getCategorysApi } from "@/api/modules/downloadClass";
 import { recursiveCompare } from "@/utils/recursiveCompare";
 import { addLabelValue } from "@/utils/addLabelValue";
-
+import { ElNotification } from "element-plus";
 //深拷贝方法
 import { cloneDeep } from "lodash-es";
 import {
@@ -156,7 +156,6 @@ const excelUploadSuccess = (response: any, row: any) => {
     if (response?.code === 0) {
         row.file_path = response.data.path; // 假设后端返回的文件路径在 data.path 中
     }
-    console.log(row, "====row========");
     ElNotification({
         title: "温馨提示",
         message: `文件上传成功！`,

src/views/login/index.vue

@@ -36,25 +36,25 @@
                                 autocomplete="off"
                             />
                             <!-- <div
-                                style="
+                              style="
-                                    width: 350px;
+                                  width: 350px;
-                                    font-size: 12px;
+                                  font-size: 12px;
-                                    line-height: 1;
+                                  line-height: 1;
-                                    color: #4178d5;
+                                  color: #4178d5;
-                                    text-align: right;
+                                  text-align: right;
-                                    cursor: pointer;
+                                  cursor: pointer;
-                                "
+                              "
-                                @click="handleTabClick(2)"
+                              @click="handleTabClick(2)"
-                            >
+                          >
-                                忘记密码?
+                              忘记密码?
-                            </div> -->
+                          </div> -->
                         </el-form-item>
                         <!-- <el-form-item prop="captcha">
-                            <span style="margin-right: 10px; color: #606266">验证码</span>
+                          <span style="margin-right: 10px; color: #606266">验证码</span>
-                            <el-input v-model="dataStore.ruleForm.captcha" style="width: 80px" autocomplete="off" />
+                          <el-input v-model="dataStore.ruleForm.captcha" style="width: 80px" autocomplete="off" />
-                            <img :src="dataStore.base64" style="width: 150px; height: 60px; margin: 0 6px" />
+                          <img :src="dataStore.base64" style="width: 150px; height: 60px; margin: 0 6px" />
-                            <el-button type="primary" v-debounce="getLoginCodeImg">刷新</el-button>
+                          <el-button type="primary" v-debounce="getLoginCodeImg">刷新</el-button>
-                        </el-form-item> -->
+                      </el-form-item> -->
                         <el-form-item>
                             <el-button
                                 size="large"

src/views/login/index2.vue

@@ -0,0 +1,291 @@
+<template>
+    <div class="main">
+        <div class="container">
+            <div class="left">
+                <div class="left-logo-box"></div>
+            </div>
+            <!-- 登录 -->
+            <div class="right" v-if="dataStore.type === 1">
+                <div class="right-logo-box">
+                    <div>
+                        <div class="right-logo-font">登录</div>
+                        <div class="sign-in">Sign in</div>
+                    </div>
+                </div>
+
+                <div style="margin-left: 100px">
+                    <el-form
+                        ref="ruleFormRef"
+                        style="width: 300px"
+                        :model="dataStore.ruleForm"
+                        :rules="dataStore.rules"
+                        label-width="auto"
+                        label-position="top"
+                        class="demo-ruleForm"
+                        hide-required-asterisk
+                    >
+                        <el-form-item label="账号" prop="username">
+                            <el-input v-model="dataStore.ruleForm.username" :prefix-icon="Iphone" autocomplete="off" />
+                        </el-form-item>
+                        <el-form-item label="密码" prop="password">
+                            <el-input
+                                v-model="dataStore.ruleForm.password"
+                                type="password"
+                                show-password
+                                :prefix-icon="Lock"
+                                autocomplete="off"
+                            />
+                            <!-- <div
+                                style="
+                                    width: 350px;
+                                    font-size: 12px;
+                                    line-height: 1;
+                                    color: #4178d5;
+                                    text-align: right;
+                                    cursor: pointer;
+                                "
+                                @click="handleTabClick(2)"
+                            >
+                                忘记密码?
+                            </div> -->
+                        </el-form-item>
+                        <!-- <el-form-item prop="captcha">
+                            <span style="margin-right: 10px; color: #606266">验证码</span>
+                            <el-input v-model="dataStore.ruleForm.captcha" style="width: 80px" autocomplete="off" />
+                            <img :src="dataStore.base64" style="width: 150px; height: 60px; margin: 0 6px" />
+                            <el-button type="primary" v-debounce="getLoginCodeImg">刷新</el-button>
+                        </el-form-item> -->
+                        <el-form-item>
+                            <el-button
+                                size="large"
+                                type="primary"
+                                style="width: 100px; height: 36px; border-radius: 2px; box-shadow: 2px 5px 16px #4178d5"
+                                v-debounce="submitForm"
+                                >登录</el-button
+                            >
+                        </el-form-item>
+                    </el-form>
+                </div>
+            </div>
+            <!--忘记密码 -->
+            <div class="right" v-if="dataStore.type === 2">
+                <div style="margin-left: 100px">
+                    <el-button
+                        type="primary"
+                        :icon="ArrowLeftBold"
+                        circle
+                        style="margin: 60px 0 20px"
+                        @click="handleTabClick(1)"
+                    />
+                    <el-form
+                        ref="resetRuleFormRef"
+                        :model="dataStore.resetRuleForm"
+                        :rules="dataStore.resetRules"
+                        label-width="auto"
+                        label-position="top"
+                        class="demo-ruleForm"
+                        hide-required-asterisk
+                    >
+                        <el-form-item label="手机号" prop="iphone">
+                            <el-input v-model="dataStore.resetRuleForm.iphone" :prefix-icon="Iphone" autocomplete="off" />
+                        </el-form-item>
+                        <el-form-item prop="code" label="验证码">
+                            <el-input v-model="dataStore.resetRuleForm.code" autocomplete="off">
+                                <template #append>
+                                    <div style="font-size: 14px; color: #4178d5; cursor: pointer" v-debounce="handleGetCode">
+                                        {{ dataStore.codeFont }}
+                                    </div>
+                                    <div v-if="dataStore.isShowTime" style="margin: 0 5px; font-size: 14px; color: #4178d5">
+                                        {{ dataStore.timeCount }}s
+                                    </div>
+                                </template>
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label="新密码" prop="newPassword">
+                            <el-input
+                                v-model="dataStore.resetRuleForm.newPassword"
+                                type="password"
+                                show-password
+                                :prefix-icon="Lock"
+                                autocomplete="off"
+                            />
+                        </el-form-item>
+                        <el-form-item label="确认密码" prop="confirmPassword">
+                            <el-input
+                                v-model="dataStore.resetRuleForm.confirmPassword"
+                                type="password"
+                                show-password
+                                :prefix-icon="Lock"
+                                autocomplete="off"
+                            />
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button
+                                size="large"
+                                type="primary"
+                                style="width: 100px; height: 36px; border-radius: 2px; box-shadow: 2px 5px 16px #4178d5"
+                                v-debounce="resetConfirmForm"
+                                >提交</el-button
+                            >
+                        </el-form-item>
+                    </el-form>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import CryptoJS from "crypto-js";
+//loginCodeImgApi
+import { loginApi } from "@/api/modules/login";
+import { Iphone, Lock, ArrowLeftBold } from "@element-plus/icons-vue";
+import { RULES, RULE_FORM, RESET_RULES, RESET_RULE_FORM } from "./constant/index";
+import { cloneDeep } from "lodash-es";
+//用户信息存储
+import { useUserStore } from "@/stores/modules/user";
+const userStore = useUserStore();
+const $router = useRouter();
+//登录表单Ref
+const ruleFormRef: any = ref(null);
+//修改密码表单Ref
+const resetRuleFormRef: any = ref(null);
+//数据源
+const dataStore = reactive<any>({
+    timeCount: 120, //修改密码里验证码倒计时
+    isShowTime: false,
+
+    base64: "", //验证码图片
+    type: 1, //1:登录,2:修改密码
+    codeFont: "获取验证码", //修改密码里的验证码按钮文字
+    ruleForm: cloneDeep(RULE_FORM), //登录表单数据
+    rules: cloneDeep(RULES), //登录表单验证
+    resetRuleForm: cloneDeep(RESET_RULE_FORM), //修改密码表单数据
+    resetRules: cloneDeep(RESET_RULES) //修改密码表单验证
+});
+//计时器
+let intervalId: any = null;
+
+//登录
+const submitForm = () => {
+    console.log(ruleFormRef);
+    if (!ruleFormRef) return;
+    ruleFormRef?.value?.validate((valid: any) => {
+        if (valid) {
+            login();
+        } else {
+            console.log("error submit!");
+        }
+    });
+};
+//忘记密码提交事件
+const resetConfirmForm = () => {
+    if (!resetRuleFormRef) return;
+    resetRuleFormRef?.value?.validate((valid: any) => {
+        if (valid) {
+            let password = CryptoJS.MD5(dataStore.ruleForm.password)?.toString();
+            console.log(password, "==== dataStore.ruleForm.password====");
+            console.log("submit!");
+        } else {
+            console.log("error submit!");
+        }
+    });
+};
+//登录接口
+const login = async () => {
+    const result: any = await loginApi({
+        ...dataStore.ruleForm,
+        password: CryptoJS?.MD5(dataStore.ruleForm.password)?.toString()
+    });
+
+    if (result?.code === 0) {
+        const { data } = result;
+        setUserData(data);
+    }
+    // else {
+    //     getLoginCodeImg();
+    // }
+};
+//获取验证码图片接口
+// const getLoginCodeImg = async () => {
+//     const result: any = await loginCodeImgApi();
+//     if (result?.code === 0) {
+//         const { data } = result;
+//         const { captcha, token } = data;
+//         dataStore.base64 = captcha;
+//         dataStore.ruleForm.token = token;
+//     }
+// };
+// getLoginCodeImg();
+//登录和密码重置切换
+const handleTabClick = (type: any) => {
+    dataStore.type = type;
+    for (let key in dataStore.ruleForm) {
+        dataStore.ruleForm[key] = "";
+    }
+    for (let key in dataStore.resetRuleForm) {
+        dataStore.resetRuleForm[key] = "";
+    }
+    if (intervalId) {
+        handleClearInterval();
+        dataStore.timeCount = 120;
+        dataStore.isShowTime = false;
+    }
+};
+//120秒验证时间
+const updateCountdown = () => {
+    intervalId = setInterval(() => {
+        if (dataStore.timeCount > 0) {
+            dataStore.isShowTime = true;
+            dataStore.timeCount--;
+        } else {
+            handleClearInterval();
+            dataStore.timeCount = 120;
+            dataStore.isShowTime = false;
+        }
+    }, 1000);
+};
+//获取验证码
+const handleGetCode = () => {
+    //如果计时器已经启动了,就不要再去触发了
+    if (intervalId) {
+        return;
+    }
+    resetRuleFormRef.value.validateField("iphone", (valid: any) => {
+        if (valid) {
+            updateCountdown();
+        } else {
+        }
+    });
+};
+//清理定时器
+const handleClearInterval = () => {
+    clearInterval(intervalId);
+    intervalId = null;
+};
+
+// 设置用户数据
+const setUserData = (data: any) => {
+    const { username, uid, token, avatar } = data;
+    console.log();
+    // 设置token
+    userStore.setToken("Bearer" + " " + token);
+    userStore.setUid(uid);
+    userStore.setNickname(username);
+    userStore.setAvatar(avatar);
+    // await userStore.getAuthMenuList();
+    //跳转到首页
+    setTimeout(() => {
+        $router.push("/admin/index");
+    }, 500);
+};
+
+onUnmounted(() => {
+    //页面卸载的时候清空定时器
+    if (intervalId) {
+        handleClearInterval();
+    }
+});
+</script>
+<style lang="scss">
+@import "./index.scss";
+</style>

src/views/productManagement/list/components/basicInfo.vue

@@ -38,7 +38,7 @@
                 <!-- <el-input v-model="_ruleFormParam.sort" /> -->
 
                 <el-input-number
-                    :min="1"
+                    :min="0"
                     :max="9999"
                     :controls="true"
                     v-model="_ruleFormParam.sort"

src/views/productManagement/list/edit.vue

@@ -3,7 +3,7 @@
 
     <div class="table-box">
         <div style="padding-bottom: 16px">
-            <el-button @click="handleReset(dataStore)"> 重置 </el-button>
+            <el-button @click="handleReset(dataStore, editorRef)"> 重置 </el-button>
             <el-button type="primary" @click="handleSubmit(infoRef, imgInfoRef, dataStore)"> 提交 </el-button>
         </div>
         <div class="card table-main">
@@ -16,7 +16,7 @@
                 </el-tab-pane>
                 <el-tab-pane label="产品详情" name="third">
                     <div style="width: 1280px; margin: 0 auto">
-                        <Editor v-model:content="dataStore.detail" />
+                        <Editor v-model:content="dataStore.detail" ref="editorRef" />
                     </div>
                 </el-tab-pane>
                 <el-tab-pane label="相关信息" name="related">
@@ -65,6 +65,9 @@ import imgInfo from "./components/imgInfo.vue";
 import FormTable from "@/components/FormTable/index.vue";
 
 const $route = useRoute();
+
+const editorRef = ref<any>(null);
+
 //数据集合
 const dataStore = reactive<any>({
     relatedColumns: cloneDeep(RELATED_INFO_COLUMNS), //相关信息及下载表格配置
@@ -94,7 +97,7 @@ const getProductDetails = async () => {
     if (result?.code === 0) {
         const { data } = result;
         //参数初始化(将参数按照不同的tab区分出来)
-        initDetailParams(dataStore, data);
+        initDetailParams(dataStore, data, editorRef);
     }
 };
 getProductDetails();

src/views/productManagement/list/utils/edit/initDetailParams.ts

@@ -16,7 +16,7 @@ const hasIdRecursive = (data: any, targetId: any) => {
 };
 
 //将参数分离
-export const initDetailParams = (dataStore: any, data: any) => {
+export const initDetailParams = (dataStore: any, data: any, editorRef: any) => {
     let is = hasIdRecursive(dataStore.options, data.category_id);
     //基本信息
     dataStore.basicInfoRuleForm = cloneDeep({
@@ -40,9 +40,17 @@ export const initDetailParams = (dataStore: any, data: any) => {
         stock_qty: data.stock_qty,
         id: data.id
     });
+    console.log(data.detail, "=======detail========");
+
     //详情
-    dataStore.detail = cloneDeep(data.detail);
+    if (!data.detail) {
-    //dataStore.detail = convertSpanToDiv(dataStore.detail);
+        dataStore.detail = "";
+        editorRef?.value?.clearEditor(); // 调用子组件的清空方法
+    } else {
+        dataStore.detail = data.detail;
+        // console.log(dataStore.detail, "=dataStore.detail=");
+    }
+
     //图片
     dataStore.imgInfoData.cover_image = data.cover_image;
     dataStore.imgInfoData.video_url = data.video_url;

src/views/productManagement/list/utils/edit/reset.ts

@@ -4,19 +4,19 @@ import { messageBox } from "@/utils/messageBox";
 // import { cloneDeep } from "lodash-es";
 import { initDetailParams } from "./initDetailParams";
 //详情(重置,重新获取一下详情)
-const getProductDetails = async (dataStore: any) => {
+const getProductDetails = async (dataStore: any, editorRef: any) => {
     const { id } = dataStore.basicInfoRuleForm;
     const result = await getProductDetailsApi(id);
     if (result?.code === 0) {
         const { data } = result;
 
-        initDetailParams(dataStore, data);
+        initDetailParams(dataStore, data, editorRef);
         useMsg("success", "重置成功 !");
     }
 };
 
-export const handleReset = (dataStore: any) => {
+export const handleReset = (dataStore: any, editorRef?: any) => {
     messageBox("该操作会将数据重置为初始状态", () => {
-        getProductDetails(dataStore);
+        getProductDetails(dataStore, editorRef);
     });
 };