feat: 🚀 tabs功能基本完成

src/components/Editor/quill-tabs.js

@@ -0,0 +1,84 @@
+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 node = super.create(value);
+        const tabs = value;
+        // 标签栏
+        const tabList = document.createElement("div");
+        tabList.className = "quill-tab-list";
+        // 内容区
+        const contentList = document.createElement("div");
+        contentList.className = "quill-tab-content-list";
+        // 生成标签和内容
+        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;
+            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;
+            contentList.appendChild(panel);
+        });
+
+        node.appendChild(tabList);
+        node.appendChild(contentList);
+        node.setAttribute("contenteditable", "false"); // 禁止直接编辑容器
+        return node;
+    }
+
+    bindEvents() {
+        // 事件委托，确保动态生成的元素也能触发
+        this.domNode.addEventListener("click", e => {
+            const btn = e.target.closest(".quill-tab-button");
+            if (btn) {
+                e.stopPropagation();
+                const index = parseInt(btn.dataset.index, 10);
+                this.selectTab(index);
+            }
+        });
+    }
+
+    selectTab(index) {
+        const buttons = this.domNode.querySelectorAll(".quill-tab-button");
+        const panels = this.domNode.querySelectorAll(".quill-tab-content");
+
+        buttons.forEach((btn, i) => btn.classList.toggle("active", i === index));
+        panels.forEach((panel, i) => panel.classList.toggle("active", i === index));
+    }
+
+    static value(node) {
+        const tabs = [];
+        node.querySelectorAll(".quill-tab-button").forEach((btn, i) => {
+            tabs.push({
+                title: btn.textContent,
+                content: node.querySelectorAll(".quill-tab-content")[i].innerHTML
+            });
+        });
+        return { tabs };
+    }
+
+    update(mutations, context) {
+        super.update(mutations, context);
+        this.bindEvents(); // 重新绑定事件
+    }
+}
+
+export default TabsBlot;