fix(cfc-web): ProductEdit wangeditor 生产构建错误 — 改用 @wangeditor/editor-for-vue Vue组件替换programmatic API

导入方式: import { Editor } from '@wangeditor/editor-for-vue'
替代: import E from '@wangeditor/editor' + new E(domRef)
移除: initEditor()方法、beforeDestroy editor.destroy()、editor: null data
新增: editorConfig (MENU_CONF.uploadImage) 传入Editor组件

cfc-web/src/views/admin/ProductEdit.vue

@@ -24,7 +24,7 @@
         </el-form-item>
 
         <el-form-item label="商品描述" prop="description">
-          <div ref="editorRef" class="rich-editor"></div>
+          <Editor v-model="form.description" :config="editorConfig" style="min-height: 300px;" />
         </el-form-item>
 
         <el-form-item label="封面图片" prop="coverImage">
@@ -124,11 +124,12 @@ import { getProduct, createProduct, updateProduct } from '@/api/admin'
 import { saveDimensionWeights, getDimensionWeights } from '@/api/dimension-weight'
 import DimensionWeightPicker from '@/components/DimensionWeightPicker.vue'
 import ProductSkuEditor from './components/ProductSkuEditor.vue'
-import E from '@wangeditor/editor'
+import { Editor } from '@wangeditor/editor-for-vue'
+import '@wangeditor/editor/dist/css/style.css'
 
 export default {
   name: 'ProductEdit',
-  components: { DimensionWeightPicker, ProductSkuEditor },
+  components: { DimensionWeightPicker, ProductSkuEditor, Editor },
   data() {
     return {
       form: {
@@ -155,7 +156,24 @@ export default {
         stock: [{ required: true, message: '请输入库存', trigger: 'blur' }]
       },
       saving: false,
-      editor: null
+      editorConfig: {
+        MENU_CONF: {
+          uploadImage: {
+            server: '',
+            headers: {},
+            maxNumberOfFiles: 1,
+            fieldName: 'file',
+            customAlert: (msg, type) => {
+              this.$message && this.$message({ message: msg, type: type || 'error' })
+            },
+            onSuccess(res, insertFn) {
+              if (res.code === 200) {
+                insertFn(res.data.url || res.data)
+              }
+            }
+          }
+        }
+      }
     }
   },
   computed: {
@@ -172,17 +190,13 @@ export default {
     }
   },
   mounted() {
-    this.initEditor()
+    // Set editor upload config using computed values
+    this.editorConfig.MENU_CONF.uploadImage.server = this.uploadActionUrl
+    this.editorConfig.MENU_CONF.uploadImage.headers = this.uploadHeaders
     if (this.isEdit) {
       this.loadProduct(this.$route.query.id)
     }
   },
-  beforeDestroy() {
-    if (this.editor) {
-      this.editor.destroy()
-      this.editor = null
-    }
-  },
   methods: {
     async loadProduct(id) {
       try {
@@ -240,22 +254,6 @@ export default {
         // ignore
       }
     },
-    initEditor() {
-      this.editor = new E(this.$refs.editorRef)
-      this.editor.config.uploadImgServer = this.uploadActionUrl
-      this.editor.config.uploadImgHeaders = this.uploadHeaders
-      this.editor.config.uploadImgMaxLength = 1
-      this.editor.config.uploadFileName = 'file'
-      this.editor.config.customAlert = (msg, type) => {
-        this.$message({ message: msg, type: type || 'error' })
-      }
-      this.editor.config.uploadImgSuccess = (res, insertFn) => {
-        if (res.code === 200) {
-          insertFn(res.data.url || res.data)
-        }
-      }
-      this.editor.create()
-    },
     beforeUpload(file) {
       const isImage = file.type.startsWith('image/')
       const isLt5M = file.size / 1024 / 1024 < 5