feat: 🚀 tabs

src/components/Editor/index.vue

@@ -29,8 +29,8 @@
         <QuillEditor
             id="mainEditor"
             ref="myQuillEditor"
-            v-model:content="editorContent"
             contentType="html"
+            v-model:content="editorContent"
             @update:content="onContentChange"
             :options="options"
         />
@@ -53,6 +53,7 @@
                 editable
                 @edit="handleTabsEdit"
                 @tab-change="handleTabChange"
+                v-if="tabsData.length"
             >
                 <!-- 标签页：标题支持编辑 -->
                 <el-tab-pane
@@ -76,6 +77,7 @@
                                 @keydown.backspace.stop
                                 v-else
                                 v-model="item.title"
+                                max-length=""
                                 :ref="el => (editInputRefs[index] = el)"
                                 size="small"
                                 class="title-input"
@@ -111,9 +113,10 @@
 <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";
+// /computed
+import { getCurrentInstance, reactive, ref, toRaw, onMounted, nextTick } from "vue";
 import { generateUUID } from "@/utils";
-import { h } from "@/utils/url";
+// import { h } from "@/utils/url";
 import { routerObj } from "./utils.js";
 import { titleConfig } from "./titleConfig.js";
 import { uploadVideo, uploadImg } from "@/api/modules/upload";
@@ -125,7 +128,7 @@ 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
+// 自定义Blot;
 import ImageBlot from "./quill-image";
 import Video from "./quill-video";
 import TabsBlot from "./quill-tabs";
@@ -150,7 +153,7 @@ const activeEditor = ref("main"); // 跟踪当前活跃编辑器：main/tab-索
 // 标签页数据（新增key作为唯一标识，isEditing控制编辑状态）
 const tabsData = ref([]);
 // 标签页编辑器ref数组
-const tabEditors = ref([]);
+const tabEditors = reactive([]);
 // 标题编辑输入框的ref
 const editInputRefs = ref([]);
 const currentEditingTabsRef = ref(null);
