feat: 🚀 tabs

feat: 🚀 tabs增加滚动条
feat: 🚀 富文本自定义tabs功能
2025-07-29 11:41:09 +08:00 · 2025-07-28 10:03:07 +08:00 · 2025-07-24 15:21:08 +08:00 · 2025-07-23 15:42:28 +08:00 · 2025-07-22 16:13:26 +08:00 · 2025-07-22 14:26:12 +08:00
50 changed files with 3609 additions and 355 deletions
--- a/.env.development
+++ b/.env.development
@@ -2,7 +2,7 @@ ENV = 'dev'

 VITE_APP_API_BASEURL =https://dev.ow.f2b211.com/admapi/v1
 #前端回显图片之类的地址
-VITE_APP_API_BASE_UPLOAD_URL =https://dev.ow.f2b211.com
+VITE_APP_API_BASE_UPLOAD_URL =https://dev.ow.f2b211.com/
 # 本地环境
 VITE_USER_NODE_ENV = development

--- a/.env.production
+++ b/.env.production
@@ -1,11 +1,10 @@
 ENV = 'production'
-VITE_APP_API_BASEURL =  https://opsscmapi.f2b211.com/api/ #请求地址
-
-
+VITE_APP_API_BASEURL =https://orico.com.cn/admapi/v1
+#前端回显图片之类的地址
 # 线上环境
 VITE_USER_NODE_ENV = production
 #前端回显图片之类的地址
-VITE_APP_API_BASE_UPLOAD_URL =https://dev.ow.f2b211.com/
+VITE_APP_API_BASE_UPLOAD_URL =https://orico.com.cn/

 # 是否启用 gzip 或 brotli 压缩打包，如果需要多个压缩规则，可以使用 “,” 分隔
 # Optional: gzip | brotli | none
--- a/dist.zip
+++ b/dist.zip
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/api/index.ts
+++ b/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;
                }

--- a/src/api/modules/articleClass.ts
+++ b/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
    });
 };
 //文章分类详情(用于编辑)
--- a/src/api/modules/upload.ts
+++ b/src/api/modules/upload.ts
@@ -11,8 +11,8 @@ import http from "@/api";
 * @name 文件上传模块
 */
 // 图片上传
-export const uploadImg = (params: any, name?: any) => {
-    return http.post<any>(`/images/${name}/upload`, params);
+export const uploadImg = (params: any, name?: any, id?: any) => {
+    return http.post<any>(`/images/${name}/upload?imgId=${id}`, params);
 };

 // 视频上传
--- a/src/auto-import.d.ts
+++ b/src/auto-import.d.ts
@@ -4,67 +4,66 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const EffectScope: typeof import('vue')['EffectScope']
-  const ElNotification: typeof import('element-plus/es')['ElNotification']
-  const computed: typeof import('vue')['computed']
-  const createApp: typeof import('vue')['createApp']
-  const customRef: typeof import('vue')['customRef']
-  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
-  const defineComponent: typeof import('vue')['defineComponent']
-  const effectScope: typeof import('vue')['effectScope']
-  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
-  const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const h: typeof import('vue')['h']
-  const inject: typeof import('vue')['inject']
-  const isProxy: typeof import('vue')['isProxy']
-  const isReactive: typeof import('vue')['isReactive']
-  const isReadonly: typeof import('vue')['isReadonly']
-  const isRef: typeof import('vue')['isRef']
-  const markRaw: typeof import('vue')['markRaw']
-  const nextTick: typeof import('vue')['nextTick']
-  const onActivated: typeof import('vue')['onActivated']
-  const onBeforeMount: typeof import('vue')['onBeforeMount']
-  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
-  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
-  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
-  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
-  const onDeactivated: typeof import('vue')['onDeactivated']
-  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
-  const onMounted: typeof import('vue')['onMounted']
-  const onRenderTracked: typeof import('vue')['onRenderTracked']
-  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
-  const onScopeDispose: typeof import('vue')['onScopeDispose']
-  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
-  const onUnmounted: typeof import('vue')['onUnmounted']
-  const onUpdated: typeof import('vue')['onUpdated']
-  const provide: typeof import('vue')['provide']
-  const reactive: typeof import('vue')['reactive']
-  const readonly: typeof import('vue')['readonly']
-  const ref: typeof import('vue')['ref']
-  const resolveComponent: typeof import('vue')['resolveComponent']
-  const shallowReactive: typeof import('vue')['shallowReactive']
-  const shallowReadonly: typeof import('vue')['shallowReadonly']
-  const shallowRef: typeof import('vue')['shallowRef']
-  const toRaw: typeof import('vue')['toRaw']
-  const toRef: typeof import('vue')['toRef']
-  const toRefs: typeof import('vue')['toRefs']
-  const toValue: typeof import('vue')['toValue']
-  const triggerRef: typeof import('vue')['triggerRef']
-  const unref: typeof import('vue')['unref']
-  const useAttrs: typeof import('vue')['useAttrs']
-  const useCssModule: typeof import('vue')['useCssModule']
-  const useCssVars: typeof import('vue')['useCssVars']
-  const useLink: typeof import('vue-router')['useLink']
-  const useRoute: typeof import('vue-router')['useRoute']
-  const useRouter: typeof import('vue-router')['useRouter']
-  const useSlots: typeof import('vue')['useSlots']
-  const watch: typeof import('vue')['watch']
-  const watchEffect: typeof import('vue')['watchEffect']
-  const watchPostEffect: typeof import('vue')['watchPostEffect']
-  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+    const EffectScope: typeof import("vue")["EffectScope"];
+    const computed: typeof import("vue")["computed"];
+    const createApp: typeof import("vue")["createApp"];
+    const customRef: typeof import("vue")["customRef"];
+    const defineAsyncComponent: typeof import("vue")["defineAsyncComponent"];
+    const defineComponent: typeof import("vue")["defineComponent"];
+    const effectScope: typeof import("vue")["effectScope"];
+    const getCurrentInstance: typeof import("vue")["getCurrentInstance"];
+    const getCurrentScope: typeof import("vue")["getCurrentScope"];
+    const h: typeof import("vue")["h"];
+    const inject: typeof import("vue")["inject"];
+    const isProxy: typeof import("vue")["isProxy"];
+    const isReactive: typeof import("vue")["isReactive"];
+    const isReadonly: typeof import("vue")["isReadonly"];
+    const isRef: typeof import("vue")["isRef"];
+    const markRaw: typeof import("vue")["markRaw"];
+    const nextTick: typeof import("vue")["nextTick"];
+    const onActivated: typeof import("vue")["onActivated"];
+    const onBeforeMount: typeof import("vue")["onBeforeMount"];
+    const onBeforeRouteLeave: typeof import("vue-router")["onBeforeRouteLeave"];
+    const onBeforeRouteUpdate: typeof import("vue-router")["onBeforeRouteUpdate"];
+    const onBeforeUnmount: typeof import("vue")["onBeforeUnmount"];
+    const onBeforeUpdate: typeof import("vue")["onBeforeUpdate"];
+    const onDeactivated: typeof import("vue")["onDeactivated"];
+    const onErrorCaptured: typeof import("vue")["onErrorCaptured"];
+    const onMounted: typeof import("vue")["onMounted"];
+    const onRenderTracked: typeof import("vue")["onRenderTracked"];
+    const onRenderTriggered: typeof import("vue")["onRenderTriggered"];
+    const onScopeDispose: typeof import("vue")["onScopeDispose"];
+    const onServerPrefetch: typeof import("vue")["onServerPrefetch"];
+    const onUnmounted: typeof import("vue")["onUnmounted"];
+    const onUpdated: typeof import("vue")["onUpdated"];
+    const provide: typeof import("vue")["provide"];
+    const reactive: typeof import("vue")["reactive"];
+    const readonly: typeof import("vue")["readonly"];
+    const ref: typeof import("vue")["ref"];
+    const resolveComponent: typeof import("vue")["resolveComponent"];
+    const shallowReactive: typeof import("vue")["shallowReactive"];
+    const shallowReadonly: typeof import("vue")["shallowReadonly"];
+    const shallowRef: typeof import("vue")["shallowRef"];
+    const toRaw: typeof import("vue")["toRaw"];
+    const toRef: typeof import("vue")["toRef"];
+    const toRefs: typeof import("vue")["toRefs"];
+    const toValue: typeof import("vue")["toValue"];
+    const triggerRef: typeof import("vue")["triggerRef"];
+    const unref: typeof import("vue")["unref"];
+    const useAttrs: typeof import("vue")["useAttrs"];
+    const useCssModule: typeof import("vue")["useCssModule"];
+    const useCssVars: typeof import("vue")["useCssVars"];
+    const useLink: typeof import("vue-router")["useLink"];
+    const useRoute: typeof import("vue-router")["useRoute"];
+    const useRouter: typeof import("vue-router")["useRouter"];
+    const useSlots: typeof import("vue")["useSlots"];
+    const watch: typeof import("vue")["watch"];
+    const watchEffect: typeof import("vue")["watchEffect"];
+    const watchPostEffect: typeof import("vue")["watchPostEffect"];
+    const watchSyncEffect: typeof import("vue")["watchSyncEffect"];
 }
 // for type re-export
 declare global {
-  // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+    // @ts-ignore
+    export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from "vue";
 }
--- a/src/components/Editor/index.scss
+++ b/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";
+// }
--- a/src/components/Editor/index.vue
+++ b/src/components/Editor/index.vue
@@ -1,18 +1,19 @@
 <template>
+    <!-- 图片上传组件 -->
    <el-upload
        :id="uuid"
        action="#"
-        :multiple="false"
+        :multiple="true"
        :show-file-list="false"
        :http-request="handleHttpUpload"
        :before-upload="handleBeforeUpload"
        class="editor-img-uploader"
-        accept=".jpeg,.jpg,.png"
+        accept=".jpeg,.jpg,.png,.gif"
    >
        <i ref="uploadRef" class="Plus editor-img-uploader"></i>
    </el-upload>

-    <!-- 使用input 标签劫持原本视频上传事件，实现视频上传 -->
+    <!-- 视频上传组件 -->
    <input
        type="file"
        accept="video/*"
@@ -22,221 +23,655 @@
        @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"
+            v-model:content="editorContent"
            @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"
+                v-if="tabsData.length"
+            >
+                <!-- 标签页：标题支持编辑 -->
+                <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"
+                                max-length=""
+                                :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";
+// /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";
-// 引入插入图片标签自定义的类
+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 = reactive([]);
+// 标题编辑输入框的ref
+const editInputRefs = ref([]);
+const currentEditingTabsRef = ref(null);
+// Props
 const props = defineProps({
-    /* 编辑器的内容 */
-    content: {
-        type: String,
-        default: ""
-    },
-    /* 只读 */
-    readOnly: {
-        type: Boolean,
-        default: false
-    },
-    // 上传文件大小限制(MB)
-    fileSizeLimit: {
-        type: Number,
-        default: 10
-    }
+    content: { type: String, default: "" },
+    readOnly: { type: Boolean, default: false },
+    fileSizeLimit: { type: Number, default: 10 }
 });
-//值
+
+// 主编辑器内容双向绑定
 const editorContent = computed({
-    get: () => props.content,
+    get: () => {
+        return props.content;
+    },
    set: val => {
        emit("update:content", val);
    }
 });