@@ -163,7 +166,9 @@ const props = defineProps({
 
 // 主编辑器内容双向绑定
 const editorContent = computed({
-    get: () => props.content,
+    get: () => {
+        return props.content;
+    },
     set: val => {
         emit("update:content", val);
     }
@@ -174,6 +179,7 @@ const myQuillEditor = ref(null); // 主编辑器ref
 const options = reactive({
     theme: "snow",
     debug: "warn",
+    strict: false,
     modules: {
         toolbar: {
             container: [
@@ -300,14 +306,14 @@ const handleHttpUpload = async options => {
                     quill = rawQuillEditor.getQuill();
                 } else {
                     const tabIndex = parseInt(activeEditor.value.split("-")[1]);
-                    rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
+                    rawQuillEditor = toRaw(tabEditors[tabIndex]);
                     quill = rawQuillEditor.getQuill();
                 }
 
                 imageListDb.value.forEach(item => {
                     const length = quill.getLength() - 1;
                     quill.insertEmbed(length, "customImage", {
-                        url: h + item.path,
+                        url: item.path,
                         id: item.serverImgId || generateUUID()
                     });
                     quill.setSelection(length + 1);
@@ -328,33 +334,127 @@ const handleHttpUpload = async options => {
 };
 
 // 视频上传（保持不变）
+// 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: data.path,
+//             id: generateUUID()
+//         });
+//         uploadFileVideo.value.value = "";
+//     } catch (error) {
+//         console.log(error);
+//     }
+// };
+// 在<script setup>中替换handleVideoUpload方法
 const handleVideoUpload = async evt => {
     if (evt.target.files.length === 0) return;
-    const formData = new FormData();
+    const file = evt.target.files[0];
-    formData.append("video", evt.target.files[0]);
+
-    try {
+    // 1. 校验视频文件
-        let rawQuillEditor = "";
+    const maxSize = props.fileSizeLimit * 1024 * 1024 * 15;
-        let quill = "";
+    if (file.size > maxSize) {
-        if (activeEditor.value === "main") {
+        ElNotification({
-            rawQuillEditor = toRaw(myQuillEditor.value);
+            title: "文件过大",
-            quill = rawQuillEditor.getQuill();
+            message: `视频大小不能超过 ${props.fileSizeLimit}MB`,
-        } else {
+            type: "warning"
-            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 = "";
+        return;
+    }
+
+    // 2. 生成视频本地URL（用于生成封面，不上传）
+    const localVideoUrl = URL.createObjectURL(file);
+
+    try {
+        // 4. 并行处理：上传视频 + 生成并上传封面
+        // 4.1 上传视频到视频服务器
+        const videoFormData = new FormData();
+        videoFormData.append("video", file);
+        const videoRes = await uploadVideo(videoFormData); // 视频上传接口
+
+        // 校验视频上传结果（根据你的接口返回格式调整）
+        if (videoRes?.code !== 0) {
+            throw new Error(`视频上传失败: ${videoRes?.message || "未知错误"}`);
+        }
+        const videoUrl = videoRes.data.path; // 服务器返回的视频URL
+        console.log(localVideoUrl, "=localVideoUrl=");
+        // 4.2 生成封面图并上传到图片服务器
+        const frameBlob = await Video.captureVideoFrame(localVideoUrl);
+        console.log(frameBlob, "============frameBlob===========");
+        let coverUrl = "";
+        if (!frameBlob) return;
+
+        // 复用图片上传接口（与图片上传逻辑一致）
+        const coverFormData = new FormData();
+        const coverUid = generateUUID(); // 生成唯一ID
+        // formData.append("image", options.file);
+        coverFormData.append("image", frameBlob, `cover-${coverUid}.jpg`);
+        console.log(coverFormData, "=coverFormData=");
+        // 调用图片上传接口（和普通图片上传用同一个接口）
+        const coverRes = await uploadImg(coverFormData, routerName.value, coverUid);
+
+        // 校验封面上传结果
+        if (coverRes?.data?.code === 0) {
+            coverUrl = coverRes.data.data.path; // 服务器返回的封面URL
+        } else {
+            console.warn("封面上传失败，使用默认封面");
+        }
+
+        // 5. 将带封面的视频插入编辑器
+        insertVideoToEditor(videoUrl, coverUrl);
+
+        // 6. 上传成功提示
+        // loading.close();
+        // ElNotification({
+        //     title: "上传成功",
+        //     message: "视频已添加到编辑器",
+        //     type: "success"
+        // });
     } catch (error) {
-        console.log(error);
+        console.log(error, "==============");
+    } finally {
+        console.log("======12323232========");
+        // 清理资源
+        URL.revokeObjectURL(localVideoUrl); // 释放本地视频URL
+        evt.target.value = ""; // 重置文件输入框
     }
 };
 
+// 辅助方法：插入视频到编辑器
+const insertVideoToEditor = (videoUrl, coverUrl) => {
+    // 获取当前活跃的编辑器（主编辑器或标签页编辑器）
+    let quill;
+    if (activeEditor.value === "main") {
+        quill = toRaw(myQuillEditor.value)?.getQuill();
+    } else {
+        const tabIndex = parseInt(activeEditor.value.split("-")[1]);
+        quill = toRaw(tabEditors[tabIndex])?.getQuill();
+    }
+
+    if (quill) {
+        const range = quill.getSelection() || { index: 0 };
+        // 插入自定义视频组件，携带服务器返回的视频URL和封面URL
+        quill.insertEmbed(range.index, "customVideo", {
+            url: videoUrl,
+            poster: coverUrl // 这里使用图片服务器返回的封面URL
+        });
+        quill.setSelection(range.index + 1); // 移动光标到视频后
+    }
+};
 // 标签页切换事件（基于key切换）
 const handleTabChange = key => {
     const tabIndex = tabsData.value.findIndex(item => item.key === key);
@@ -389,7 +489,7 @@ const handleTabsEdit = (targetKey, action) => {
         // 删除标签页
         const index = tabsData.value.findIndex(item => item.key === targetKey);
         tabsData.value.splice(index, 1);
-        tabEditors.value.splice(index, 1);
+        tabEditors.splice(index, 1);
         editInputRefs.value.splice(index, 1);
 
         // 调整活跃编辑器索引
@@ -437,6 +537,7 @@ const finishEditTitle = index => {
 
 // 其他方法（保持不变）
 const onContentChange = content => {
+    console.log(content, "=content=");
     emit("handleRichTextContentChange", content);
     emit("update:content", content);
 };
@@ -459,6 +560,7 @@ const handleQR = () => {
         return useMsg("error", "标签页内容为空 !");
     }
     const range = quill.getSelection(true);
+
     // 判断是否是编辑已有标签页（通过 currentEditingTabsRef 是否有值）
     if (currentEditingTabsRef.value) {
         // 1. 编辑模式：更新原有标签页组件
@@ -470,7 +572,10 @@ const handleQR = () => {
     } else {
         // 2. 新增模式：插入新的标签页组件
         quill.insertEmbed(range.index, "tabs", tabsData.value);
+        // 关键：在标签页前方插入一个空段落（确保顶部有空间）
+        // quill.insertText(range.index, "\n"); // 插入换行
         quill.setSelection(range.index + 1);
+        quill.insertText(range.index, "\n"); // 插入换行
     }
     // 关闭弹窗并清空临时数据
     setTabsInfo();
@@ -510,26 +615,25 @@ const loadTabsDataToEditor = tabs => {
 };
 
 onMounted(() => {
-    initTitle();
+    nextTick(() => {
-    // 监听编辑按钮点击事件
+        initTitle();
-    const editorEl = document.querySelector(".ql-editor");
+        // 监听编辑按钮点击事件
-    if (editorEl) {
+        const editorEl = document.querySelector(".ql-editor");
-        editorEl.addEventListener("edit-tabs", e => {
+        if (editorEl) {
-            console.log(1232, "测试");
+            editorEl.addEventListener("edit-tabs", e => {
-            console.log(e.detail.blot, "=e.detail=");
+                console.log(e.detail.blot, "=e.detail=");
-            const tabsData = TabsBlot.value(e.detail.blot.domNode);
+                const tabsData = TabsBlot.value(e.detail.blot.domNode);
-            console.log(tabsData, "=tabsData=");
+                if (tabsData.length > 0) {
-            if (tabsData.length > 0) {
+                    // 保存当前编辑的标签页引用
-                // 保存当前编辑的标签页引用
+                    currentEditingTabsRef.value = e.detail.blot;
-                currentEditingTabsRef.value = e.detail.blot;
+                    // 加载数据到弹窗
-                console.log(currentEditingTabsRef.value, "=currentEditingTabsRef.value =");
+                    loadTabsDataToEditor(tabsData);
-                // 加载数据到弹窗
+                    // 显示弹窗
-                loadTabsDataToEditor(tabsData);
+                    outerVisible.value = true;
-                // 显示弹窗
+                }
-                outerVisible.value = true;
+            });
-            }
+        }
-        });
+    });
-    }
 });
 
 defineExpose({
@@ -570,3 +674,4 @@ defineExpose({
     margin: -2px 0; /* 与标签对齐 */
 }
 </style>
+./quill-image1111

src/components/Editor/index2.vue

@@ -55,7 +55,14 @@
                 @tab-change="handleTabChange"
             >
                 <!-- 标签页：标题支持编辑 -->
-                <el-tab-pane :label="item.title" :name="item.key" v-for="(item, index) in tabsData" :key="item.key">
+                <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">
                             <!-- 文字显示状态 -->
@@ -64,14 +71,16 @@
                             </span>
                             <!-- 输入框编辑状态 -->
                             <el-input
+                                @click.stop
+                                @keydown.delete.stop
+                                @keydown.backspace.stop
                                 v-else
                                 v-model="item.title"
+                                max-length=""
                                 :ref="el => (editInputRefs[index] = el)"
                                 size="small"
                                 class="title-input"
                                 @blur="finishEditTitle(index)"
-                                @keyup.enter="finishEditTitle(index)"
-                                @keyup.esc="cancelEditTitle(index)"
                             />
                         </div>
                     </template>
@@ -105,13 +114,13 @@ 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 { 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"];
@@ -145,7 +154,7 @@ const tabsData = ref([]);
 const tabEditors = ref([]);
 // 标题编辑输入框的ref
 const editInputRefs = ref([]);
-
+const currentEditingTabsRef = ref(null);
 // Props
 const props = defineProps({
     content: { type: String, default: "" },
@@ -299,7 +308,7 @@ const handleHttpUpload = async options => {
                 imageListDb.value.forEach(item => {
                     const length = quill.getLength() - 1;
                     quill.insertEmbed(length, "customImage", {
-                        url: h + item.path,
+                        url: item.path,
                         id: item.serverImgId || generateUUID()
                     });
                     quill.setSelection(length + 1);
@@ -338,7 +347,7 @@ const handleVideoUpload = async evt => {
         let length = quill.selection.savedRange.index;
         const { data } = await uploadVideo(formData);
         quill.insertEmbed(length, "customVideo", {
-            url: h + data.path,
+            url: data.path,
             id: generateUUID()
         });
         uploadFileVideo.value.value = "";
@@ -357,6 +366,9 @@ const handleTabChange = key => {
 // 标签页增删事件
 const handleTabsEdit = (targetKey, action) => {
     if (action === "add") {
+        if (tabsData.value.length > 5) {
+            return useMsg("error", "标签页已达上限 !");
+        }
         // 新增标签页：生成唯一key，默认标题，初始不处于编辑状态
         const newKey = `tab_${generateUUID()}`;
         const newIndex = tabsData.value.length;
@@ -440,15 +452,33 @@ const setTabsInfo = () => {
 const handleBeforeClose = () => {
     setTabsInfo();
 };
-//确认
+// 确认按钮点击事件（修改后）
 const handleQR = () => {
     const quill = toRaw(myQuillEditor.value)?.getQuill();
-    if (quill) {
+    if (!quill) return;
-        const range = quill.getSelection(true);
+    if (!tabsData.value.length) {
-        quill.insertEmbed(range.index, "tabs", tabsData.value);
+        return useMsg("error", "标签页内容为空 !");
-        quill.setSelection(range.index + 1);
-        setTabsInfo();
     }
+    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.insertText(range.index, "\n"); // 插入换行
+        quill.setSelection(range.index + 1);
+        quill.insertText(range.index, "\n"); // 插入换行
+    }
+    // 关闭弹窗并清空临时数据
+    setTabsInfo();
 };
 //取消
 const handleQX = () => {
@@ -462,9 +492,49 @@ const initTitle = () => {
         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();
+    // 监听编辑按钮点击事件
+    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({
@@ -488,63 +558,21 @@ defineExpose({
     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 {
+.title-input {
-    display: flex;
+    width: 100px;
-    background-color: #f8f9fa;
+    margin: -2px 0; /* 与标签对齐 */
-    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>
+./quill-image1111

src/components/Editor/quill-image.js

@@ -11,8 +11,6 @@ class ImageBlot extends BlockEmbed {
     }
     // 允许通过键盘删除
     deleteAt(index, length) {
-        console.log(index, length, "===============>");
-        console.log("===========super===========");
         super.deleteAt(index, length);
     }
     static value(node) {

src/components/Editor/quill-image1111.js

@@ -0,0 +1,25 @@
+import { Quill } from "@vueup/vue-quill";
+let BlockEmbed = Quill.import("blots/block/embed");
+class ImageBlot extends BlockEmbed {
+    static create(value) {
+        let node = super.create();
+        node.setAttribute("src", value.url);
+        node.setAttribute("id", value.id);
+
+        console.log("图片信息", node);
+        return node;
+    }
+    // 允许通过键盘删除
+    deleteAt(index, length) {
+        super.deleteAt(index, length);
+    }
+    static value(node) {
+        return {
+            url: node.getAttribute("src"),
+            id: node.getAttribute("id")
+        };
+    }
+}
+ImageBlot.blotName = "customImage";
+ImageBlot.tagName = "img";
+export default ImageBlot;

src/components/Editor/quill-tabs.js

@@ -28,18 +28,88 @@ class TabsBlot extends BlockEmbed {
         `
         );
 
-        // 标签栏
+        // 标签栏滚动容器 - 优化高度计算
+        const tabScrollContainer = document.createElement("div");
+        tabScrollContainer.className = "m-quill-tab-scroll-container";
+        tabScrollContainer.setAttribute(
+            "style",
+            `
+            -webkit-overflow-scrolling: touch;
+            scrollbar-width: none;
+            -ms-overflow-style: none; 
+            overflow-y: hidden;
+            overflow-x: auto;
+            height: auto;
+        `
+        );
+
+        // height: auto; /* 自动高度 */
+
+        // Chrome, Safari 隐藏滚动条
+        tabScrollContainer.style.overflow = "auto";
+        tabScrollContainer.style.webkitOverflowScrolling = "touch";
+        tabScrollContainer.style.scrollbarWidth = "none";
+        tabScrollContainer.style.msOverflowStyle = "none";
+
+        // 标签栏 - 保持原有样式不变
         const tabList = document.createElement("div");
         tabList.className = "m-quill-tab-list";
         tabList.setAttribute(
             "style",
             `
             display: flex;
-            border-bottom: 1px solid #dddddd;
+            border-bottom: 2px solid #dddddd;
+            min-width: max-content; /* 确保内容撑开容器 */
         `
         );
 
-        // 内容区
+        // 生成标签按钮 - 优化内边距计算
+        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",
+                `
+                font-weight: 900;
+                color: #8f9099;
+                cursor: pointer;
+                background: transparent;
+                border: none;
+                padding-bottom:14px;
+                margin-right:3%; /* 增大间距 */
+                cursor: pointer;
+                white-space:nowrap;
+                font-size:16px;
+                ${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
+            `
+            );
+            tabList.appendChild(btn);
+        });
+
+        // 编辑按钮 - 保持原有样式不变
+        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;
+            width:60px;
+            padding-left:20px;
+            background: transparent;
+            border: none;
+            display:block;
+        `
+        );
+        tabList.appendChild(editBtn);
+
+        // 内容区 - 保持原有样式不变
         const contentList = document.createElement("div");
         contentList.className = "m-quill-tab-content-list";
         contentList.setAttribute(
@@ -49,31 +119,8 @@ class TabsBlot extends BlockEmbed {
         `
         );
 
-        // 生成标签按钮和内容面板
+        // 生成内容面板 - 保持原有样式不变
         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);
@@ -82,91 +129,77 @@ class TabsBlot extends BlockEmbed {
                 "style",
                 `
                 display: ${index === 0 ? "block" : "none"};
-                min-height: 50px; 
+                min-height: 50px;
             `
             );
-            panel.contentEditable = "false"; // 内容面板可编辑
+            panel.contentEditable = "false";
             contentList.appendChild(panel);
         });
 
-        // 编辑按钮
+        // 组装结构
-        const editBtn = document.createElement("button");
+        tabScrollContainer.appendChild(tabList);
-        editBtn.className = "m-quill-tab-edit-btn";
+        node.appendChild(tabScrollContainer); // 滚动容器添加到主节点
-        editBtn.innerHTML = "编辑";
+        node.appendChild(contentList); // 内容区
-        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() {
+            (function() {
-                    const container = document.currentScript.parentElement;
+                const container = document.currentScript.parentElement;
-                    const isAdmin = window.location.pathname.includes('/admin');
+                const isAdmin = window.location.pathname.includes('/admin');
-                    const editBtn1 = container.querySelector('.m-quill-tab-edit-btn'); 
+                const editBtn1 = container.querySelector('.m-quill-tab-edit-btn');
-                    
+                // 仅在非管理系统（文章网站）隐藏编辑按钮，管理系统保持显示
-                    // 仅在非管理系统（文章网站）隐藏编辑按钮，管理系统保持显示
+                if (!isAdmin && editBtn1) {
-                    if (!isAdmin && editBtn1) {
+                    editBtn1.style.display = 'none'; // 文章网站隐藏按钮
-                        editBtn1.style.display = 'none'; // 文章网站隐藏按钮
+                } else if (isAdmin && editBtn1) {
-                    } else if (isAdmin && editBtn1) {
+                    editBtn1.style.display = 'block'; // 管理系统强制显示按钮
-                        editBtn1.style.display = 'block'; // 管理系统强制显示按钮
+                    editBtn1.style.width='60px';
-                    }
+                    editBtn1.style.minWidth='60px';
-                    
+                }
-                    // 非管理系统才执行标签切换逻辑（管理系统不执行）
+                
-                    if (!isAdmin) {
+                // 非管理系统才执行标签切换逻辑（管理系统不执行）
-                        const tabButtons = container.querySelectorAll('.m-quill-tab-button:not([data-action])');
+                if (!isAdmin) {
-                        const contentPanels = container.querySelectorAll('.m-quill-tab-content');
+                    const tabButtons = container.querySelectorAll('.m-quill-tab-button:not([data-action])');
-                        tabButtons.forEach(btn => {
+                    const contentPanels = container.querySelectorAll('.m-quill-tab-content');
-                            btn.addEventListener('click', function() {
+                    tabButtons.forEach(btn => {
-                                const index = parseInt(this.dataset.index);
+                        btn.addEventListener('click', function() {
-                                tabButtons.forEach((b, i) => {
+                            const index = parseInt(this.dataset.index);
-                                    b.setAttribute('style', \`
+                            tabButtons.forEach((b, i) => {
-                                        padding: 10px 15px;
+                                b.setAttribute('style', \`
-                                        font-weight: 900;
+                                    font-weight: 900;
-                                        cursor: pointer;
+                                    cursor: pointer;
-                                        background: transparent;
+                                    background: transparent;
-                                        font-size:16px;
+                                    font-size:16px;
-                                        margin-right: 60px;
+                                    white-space:nowrap;
-                                        color: #8f9099;
+                                    padding-bottom:14px;
-                                        border: none;
+                                    margin-right:3%;
-                                        \${i === index ? 
+                                    color: #8f9099;
-                                            'color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;' : 
+                                    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';
-                                });
                             });
+                            contentPanels.forEach((panel, i) => {
+                                panel.style.display = i === index ? 'block' : 'none';
+                            });
+                             // 添加滚动逻辑到自执行函数中
+                            const scrollContainer = container.querySelector(".m-quill-tab-scroll-container");
+                            const activeBtn = tabButtons[index];
+                            if (scrollContainer && activeBtn) {
+                                activeBtn.scrollIntoView({
+                                    behavior: "smooth",
+                                    block: "nearest",
+                                    inline: "center"
+                                });
+                            }
                         });
-                      }
+                    });
-                    })();
+                }
-                  `;
+            })();
+        `;
 
-        node.appendChild(tabList);
-        node.appendChild(contentList);
         node.appendChild(scriptTag);
         node.setAttribute("contenteditable", "false");
         return node;
@@ -177,15 +210,12 @@ class TabsBlot extends BlockEmbed {
             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,
@@ -196,7 +226,7 @@ class TabsBlot extends BlockEmbed {
             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)) {
@@ -209,9 +239,8 @@ class TabsBlot extends BlockEmbed {
         });
     }
 
-    // 增强版删除键处理
+    // 增强版删除键处理 - 保持原有逻辑不变
     bindDeleteKeyEvent() {
-        // 阻止从外部删除整个组件
         this.domNode.addEventListener(
             "keydown",
             e => {
@@ -222,30 +251,26 @@ class TabsBlot extends BlockEmbed {
                     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(); // 阻止删除整个组件
+                        e.preventDefault();
                     }
                 }
             },
             true
-        ); // 使用捕获阶段
+        );
 
-        // 标签栏禁止编辑
         const tabList = this.domNode.querySelector(".m-quill-tab-list");
         if (tabList) {
             tabList.querySelectorAll("*").forEach(el => {
@@ -258,17 +283,19 @@ class TabsBlot extends BlockEmbed {
         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;
+                padding-bottom:14px;
+                margin-right:3%;
+                white-space:nowrap;
                 color: #8f9099;
                 border-bottom: 3px solid transparent;
                 ${i === index ? "color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
@@ -279,6 +306,17 @@ class TabsBlot extends BlockEmbed {
         panels.forEach((panel, i) => {
             panel.style.display = i === index ? "block" : "none";
         });
+
+        // 滚动到当前选中的标签
+        const scrollContainer = this.domNode.querySelector(".m-quill-tab-scroll-container");
+        const activeBtn = buttons[index];
+        if (scrollContainer && activeBtn) {
+            activeBtn.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+                inline: "center"
+            });
+        }
     }
 
     static value(node) {
@@ -301,26 +339,23 @@ class TabsBlot extends BlockEmbed {
         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(); // 重新绑定删除事件
+        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();
@@ -328,9 +363,7 @@ class TabsBlot extends BlockEmbed {
         });
         contentList.innerHTML = "";
 
-        // 重新渲染标签页（复用 create 方法中的逻辑）
         tabs.forEach((tab, index) => {
-            // 重建标签按钮
             const btn = document.createElement("button");
             btn.className = "m-quill-tab-button";
             btn.setAttribute("data-index", index);
@@ -338,20 +371,20 @@ class TabsBlot extends BlockEmbed {
             btn.setAttribute(
                 "style",
                 `
-              padding: 10px 15px;
+                font-weight: 900;
-              font-weight: 900;
+                color: #8f9099;
-              color: #8f9099;
+                cursor: pointer;
-              cursor: pointer;
+                background: transparent;
-              background: transparent;
+                border: none;
-              border: none;
+                padding-bottom:14px;
-              margin-right: 60px;
+                margin-right:3%;
-              font-size:16px;
+                white-space:nowrap;
-              ${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
+                font-size:16px;
-          `
+                ${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
+            `
             );
-            tabList.insertBefore(btn, editBtn); // 插入到编辑按钮前
+            tabList.insertBefore(btn, editBtn);
 
-            // 重建内容面板
             const panel = document.createElement("div");
             panel.className = "m-quill-tab-content";
             panel.setAttribute("data-index", index);
@@ -359,15 +392,14 @@ class TabsBlot extends BlockEmbed {
             panel.setAttribute(
                 "style",
                 `
-              display: ${index === 0 ? "block" : "none"};
+                display: ${index === 0 ? "block" : "none"};
-              min-height: 50px; 
+                min-height: 50px; 
-          `
+            `
             );
             panel.contentEditable = "false";
             contentList.appendChild(panel);
         });
 
-        // 重新绑定事件（确保切换功能正常）
         this.bindEvents();
     }
 }

src/components/Editor/quill-tabs1.js

@@ -5,7 +5,7 @@ const BlockEmbed = Quill.import("blots/block/embed");
 class TabsBlot extends BlockEmbed {
     static blotName = "tabs";
     static tagName = "div";
-    static className = "quill-tabs";
+    static className = "m-quill-tabs";
 
     constructor(domNode) {
         super(domNode);
@@ -23,27 +23,100 @@ class TabsBlot extends BlockEmbed {
             `
             margin: 15px 0;
             overflow: hidden;
-            border: 1px solid #dddddd;
             border-radius: 4px;
             position: relative;
         `
         );
 
-        // 标签栏
+        // 标签栏滚动容器 - 添加隐藏滚动条样式
+        const tabScrollContainer = document.createElement("div");
+        tabScrollContainer.className = "m-quill-tab-scroll-container";
+        tabScrollContainer.setAttribute(
+            "style",
+            `
+            overflow-x: auto;
+            overflow-y: hidden;
+            
+            -webkit-overflow-scrolling: touch; /* 增强移动端滚动体验 */
+            scrollbar-width: none; /* Firefox 隐藏滚动条 */
+            -ms-overflow-style: none; /* IE 10+ 隐藏滚动条 */
+        `
+        );
+
+        // Chrome, Safari 隐藏滚动条
+        tabScrollContainer.style.overflow = "auto";
+        tabScrollContainer.style.webkitOverflowScrolling = "touch";
+        tabScrollContainer.style.scrollbarWidth = "none";
+        tabScrollContainer.style.msOverflowStyle = "none";
+
+        // 关键：隐藏滚动条但保留功能
+        tabScrollContainer.innerHTML = `
+            <style>
+                .m-quill-tab-scroll-container::-webkit-scrollbar {
+                    display: none; /* Chrome, Safari 隐藏滚动条 */
+                }
+            </style>
+        `;
+
+        // 标签栏 - 保持原有样式不变
         const tabList = document.createElement("div");
-        tabList.className = "quill-tab-list";
+        tabList.className = "m-quill-tab-list";
         tabList.setAttribute(
             "style",
             `
             display: flex;
-            background-color: #f8f9fa;
             border-bottom: 1px solid #dddddd;
+            min-width: max-content; /* 确保内容撑开容器 */
         `
         );
 
-        // 内容区
+        // 生成标签按钮 - 保持原有样式不变
+        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: 1%;
+                font-weight: 900;
+                color: #8f9099;
+                cursor: pointer;
+                background: transparent;
+                border: none;
+                margin-right: 1%;
+                cursor: pointer;
+                font-size:16px;
+                ${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
+            `
+            );
+            tabList.appendChild(btn);
+        });
+
+        // 编辑按钮 - 保持原有样式不变
+        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;
+            width:50px;
+            background: transparent;
+            border: none;
+            display:block;
+        `
+        );
+        tabList.appendChild(editBtn);
+
+        // 内容区 - 保持原有样式不变
         const contentList = document.createElement("div");
-        contentList.className = "quill-tab-content-list";
+        contentList.className = "m-quill-tab-content-list";
         contentList.setAttribute(
             "style",
             `
@@ -51,106 +124,77 @@ class TabsBlot extends BlockEmbed {
         `
         );
 
-        // 生成标签按钮和内容面板
+        // 生成内容面板 - 保持原有样式不变
         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.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; /* 确保有编辑区域 */
+                min-height: 50px; 
             `
             );
-            panel.contentEditable = "true"; // 内容面板可编辑
+            panel.contentEditable = "false";
             contentList.appendChild(panel);
         });
 
-        // 编辑按钮
+        // 组装结构
-        const editBtn = document.createElement("button");
+        tabScrollContainer.appendChild(tabList);
-        editBtn.className = "quill-tab-edit-btn";
+        node.appendChild(tabScrollContainer); // 滚动容器添加到主节点
-        editBtn.innerHTML = "编辑";
+        node.appendChild(contentList); // 内容区
-        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 isAdmin = window.location.pathname.includes('/admin');
-                const contentPanels = container.querySelectorAll('.quill-tab-content');
+                const editBtn1 = container.querySelector('.m-quill-tab-edit-btn'); 
-                tabButtons.forEach(btn => {
+                
-                    btn.addEventListener('click', function() {
+                // 仅在非管理系统（文章网站）隐藏编辑按钮，管理系统保持显示
-                        const index = parseInt(this.dataset.index);
+                if (!isAdmin && editBtn1) {
-                        tabButtons.forEach((b, i) => {
+                    editBtn1.style.display = 'none'; // 文章网站隐藏按钮
-                            b.setAttribute('style', \`
+                } else if (isAdmin && editBtn1) {
-                                padding: 10px 15px;
+                    editBtn1.style.display = 'block'; // 管理系统强制显示按钮
-                                font-weight: 500;
+                }
-                                cursor: pointer;
+                
-                                background: transparent;
+                // 非管理系统才执行标签切换逻辑（管理系统不执行）
-                                border: none;
+                if (!isAdmin) {
-                                transition: background-color 0.2s;
+                    const tabButtons = container.querySelectorAll('.m-quill-tab-button:not([data-action])');
-                                \${i === index ? 
+                    const contentPanels = container.querySelectorAll('.m-quill-tab-content');
-                                    'color: #007bff; background-color: white; border-bottom: 2px solid #007bff;' : 
+                    tabButtons.forEach(btn => {
-                                    ''
+                        btn.addEventListener('click', function() {
-                                }
+                            const index = parseInt(this.dataset.index);
-                            \`);
+                            tabButtons.forEach((b, i) => {
-                        });
+                                b.setAttribute('style', \`
-                        
+                                    padding: 1%;
-                        contentPanels.forEach((panel, i) => {
+                                    font-weight: 900;
-                            panel.style.display = i === index ? 'block' : 'none';
+                                    cursor: pointer;
+                                    background: transparent;
+                                    font-size:16px;
+                                    margin-right: 1%;
+                                    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';
+                            });
                         });
                     });
-                });
+                }
             })();
         `;
 
-        // 组装结构 - 关键修改：移除contenteditable="false"
-        node.appendChild(tabList);
-        node.appendChild(contentList);
         node.appendChild(scriptTag);
-
+        node.setAttribute("contenteditable", "false");
         return node;
     }
 
@@ -159,10 +203,11 @@ class TabsBlot extends BlockEmbed {
             this.eventBoundElements = new WeakMap();
         }
 
-        // 编辑按钮事件
+        // 编辑按钮事件 - 保持原有逻辑不变
-        const editBtn = this.domNode.querySelector(".quill-tab-edit-btn");
+        const editBtn = this.domNode.querySelector(".m-quill-tab-edit-btn");
-        if (editBtn && !this.eventBoundElements.has(editBtn)) {
+        if (editBtn) {
-            editBtn.addEventListener("click", e => {
+            editBtn.removeEventListener("click", this.handleEditClick);
+            this.handleEditClick = e => {
                 e.stopPropagation();
                 this.domNode.dispatchEvent(
                     new CustomEvent("edit-tabs", {
@@ -170,12 +215,12 @@ class TabsBlot extends BlockEmbed {
                         detail: { blot: this }
                     })
                 );
-            });
+            };
-            this.eventBoundElements.set(editBtn, true);
+            editBtn.addEventListener("click", this.handleEditClick);
         }
 
-        // 标签切换事件
+        // 标签切换事件 - 保持原有逻辑不变
-        const tabButtons = this.domNode.querySelectorAll(".quill-tab-button:not([data-action])");
+        const tabButtons = this.domNode.querySelectorAll(".m-quill-tab-button:not([data-action])");
         tabButtons.forEach(btn => {
             if (!this.eventBoundElements.has(btn)) {
                 btn.addEventListener("click", () => {
@@ -187,9 +232,8 @@ class TabsBlot extends BlockEmbed {
         });
     }
 
-    // 增强版删除键处理
+    // 增强版删除键处理 - 保持原有逻辑不变
     bindDeleteKeyEvent() {
-        // 阻止从外部删除整个组件
         this.domNode.addEventListener(
             "keydown",
             e => {
@@ -200,31 +244,27 @@ class TabsBlot extends BlockEmbed {
                     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(); // 阻止删除整个组件
+                        e.preventDefault();
                     }
                 }
             },
             true
-        ); // 使用捕获阶段
+        );
 
-        // 标签栏禁止编辑
+        const tabList = this.domNode.querySelector(".m-quill-tab-list");
-        const tabList = this.domNode.querySelector(".quill-tab-list");
         if (tabList) {
             tabList.querySelectorAll("*").forEach(el => {
                 el.contentEditable = "false";
@@ -233,20 +273,24 @@ class TabsBlot extends BlockEmbed {
     }
 
     selectTab(index) {
-        const buttons = this.domNode.querySelectorAll(".quill-tab-button:not([data-action])");
+        const buttons = this.domNode.querySelectorAll(".m-quill-tab-button:not([data-action])");
-        const panels = this.domNode.querySelectorAll(".quill-tab-content");
+        const panels = this.domNode.querySelectorAll(".m-quill-tab-content");
 
+        // 保持原有样式逻辑不变
         buttons.forEach((btn, i) => {
             btn.setAttribute(
                 "style",
                 `
-                padding: 10px 15px;
+                padding: 1%;
-                font-weight: 500;
+                font-weight: 900;
                 cursor: pointer;
                 background: transparent;
                 border: none;
-                transition: background-color 0.2s;
+                font-size:16px;
-                ${i === index ? "color: #007bff; background-color: white; border-bottom: 2px solid #007bff;" : ""}
+                margin-right: 1%;
+                color: #8f9099;
+                border-bottom: 3px solid transparent;
+                ${i === index ? "color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
             `
             );
         });
@@ -254,21 +298,32 @@ class TabsBlot extends BlockEmbed {
         panels.forEach((panel, i) => {
             panel.style.display = i === index ? "block" : "none";
         });
+
+        // 滚动到当前选中的标签
+        const scrollContainer = this.domNode.querySelector(".m-quill-tab-scroll-container");
+        const activeBtn = buttons[index];
+        if (scrollContainer && activeBtn) {
+            activeBtn.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+                inline: "center"
+            });
+        }
     }
 
     static value(node) {
         const tabs = [];
-        const buttons = node.querySelectorAll(".quill-tab-button:not([data-action])");
+        const buttons = node.querySelectorAll(".m-quill-tab-button:not([data-action])");
-        const panels = node.querySelectorAll(".quill-tab-content");
+        const panels = node.querySelectorAll(".m-quill-tab-content");
 
         buttons.forEach((btn, i) => {
             tabs.push({
                 title: btn.textContent,
-                content: panels[i].innerHTML
+                content: panels[i]?.innerHTML || ""
             });
         });
 
-        return { tabs };
+        return tabs;
     }
 
     update(mutations, context) {
@@ -280,7 +335,63 @@ class TabsBlot extends BlockEmbed {
             scriptTag.parentNode.replaceChild(newScript, scriptTag);
         }
         this.bindEvents();
-        this.bindDeleteKeyEvent(); // 重新绑定删除事件
+        this.bindDeleteKeyEvent();
+    }
+
+    getValue() {
+        return TabsBlot.value(this.domNode);
+    }
+
+    // 更新标签页数据 - 保持原有逻辑不变
+    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 = "";
+
+        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: 1%;
+                font-weight: 900;
+                color: #8f9099;
+                cursor: pointer;
+                background: transparent;
+                border: none;
+                margin-right: 1%;
+                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();
     }
 }
 

src/components/Editor/quill-tabs222.js

@@ -1,180 +0,0 @@
-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

@@ -1,24 +1,99 @@
 import { Quill } from "@vueup/vue-quill";
-// 源码中是import直接倒入，这里要用Quill.import引入
 const BlockEmbed = Quill.import("blots/block/embed");
 const Link = Quill.import("formats/link");
 
-const ATTRIBUTES = ["height", "width"];
+const ATTRIBUTES = ["height", "width", "poster"];
 
 class Video extends BlockEmbed {
     static create(value) {
         let node = super.create();
-        // 添加video标签所需的属性
+
+        // 基础视频属性
         node.setAttribute("controls", "controls");
         node.setAttribute("playsinline", "true");
         node.setAttribute("webkit-playsinline", "true");
         node.setAttribute("type", "video/mp4");
-        // poster 属性指定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
+
-        node.setAttribute("poster", value.poster);
+        // 处理视频URL，添加时间片段定位到0.001秒（避开黑屏）
-        node.setAttribute("src", this.sanitize(value.url));
+        const baseUrl = this.sanitize(value.url);
+        const videoUrl = baseUrl.includes("#") ? `${baseUrl}&t=0.001` : `${baseUrl}#t=0.001`;
+        node.setAttribute("src", videoUrl);
+
+        // 临时封面（加载中显示）
+        node.setAttribute(
+            "poster",
+            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' viewBox='0 0 600 300'%3E%3Crect width='100%25' height='100%25' fill='%23f0f0f0'/%3E%3Ccircle cx='300' cy='150' r='40' fill='%23ccc'/%3E%3Cpolygon points='300,130 330,160 270,160' fill='white'/%3E%3C/svg%3E"
+        );
+
+        // 自动截取封面（未提供poster时）
+        if (!value.poster) {
+            this.captureFrameAsBlob(videoUrl, node);
+        } else {
+            node.setAttribute("poster", this.sanitize(value.poster));
+        }
+        // width: 600px;
+        // height: 300px;
+        // object-fit: contain;
+        // 视频样式
+        node.setAttribute(
+            "style",
+            `
+            `
+        );
+
         return node;
     }
 
+    /**
+     * 生成视频帧Blob（核心方法，返回Promise）
+     * @param {string} videoUrl - 视频的本地Blob URL
+     * @returns {Promise<Blob|null>} - 视频帧Blob或null
+     */
+    /**
+     * 将视频Blob URL转换为JPG图片Blob
+     * @param {string} videoBlobUrl - 本地视频Blob URL（blob:xxx）
+     * @returns {Promise<Blob|null>} - JPG格式图片Blob，失败返回null
+     */
+    static async captureVideoFrame(videoBlobUrl) {
+        return new Promise(resolve => {
+            // 1. 创建视频元素加载Blob
+            const video = document.createElement("video");
+            video.src = videoBlobUrl;
+            video.muted = true;
+            video.playsInline = true;
+            video.preload = "auto";
+
+            // 2. 视频可播放时开始转换
+            video.oncanplay = () => {
+                // 3. 创建Canvas绘制视频帧
+                const canvas = document.createElement("canvas");
+                canvas.width = video.videoWidth || 640; // 使用视频实际宽度
+                canvas.height = video.videoHeight || 360; // 使用视频实际高度
+                const ctx = canvas.getContext("2d");
+
+                // 绘制视频当前帧到Canvas
+                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+                // 4. 将Canvas转换为JPG Blob
+                canvas.toBlob(
+                    blob => {
+                        console.log(blob, "================>");
+                        video.remove(); // 清理视频元素
+                        resolve(blob || null); // 返回JPG Blob
+                    },
+                    "image/jpeg", // 强制JPG格式
+                    0.8 // 图片质量（0-1）
+                );
+            };
+
+            // 错误处理
+            video.onerror = () => {
+                video.remove();
+                resolve(null);
+            };
+        });
+    }
+    // 以下方法保持不变
     static formats(domNode) {
         return ATTRIBUTES.reduce((formats, attribute) => {
             if (domNode.hasAttribute(attribute)) {
@@ -33,15 +108,14 @@ class Video extends BlockEmbed {
     }
 
     static value(domNode) {
-        // 设置自定义的属性值
         return {
-            url: domNode.getAttribute("src"),
+            url: domNode.getAttribute("src").split("#")[0],
-            poster: domNode.getAttribute("poster")
+            poster: domNode.getAttribute("poster") || ""
         };
     }
 
     format(name, value) {
-        if (ATTRIBUTES.indexOf(name) > -1) {
+        if (ATTRIBUTES.includes(name)) {
             if (value) {
                 this.domNode.setAttribute(name, value);
             } else {
@@ -53,12 +127,13 @@ class Video extends BlockEmbed {
     }
 
     html() {
-        const { video } = this.value();
+        const { url, poster } = this.value();
-        return `<a href="${video}">${video}</a>`;
+        return `<video src="${url}" ${poster ? `poster="${poster}"` : ""} controls playsinline webkit-playsinline ></video>`;
     }
 }
-Video.blotName = "customVideo"; // 这里不用改，不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
+//style="width:600px;height:300px;"
-Video.className = "ql-video"; // 可添加样式，看实际使用需要
+Video.blotName = "customVideo";
-Video.tagName = "video"; // 用video标签替换iframe
+// Video.className = "ql-video";
+Video.tagName = "video";
 
 export default Video;

src/components/Editor/quill-video11.js

@@ -0,0 +1,72 @@
+import { Quill } from "@vueup/vue-quill";
+// 源码中是import直接倒入，这里要用Quill.import引入
+const BlockEmbed = Quill.import("blots/block/embed");
+const Link = Quill.import("formats/link");
+
+const ATTRIBUTES = ["height", "width"];
+
+class Video extends BlockEmbed {
+    static create(value) {
+        let node = super.create();
+        // 添加video标签所需的属性
+        node.setAttribute("controls", "controls");
+        node.setAttribute("playsinline", "true");
+        node.setAttribute("webkit-playsinline", "true");
+        node.setAttribute("type", "video/mp4");
+        // poster 属性指定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
+        // console.log(value.url, "= value.poster=");
+        // node.setAttribute("poster", this.sanitize(value.url));
+        node.setAttribute("src", this.sanitize(value.url));
+        node.setAttribute(
+            "style",
+            `
+            width: 600px;
+             height: 300px;
+            `
+        );
+        return node;
+    }
+
+    static formats(domNode) {
+        return ATTRIBUTES.reduce((formats, attribute) => {
+            if (domNode.hasAttribute(attribute)) {
+                formats[attribute] = domNode.getAttribute(attribute);
+            }
+            return formats;
+        }, {});
+    }
+
+    static sanitize(url) {
+        return Link.sanitize(url);
+    }
+
+    static value(domNode) {
+        // 设置自定义的属性值
+        return {
+            url: domNode.getAttribute("src")
+            // poster: domNode.getAttribute("src")
+        };
+    }
+
+    format(name, value) {
+        if (ATTRIBUTES.indexOf(name) > -1) {
+            if (value) {
+                this.domNode.setAttribute(name, value);
+            } else {
+                this.domNode.removeAttribute(name);
+            }
+        } else {
+            super.format(name, value);
+        }
+    }
+
+    html() {
+        const { video } = this.value();
+        return `<a href="${video}">${video}</a>`;
+    }
+}
+Video.blotName = "customVideo"; // 这里不用改，不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
+Video.className = "ql-video"; // 可添加样式，看实际使用需要
+Video.tagName = "video"; // 用video标签替换iframe
+
+export default Video;

src/components/Upload/UploadImgs.vue

@@ -43,10 +43,9 @@ import { ref, computed, inject, watch } from "vue";
 import { Plus, Delete } from "@element-plus/icons-vue";
 import { uploadImg } from "@/api/modules/upload";
 import type { UploadProps, UploadFile, UploadUserFile, UploadRequestOptions } from "element-plus";
-import { generateUUID } from "@/utils";
+// import { generateUUID } from "@/utils";
 import { ElNotification, formContextKey, formItemContextKey } from "element-plus";
-let uid = generateUUID();
+// let uid = generateUUID();
-console.log("uid:", uid);
 interface UploadFileProps {
     fileList: UploadUserFile[];
     api?: (params: any) => Promise<any>; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传

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

@@ -190,7 +190,6 @@ const echoData = () => {
     });
 
     imgInfoDataStore.skus = newSkus;
-    console.log(imgInfoDataStore, "=imgInfoDataStore=");
     handleCheckboxChange();
 };
 const callEchoDataIfHasValue = () => {

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

@@ -48,7 +48,6 @@ export const initDetailParams = (dataStore: any, data: any, editorRef: any) => {
         editorRef?.value?.clearEditor(); // 调用子组件的清空方法
     } else {
         dataStore.detail = data.detail;
-        // console.log(dataStore.detail, "=dataStore.detail=");
     }
 
     //图片