-//富文本ref
-const myQuillEditor = ref(null);
-//富文本值
-const oldContent = ref("");
-//富文本配置项
+const myQuillEditor = ref(null); // 主编辑器ref
+
+// 主编辑器配置（保持不变）
 const options = reactive({
    theme: "snow",
    debug: "warn",
+    strict: false,
    modules: {
-        // 工具栏配置
        toolbar: {
            container: [
-                ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
-                ["blockquote", "code-block"], // 引用  代码块
-                [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
-                [{ indent: "-1" }, { indent: "+1" }], // 缩进
-                [{ size: ["small", false, "large", "huge"] }], // 字体大小
-                [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
-                [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
-                [{ align: [] }], // 对齐方式
-                ["clean"], // 清除文本格式
-                ["link", "image", "video"] // 链接、图片、视频
+                ["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("image", true);
-                    }
+                    } else Quill.format("customImage", true);
                },
                video: function (value) {
                    if (value) {
-                        // 劫持原来的视频点击按钮事件
+                        activeEditor.value = "main";
                        document.querySelector("#uploadFileVideo")?.click();
-                    } else {
-                        Quill.format("video", true);
-                    }
+                    } else Quill.format("customVideo", true);
+                },
+                tabs: function (value) {
+                    outerVisible.value = value;
                }
            }
        }
    },
    placeholder: "请输入内容...",
-    readOnly: props.readOnly,
-    clipboard: {
-        matchers: [
-            [
-                "img",
-                (node, delta) => {
-                    const src = node.getAttribute("src");
-                    const id = node.getAttribute("id");
-                    delta.insert({ image: { src, id: id } });
-                }
-            ]
-        ]
-    }
+    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);

-    // 图片
-    if (
-        fileType == "image/jpeg" ||
-        fileType == "image/png" ||
-        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(`文件格式不正确！`);
+    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();
-    //这里要根据后端设置的name设置key值,如果name是file就传file是image就传image
    formData.append("image", options.file);
+    imageList.value.push(options.file);
+
    try {
-        const result = await uploadImg(formData, routerName.value);
-        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);
+        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[tabIndex]);
+                    quill = rawQuillEditor.getQuill();
+                }
+
+                imageListDb.value.forEach(item => {
+                    const length = quill.getLength() - 1;
+                    quill.insertEmbed(length, "customImage", {
+                        url: item.path,
+                        id: item.serverImgId || generateUUID()
+                    });
+                    quill.setSelection(length + 1);
+                });
+
+                const finalLength = quill.getLength();
+                quill.setSelection(finalLength);
+
+                imageList.value = [];
+                imageListDb.value = [];
+            }
        }
-    } catch (error) {}
+    } 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: 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) {
+    if (evt.target.files.length === 0) return;
+    const file = evt.target.files[0];
+
+    // 1. 校验视频文件
+    const maxSize = props.fileSizeLimit * 1024 * 1024 * 15;
+    if (file.size > maxSize) {
+        ElNotification({
+            title: "文件过大",
+            message: `视频大小不能超过 ${props.fileSizeLimit}MB`,
+            type: "warning"
+        });
        return;
    }
-    const formData = new FormData();
-    formData.append("video", evt.target.files[0]);
+
+    // 2. 生成视频本地URL（用于生成封面，不上传）
+    const localVideoUrl = URL.createObjectURL(file);
+
    try {
-        let quill = toRaw(myQuillEditor.value).getQuill();
-        // 获取光标位置
-        let length = quill.selection.savedRange.index;
-        const { data } = await uploadVideo(formData);
-        quill.insertEmbed(length, "video", {
-            url: h + data.path, //h + data.fileUrl, //
-            id: generateUUID()
-        });
-        uploadFileVideo.value.value = "";
+        // 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 onContentChange = content => {
-    emit("handleRichTextContentChange", content);
-};
-// 增加hover工具栏有中文提示
-const initTitle = () => {
-    document.getElementsByClassName("ql-editor")[0].dataset.placeholder = "";
-    for (let item of titleConfig.value) {
-        let tip = document.querySelector(".ql-toolbar " + item.Choice);
-        if (!tip) continue;
-        tip.setAttribute("title", item.title);
+// 辅助方法：插入视频到编辑器
+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);
+    activeName.value = key;
+    activeEditor.value = `tab-${tabIndex}`;
+};
+
+// 标签页增删事件
+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;
+        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.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 => {
+    console.log(content, "=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.insertText(range.index, "\n"); // 插入换行
+        quill.setSelection(range.index + 1);
+        quill.insertText(range.index, "\n"); // 插入换行
+    }
+    // 关闭弹窗并清空临时数据
+    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;
+    nextTick(() => {
+        initTitle();
+        // 监听编辑按钮点击事件
+        const editorEl = document.querySelector(".ql-editor");
+        if (editorEl) {
+            editorEl.addEventListener("edit-tabs", e => {
+                console.log(e.detail.blot, "=e.detail=");
+                const tabsData = TabsBlot.value(e.detail.blot.domNode);
+                if (tabsData.length > 0) {
+                    // 保存当前编辑的标签页引用
+                    currentEditingTabsRef.value = e.detail.blot;
+                    // 加载数据到弹窗
+                    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>
+./quill-image1111
--- a/src/components/Editor/index2.vue
+++ b/src/components/Editor/index2.vue
@@ -0,0 +1,578 @@
+<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"
+                    @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"
+                                max-length=""
+                                :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, 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]);
+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: "" },
+    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: 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: 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") {
+        if (tabsData.value.length > 5) {
+            return useMsg("error", "标签页已达上限 !");
+        }
+        // 新增标签页：生成唯一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.insertText(range.index, "\n"); // 插入换行
+        quill.setSelection(range.index + 1);
+        quill.insertText(range.index, "\n"); // 插入换行
+    }
+    // 关闭弹窗并清空临时数据
+    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();
+    // 监听编辑按钮点击事件
+    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>
+./quill-image1111
--- a/src/components/Editor/quill-image.js
+++ b/src/components/Editor/quill-image.js
@@ -5,9 +5,14 @@ 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) {
+        super.deleteAt(index, length);
+    }
    static value(node) {
        return {
            url: node.getAttribute("src"),
@@ -15,6 +20,6 @@ class ImageBlot extends BlockEmbed {
        };
    }
 }
-ImageBlot.blotName = "image";
+ImageBlot.blotName = "customImage";
 ImageBlot.tagName = "img";
 export default ImageBlot;
--- a/src/components/Editor/quill-image1111.js
+++ b/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;
--- a/src/components/Editor/quill-tabs.js
+++ b/src/components/Editor/quill-tabs.js
@@ -0,0 +1,407 @@
+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 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: 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(
+            "style",
+            `
+            padding: 15px;
+        `
+        );
+
+        // 生成内容面板 - 保持原有样式不变
+        tabs.forEach((tab, index) => {
+            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);
+        });
+
+        // 组装结构
+        tabScrollContainer.appendChild(tabList);
+        node.appendChild(tabScrollContainer); // 滚动容器添加到主节点
+        node.appendChild(contentList); // 内容区
+
+        // 标签页切换逻辑 - 保持原有逻辑不变
+        const scriptTag = document.createElement("script");
+        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'; // 管理系统强制显示按钮
+                    editBtn1.style.width='60px';
+                    editBtn1.style.minWidth='60px';
+                }
+                
+                // 非管理系统才执行标签切换逻辑（管理系统不执行）
+                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', \`
+                                    font-weight: 900;
+                                    cursor: pointer;
+                                    background: transparent;
+                                    font-size:16px;
+                                    white-space:nowrap;
+                                    padding-bottom:14px;
+                                    margin-right:3%;
+                                    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';
+                            });
+                             // 添加滚动逻辑到自执行函数中
+                            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(scriptTag);
+        node.setAttribute("contenteditable", "false");
+        return node;
+    }
+
+    bindEvents() {
+        if (!this.eventBoundElements) {
+            this.eventBoundElements = new WeakMap();
+        }
+
+        // 编辑按钮事件 - 保持原有逻辑不变
+        const editBtn = this.domNode.querySelector(".m-quill-tab-edit-btn");
+        if (editBtn) {
+            editBtn.removeEventListener("click", this.handleEditClick);
+            this.handleEditClick = e => {
+                e.stopPropagation();
+                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",
+                `
+                font-weight: 900;
+                cursor: pointer;
+                background: transparent;
+                border: none;
+                font-size:16px;
+                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;" : ""}
+            `
+            );
+        });
+
+        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(".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);
+    }
+
+    // 更新标签页数据 - 保持原有逻辑不变
+    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",
+                `
+                font-weight: 900;
+                color: #8f9099;
+                cursor: pointer;
+                background: transparent;
+                border: none;
+                padding-bottom:14px;
+                margin-right:3%;
+                white-space:nowrap;
+                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;
--- a/src/components/Editor/quill-tabs1.js
+++ b/src/components/Editor/quill-tabs1.js
@@ -0,0 +1,398 @@
+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 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 = "m-quill-tab-list";
+        tabList.setAttribute(
+            "style",
+            `
+            display: flex;
+            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 = "m-quill-tab-content-list";
+        contentList.setAttribute(
+            "style",
+            `
+            padding: 15px;
+        `
+        );
+
+        // 生成内容面板 - 保持原有样式不变
+        tabs.forEach((tab, index) => {
+            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);
+        });
+
+        // 组装结构
+        tabScrollContainer.appendChild(tabList);
+        node.appendChild(tabScrollContainer); // 滚动容器添加到主节点
+        node.appendChild(contentList); // 内容区
+
+        // 标签页切换逻辑 - 保持原有逻辑不变
+        const scriptTag = document.createElement("script");
+        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: 1%;
+                                    font-weight: 900;
+                                    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';
+                            });
+                        });
+                    });
+                }
+            })();
+        `;
+
+        node.appendChild(scriptTag);
+        node.setAttribute("contenteditable", "false");
+        return node;
+    }
+
+    bindEvents() {
+        if (!this.eventBoundElements) {
+            this.eventBoundElements = new WeakMap();
+        }
+
+        // 编辑按钮事件 - 保持原有逻辑不变
+        const editBtn = this.domNode.querySelector(".m-quill-tab-edit-btn");
+        if (editBtn) {
+            editBtn.removeEventListener("click", this.handleEditClick);
+            this.handleEditClick = e => {
+                e.stopPropagation();
+                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: 1%;
+                font-weight: 900;
+                cursor: pointer;
+                background: transparent;
+                border: none;
+                font-size:16px;
+                margin-right: 1%;
+                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";
+        });
+
+        // 滚动到当前选中的标签
+        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(".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);
+    }
+
+    // 更新标签页数据 - 保持原有逻辑不变
+    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();
+    }
+}
+
+export default TabsBlot;
--- a/src/components/Editor/quill-video.js
+++ b/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);
-        node.setAttribute("src", this.sanitize(value.url));
+
+        // 处理视频URL，添加时间片段定位到0.001秒（避开黑屏）
+        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"),
-            poster: domNode.getAttribute("poster")
+            url: domNode.getAttribute("src").split("#")[0],
+            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();
-        return `<a href="${video}">${video}</a>`;
+        const { url, poster } = this.value();
+        return `<video src="${url}" ${poster ? `poster="${poster}"` : ""} controls playsinline webkit-playsinline ></video>`;
    }
 }
-Video.blotName = "video"; // 这里不用改，不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
-Video.className = "ql-video"; // 可添加样式，看实际使用需要
-Video.tagName = "video"; // 用video标签替换iframe
+//style="width:600px;height:300px;"
+Video.blotName = "customVideo";
+// Video.className = "ql-video";
+Video.tagName = "video";

 export default Video;
--- a/src/components/Editor/quill-video11.js
+++ b/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;
--- a/src/components/FormTable/index.vue
+++ b/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"
--- a/src/components/Upload/UploadImg.vue
+++ b/src/components/Upload/UploadImg.vue
@@ -73,7 +73,7 @@ const props = withDefaults(defineProps<UploadFileProps>(), {
    drag: true,
    disabled: false,
    fileSize: 5,
-    fileType: () => ["image/jpeg", "image/png", "image/gif"],
+    fileType: () => ["image/jpeg", "image/png", "image/gif", "image/webp"],
    height: "150px",
    width: "150px",
    borderRadius: "8px"
@@ -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) {
-            const { data } = result;
-            emit("update:imageUrl", data.path);
+        console.log(result, "============>>>");
+        if (result?.data?.code === 0) {
+            emit("update:imageUrl", result?.data?.data.path);
        }

        // 调用 el-form 内部的校验方法（可自动校验）
@@ -151,7 +151,9 @@ const editImg = () => {
 * @param rawFile 选择的文件
 * */
 const beforeUpload: UploadProps["beforeUpload"] = rawFile => {
+    // console.log(rowFile.type, "=============1111111111");
    const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
+
    const imgType = props.fileType.includes(rawFile.type as File.ImageMimeType);

    if (!imgType)
--- a/src/components/Upload/UploadImgs.vue
+++ b/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();
-console.log("uid:", uid);
+// let uid = generateUUID();
 interface UploadFileProps {
    fileList: UploadUserFile[];
    api?: (params: any) => Promise<any>; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
@@ -66,7 +65,7 @@ const props = withDefaults(defineProps<UploadFileProps>(), {
    disabled: false,
    limit: 9,
    fileSize: 5,
-    fileType: () => ["image/jpeg", "image/png", "image/gif"],
+    fileType: () => ["image/jpeg", "image/png", "image/gif", "image/webp"],
    height: "150px",
    width: "150px",
    borderRadius: "8px"
@@ -134,9 +133,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==========");
-        options.onSuccess(data.path);
+        console.log(data.data.path, "========data==========");
+        options.onSuccess(data.data.path);
    } catch (error) {
        options.onError(error as any);
    }
--- a/src/components/WangEditor/index.vue
+++ b/src/components/WangEditor/index.vue
@@ -29,7 +29,6 @@ const handleCreated = (editor: any) => {
    editorRef.value = editor;
 };

-console.log(editorRef.value, "=editorRef.value=");
 const $router = useRouter();
 const routerValueName: string = $router.currentRoute.value.name as string;
 const routerObj: any = {
--- a/src/components/rulesForm/index.vue
+++ b/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}`]"
@@ -159,7 +159,7 @@
                        show-checkbox
                        check-strictly
                        @change="handleSelectChange(_ruleForm[`${item.prop}`], item.prop)"
-                        style="max-width: 240px"
+                        style="max-width: 340px"
                    />
                </template>
                <template v-if="item.type === 'treeSelects'">
@@ -171,14 +171,14 @@
                        show-checkbox
                        check-strictly
                        check-on-click-node
-                        style="width: 240px"
+                        style="width: 340px"
                    />
                </template>
                <template v-if="item.type === 'treeSelectInput'">
                    <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>

--- a/src/styles/element.scss
+++ b/src/styles/element.scss
@@ -271,5 +271,5 @@
    white-space: nowrap;
 }
 .el-message__wrapper {
-    z-index: 9999; /* 一个较大的值，确保在抽屉之上 */
+    z-index: 3000 !important; /* 一个较大的值，确保在抽屉之上 */
 }
--- a/src/utils/outLogin.ts
+++ b/src/utils/outLogin.ts
@@ -4,8 +4,8 @@ import { useUserStore } from "@/stores/modules/user";
 //不同环境的login地址
 const LOGIN_OBJ: any = {
    development: "http://localhost:8080/admin/login", //开发环境
-    test: "https://dev.ow.admin.f2b211.com/", //测试环境
-    production: "http://localhost:8080/login" //生产环境
+    test: "https://dev.orico.com.cn/admin/login", //测试环境
+    production: "https://orico.com.cn/admin/login" //生产环境
 };
 /**
 /**
--- a/src/views/QAManagement/list/edit.vue
+++ b/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 = "";
 };

--- a/src/views/articleManagement/class/constant/edit.ts
+++ b/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: [],
--- a/src/views/articleManagement/class/index.vue
+++ b/src/views/articleManagement/class/index.vue
@@ -6,13 +6,7 @@
        </div>
        <div class="card table-main">
            <SearchForm :search="search" :reset="reset" :formData="dataStore.formData" :search-param="dataStore.ruleForm" />
-            <el-table
-                :data="dataStore.tableData"
-                style="width: 100%; margin-bottom: 20px; font-size: 14px"
-                row-key="id"
-                border
-                default-expand-all
-            >
+            <el-table :data="dataStore.tableData" style="width: 100%; margin-bottom: 20px; font-size: 14px" row-key="id" border>
                <el-table-column prop="id" label="id" />
                <el-table-column prop="name" label="分类名称" />
                <el-table-column prop="sort" label="分类排序">
@@ -82,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";
@@ -180,7 +175,6 @@ const getArticleClassAddSave = async () => {
 };
 //文章编辑
 const getArticleClassUpEdit = async () => {
-    console.log("编辑");
    const result = await getArticleClassEditUpApi(dataStore.editRuleForm);
    const { msg, code } = result;

--- a/src/views/articleManagement/list/edit.vue
+++ b/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();
    }
--- a/src/views/articleManagement/list/index.vue
+++ b/src/views/articleManagement/list/index.vue
@@ -66,6 +66,7 @@ const getArticleClassData = async () => {
    const result = await getArticleClassDataApi();
    if (result?.code === 0) {
        const { data } = result;
+        console.log(data, "============>>>>>");
        dataStore.formData[1].options = addLabelValue(data);
    }
 };
--- a/src/views/articleManagement/recycle/constant/search.ts
+++ b/src/views/articleManagement/recycle/constant/search.ts
@@ -27,7 +27,7 @@ export const FORM_DATA: FormItem[] = [
    {
        prop: "category_id",
        placeholder: "请选择",
-        type: "select",
+        type: "treeSelect",
        isArray: true,
        label: "文章分类: ",
        options: []
--- a/src/views/bannerManagement/list/constant/edit.ts
+++ b/src/views/bannerManagement/list/constant/edit.ts
@@ -70,7 +70,11 @@ export const EDIT_FORM_DATA: FormItem[] = [
        type: "upImg",
        label: "Banner图片: "
    },
-
+    {
+        prop: "extra_image",
+        type: "upImg",
+        label: "悬浮图: "
+    },
    {
        prop: "banner_id",
        placeholder: "请选择",
@@ -157,7 +161,7 @@ export const EDIT_FORM_DATA1: FormItem[] = [
            },
            {
                label: "否",
-                value: 0
+                value: -1
            }
        ]
    },
@@ -166,7 +170,11 @@ export const EDIT_FORM_DATA1: FormItem[] = [
        type: "upImg",
        label: "Banner图片: "
    },
-
+    // {
+    //     prop: "image1",
+    //     type: "upImg",
+    //     label: "Banner图片1: "
+    // },
    {
        prop: "banner_id",
        placeholder: "请选择",
@@ -211,7 +219,8 @@ export const EDIT_FORM_DATA1: FormItem[] = [

 export const EDIT_RULE_FORM = {
    type: "image",
-    sort: 1
+    sort: 1,
+    status: 1
 };
 // editRuleForm: {},
 //editFormData: [],
--- a/src/views/bannerManagement/list/index.vue
+++ b/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,7 +141,8 @@ const getProductCategoryList = async () => {
    const result = await getProductCategoryListApi();
    if (result?.code === 0) {
        let dataClone: any = cloneDeep(result?.data);
-        dataStore.editFormData[6].options = addLabelValue(dataClone);
+        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;
@@ -189,10 +192,10 @@ const getSystemUrls = async (node: any, resolve: any) => {
        }
    } else {
        //第二次请求
-        if (node.data.children) {
-            resolve(node.data.children);
+        if (node?.data?.children) {
+            resolve(node?.data?.children);
        }
-        if (!node.data.children.length && !node.data.url && node.level > 1) {
+        if (!node?.data?.children?.length && !node?.data?.url && node?.level > 1) {
            const [link_to, id] = node?.data?.value?.split("/");
            const result = await getSystemUrlsApi({ link_to, id });
            if (result?.code === 0) {
@@ -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);
    }
@@ -222,33 +226,36 @@ const getBannerRead = async (id: any) => {
    dataStore.visible = true;
    const result = await getBannerReadApi(id);
    if (result?.code === 0) {
-        dataStore.editRuleForm = result?.data;
-        // setImgOrVideo(result);
-        await setImgOrVideo(result);
-        dataStore.editRuleForm = await result?.data;
+        setImgOrVideo(result);
        getProductCategoryList();
-
-        if (dataStore.editRuleForm.link && dataStore.editRuleForm.link_to) {
-            let { id, name, link } = dataStore.editRuleForm.link_echo_data;
-            if (!id || !name || !link) {
-                return;
-            }
-            let obj: any = {
-                label: name, // 确保这里的name是你想要显示的文本
-                value: `${dataStore.editRuleForm.link_to}` + "/" + `${id}` + "/" + `${name}`,
-                url: link,
-                link_to: dataStore.editRuleForm.link_to,
-                children: []
-            };
-            let data: any = [];
-            data.push(obj);
-            selectedNodes.value = obj.value;
-            dataStore.data = data;
+        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) {
+                let { id, name, link } = dataStore.editRuleForm.link_echo_data;
+                if (!id || !name || !link) {
+                    return;
+                }
+                let obj: any = {
+                    label: name, // 确保这里的name是你想要显示的文本
+                    value: `${dataStore.editRuleForm.link_to}` + "/" + `${id}` + "/" + `${name}`,
+                    url: link,
+                    link_to: dataStore.editRuleForm.link_to,
+                    children: []
+                };
+                let data: any = [];
+                data.push(obj);
+                selectedNodes.value = obj.value;
+                dataStore.data = data;
+            }
+        });
    }
 };
 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;
@@ -274,18 +281,19 @@ const getBannerUp = async () => {
        formRef!.value!.ruleFormRef.resetFields();
        proTableRef?.value?.getTableList();
        dataStore.isFirstRequest = true;
+        useMsg("success", result?.msg);
    }
 };
 //详情里的分类
 const getBannerClassEditList = async () => {
    const result = await getBannerClassListApi();
    if (result?.code === 0) {
-        // let arr: any = [];
-        // result?.data?.forEach((item: any) => {
-        //     arr.push({ value: item.id, label: item.name });
-        // });
        dataStore.formData[1].options = addLabelValue(result?.data);
-        dataStore.editFormData[5].options = addLabelValue(result?.data);
+        dataStore.editFormData.forEach((item: any) => {
+            if (item.prop === "banner_id") {
+                item.options = addLabelValue(result?.data);
+            }
+        });
    }
 };
 getBannerClassEditList();
@@ -330,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 = () => {
@@ -343,14 +354,18 @@ const handleResetClick = () => {
 const handleAdd = () => {
    dataStore.title = "添加Banner";
    dataStore.visible = true;
-    getBannerClassEditList();
+    selectedNodes.value = "";
+    dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+    (dataStore.editFormData = cloneDeep(EDIT_FORM_DATA)), // 抽屉表单配置项
+        getBannerClassEditList();
    // getBannerClassList();
    getProductCategoryList();
 };
 // 抽屉关闭前的钩子
 const handleBeforeClone = () => {
    dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
-    resetFields();
+    (dataStore.editFormData = cloneDeep(EDIT_FORM_DATA)), // 抽屉表单配置项
+        resetFields();
    dataStore.visible = false;
    dataStore.isFirstRequest = true;
 };
--- a/src/views/downloadManagement/class/index.vue
+++ b/src/views/downloadManagement/class/index.vue
@@ -7,13 +7,7 @@

        <div class="card table-main">
            <SearchForm :search="search" :reset="reset" :formData="dataStore.formData" :search-param="dataStore.ruleForm" />
-            <el-table
-                :data="dataStore.tableData"
-                style="width: 100%; margin-bottom: 20px; font-size: 14px"
-                row-key="id"
-                border
-                default-expand-all
-            >
+            <el-table :data="dataStore.tableData" style="width: 100%; margin-bottom: 20px; font-size: 14px" row-key="id" border>
                <el-table-column prop="id" label="id" />
                <el-table-column prop="name" label="下载分类名称" />
                <el-table-column prop="sort" label="下载分类排序">
--- a/src/views/downloadManagement/list/edit.vue
+++ b/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: `文件上传成功！`,
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -36,25 +36,25 @@
                                autocomplete="off"
                            />
                            <!-- <div
-                                style="
-                                    width: 350px;
-                                    font-size: 12px;
-                                    line-height: 1;
-                                    color: #4178d5;
-                                    text-align: right;
-                                    cursor: pointer;
-                                "
-                                @click="handleTabClick(2)"
-                            >
-                                忘记密码?
-                            </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> -->
+                          <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"
--- a/src/views/login/index2.vue
+++ b/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>
--- a/src/views/productManagement/classList/index.vue
+++ b/src/views/productManagement/classList/index.vue
@@ -8,13 +8,8 @@
                :formData="dataStore.searchFormData"
                :search-param="dataStore.searchParam"
            />
-            <el-table
-                :data="dataStore.tableData"
-                style="width: 100%; margin-bottom: 20px; font-size: 14px"
-                row-key="id"
-                border
-                default-expand-all
-            >
+            <!-- default-expand-all -->
+            <el-table :data="dataStore.tableData" style="width: 100%; margin-bottom: 20px; font-size: 14px" row-key="id" border>
                <el-table-column prop="id" label="id" />
                <el-table-column prop="name" label="分类名称" />
                <el-table-column prop="sort" label="分类排序">
@@ -154,7 +149,6 @@ const getArticleCategorySave = async (params: any) => {
 };

 const handleSelectChangeEmits = (value: any) => {
-    console.log(value, "===============value1111111============");
    if (value.prop === "pid") {
        dataStore.ruleForm.pid = value.id;
    }
--- a/src/views/productManagement/list/components/basicInfo.vue
+++ b/src/views/productManagement/list/components/basicInfo.vue
@@ -9,7 +9,7 @@
                <el-input v-model="_ruleFormParam.short_name" style="width: 440px" />
            </el-form-item>
            <el-form-item label="型号" required>
-                <el-input v-model="_ruleFormParam.spu" style="width: 440px" />
+                <el-input v-model="_ruleFormParam.spu" style="width: 440px" disabled />
            </el-form-item>
            <el-form-item label="产品分类" style="width: 440px" required>
                <!-- <el-input v-model="_ruleFormParam.category_id" /> -->
@@ -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"
--- a/src/views/productManagement/list/components/imgInfo.vue
+++ b/src/views/productManagement/list/components/imgInfo.vue
@@ -190,7 +190,6 @@ const echoData = () => {
    });

    imgInfoDataStore.skus = newSkus;
-    console.log(imgInfoDataStore, "=imgInfoDataStore=");
    handleCheckboxChange();
 };
 const callEchoDataIfHasValue = () => {
--- a/src/views/productManagement/list/edit.vue
+++ b/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();
@@ -110,6 +113,7 @@ getProductAttrsList();
 const getProductList = async (query: any) => {
    const result: any = await getProductListApi({
        spu: query,
+        is_show: 1,
        page: 1,
        size: 1000
    });
@@ -165,6 +169,7 @@ const handleRelatedAdd = () => {
 };
 //相关信息及下载远程搜索
 const handleRemote = debounce((params: any) => {
+    console.log(params, "============>>>>");
    getProductList(params.query);
 }, 800);
 //产品属性接口
--- a/src/views/productManagement/list/utils/edit/initDetailParams.ts
+++ b/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,16 @@ 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);
-    //dataStore.detail = convertSpanToDiv(dataStore.detail);
+    if (!data.detail) {
+        dataStore.detail = "";
+        editorRef?.value?.clearEditor(); // 调用子组件的清空方法
+    } else {
+        dataStore.detail = data.detail;
+    }
+
    //图片
    dataStore.imgInfoData.cover_image = data.cover_image;
    dataStore.imgInfoData.video_url = data.video_url;
--- a/src/views/productManagement/list/utils/edit/reset.ts
+++ b/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);
    });
 };
--- a/src/views/productManagement/list/utils/edit/submit.ts
+++ b/src/views/productManagement/list/utils/edit/submit.ts
@@ -69,7 +69,7 @@ export const handleSubmit = async (infoRef: any, imgInfoRef: any, dataStore: any
        video_url,
        video_img,
        skus: skusCloneStr,
-        detail: dataStore.details,
+        detail: dataStore.detail,
        related: JSON.stringify(relatedData) || []
    };

--- a/src/views/webManagement/configuration/constant/edit.ts
+++ b/src/views/webManagement/configuration/constant/edit.ts
@@ -21,7 +21,7 @@ interface FormItem {
 export const EDIT_FORM_DATA: FormItem[] = [
    {
        prop: "name",
-        placeholder: "请输入",
+        placeholder: "以“.”分隔，可对同分组内配置再次分组，支持多维",
        type: "input",
        label: "配置标识: "
    },
@@ -60,7 +60,8 @@ export const EDIT_FORM_DATA: FormItem[] = [
    {
        prop: "extra",
        type: "textarea",
-        label: "配置项: "
+        label: "配置项: ",
+        placeholder: "选项型配置时：选项值:选项名['联动配置项的“配置标识”', ......]，联动配置项为可选"
    },
    {
        prop: "remark",
--- a/src/views/webManagement/nav/index.vue
+++ b/src/views/webManagement/nav/index.vue
@@ -132,7 +132,7 @@ const dataStore = reactive<any>({
    isFirstRequest: true,
    selectRow: {} //当前选择的row
 });
-const selectedNodes = ref(null);
+const selectedNodes = ref("");
 const treeRef = ref(null);
 // 配置 tree-select 的属性
 const treeProps = {
@@ -202,11 +202,17 @@ const getNavClassList = async () => {
 getNavClassList();
 //详情接口
 const getItemsRead = async (id: any) => {
+    selectedNodes.value = "";
+    dataStore.data = [];
+    dataStore.title = "编辑Banner";
+    dataStore.visible = true;
+
    const result = await getItemsReadApi(id);
    dataStore.title = "编辑导航";
    dataStore.visible = true;
    if (result?.code === 0) {
        dataStore.editRuleForm = result?.data;
+        console.log(dataStore.editRuleForm, "===========>>>>");
        if (dataStore.editRuleForm.link && dataStore.editRuleForm.link_to) {
            let { id, name, link } = dataStore.editRuleForm.link_echo_data;
            if (!id || !name || !link) {
@@ -353,9 +359,12 @@ const handleResetClick = () => {
 const handleAdd = () => {
    dataStore.title = "添加导航";
    dataStore.visible = true;
+    selectedNodes.value = "";
 };
 const resetForm = () => {
    dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+    // dataStore.editRuleForm.link_to = "";
+    // dataStore.editRuleForm.link = "";
 };
 //抽屉关闭前的钩子
 const handleBeforeClone = () => {
--- a/src/views/webManagement/set/components/RecursiveForm.vue
+++ b/src/views/webManagement/set/components/RecursiveForm.vue
@@ -11,12 +11,13 @@
                    {{ extraItem.name }}
                </el-radio>
            </el-radio-group>
+            <span style="margin-left: 20px; color: #999999" v-if="config.remark">({{ config.remark }})</span>
        </el-form-item>
        <el-form-item :label="config.title" v-if="config.type === 'text'">
-            <el-input v-model="config.value" style="width: 400px"> </el-input>
+            <el-input v-model="config.value" style="width: 400px" :placeholder="config.remark"> </el-input>
        </el-form-item>
        <el-form-item v-if="config.type === 'select'" :label="config.title">
-            <el-select v-model="config.value" placeholder="请选择">
+            <el-select v-model="config.value" :placeholder="config.remark">
                <el-option
                    v-for="extraItem in config.extra"
                    :key="extraItem.value"
@@ -32,12 +33,14 @@
                    {{ extraItem.name }}
                </el-checkbox>
            </el-checkbox-group>
+            <span style="margin-left: 20px; color: #999999" v-if="config.remark">({{ config.remark }})</span>
        </el-form-item>
        <el-form-item v-if="config.type === 'image'" :label="config.title">
            <UploadImg v-model:image-url="config.value" />
        </el-form-item>
        <el-form-item v-if="config.type === 'textarea'" :label="config.title">
-            <el-input v-model="config.value" type="textarea" :rows="8" style="width: 400px"> </el-input>
+            <el-input v-model="config.value" type="textarea" :rows="8" style="width: 400px" :placeholder="config.remark">
+            </el-input>
        </el-form-item>

        <el-form-item v-if="config.type === 'file'" :label="config.title">
--- a/src/views/webManagement/set/index.vue
+++ b/src/views/webManagement/set/index.vue
@@ -8,7 +8,7 @@
        <div class="card table-main">
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane :label="item.name" :name="item.name" v-for="(item, index) in dataStore.list" :key="index">
-                    <el-form :model="dataStore.formData" label-width="120px">
+                    <el-form :model="dataStore.formData" label-position="top">
                        <RecursiveForm :configs="item.configs" />
                    </el-form>
                </el-tab-pane>
@@ -108,4 +108,9 @@ const handleClick = () => {
 };
 </script>

-<style scoped></style>
+<style scoped lang="scss">
+::v-deep(.el-form-item__label) {
+    font-weight: 900;
+    color: #333333;
+}
+</style>
--- a/vite.config.ts.timestamp-1752636911283-0a4ac4d78e007.mjs
+++ b/vite.config.ts.timestamp-1752636911283-0a4ac4d78e007.mjs
--- a/vite.config.ts.timestamp-1753426525446-28eee6cbb234d.mjs
+++ b/vite.config.ts.timestamp-1753426525446-28eee6cbb234d.mjs
Author	SHA1	Message	Date
yangchunlong	41da6b1914	feat: 🚀 tabs	2025-07-29 11:41:09 +08:00
yangchunlong	1a97f75546	feat: 🚀 tabs增加滚动条	2025-07-28 10:03:07 +08:00
yangchunlong	b3bffac35e	feat: 🚀 富文本自定义tabs功能	2025-07-24 15:21:08 +08:00
yangchunlong	da149760cb	feat: 🚀 tabs功能基本完成	2025-07-23 15:42:28 +08:00
yangchunlong	d79c3f8191	feat: 🚀 优化编辑器自定义图片和视频命名	2025-07-22 16:13:26 +08:00
yangchunlong	2347bc6f0c	feat: 🚀 不知道修复了没有	2025-07-22 14:26:12 +08:00
yangchunlong	f867f50114	feat: 🚀 文章分类添加图片	2025-07-18 15:05:07 +08:00
yangchunlong	fd0aaee998	feat: 🚀 图片排序	2025-07-17 15:51:07 +08:00
yangchunlong	e2261c5fc4	feat: 🚀 图片排序	2025-07-17 15:20:57 +08:00
yangchunlong	cc894333bf	feat: 🚀 批量图片排序	2025-07-17 10:48:59 +08:00
yangchunlong	e24a4adec6	feat: 🚀 图片上传按顺序回显	2025-07-16 15:36:48 +08:00
yangchunlong	ebef3963f8	feat: 🚀 优化富文本多张图片上传	2025-07-14 17:53:37 +08:00
yangchunlong	0ecb7691da	feat: 🚀 登出地址	2025-07-14 10:57:34 +08:00
yangchunlong	9c2253a91e	feat: 🚀 生产环境登录地址修改	2025-07-14 10:30:19 +08:00
yangchunlong	b302b3af2b	feat: 🚀 优化树状结构	2025-07-11 16:34:41 +08:00
yangchunlong	38b57adb5e	fix: 🧩 修复产品详情传值	2025-07-08 17:10:10 +08:00
yangchunlong	776de99441	fix: 🧩 修复bug	2025-07-05 13:37:06 +08:00
yangchunlong	8524d2112e	fix: 🧩 bug修复	2025-07-01 16:00:05 +08:00
yangchunlong	fd35dc532b	feat: 🚀 添加悬浮图上传	2025-06-30 09:35:47 +08:00
yangchunlong	cc5d380551	fix: 🧩 label文字显示不全	2025-06-12 11:53:01 +08:00