@ebiz/designer-components 0.1.80 → 0.1.81

package/src/components/EbizRichTextEditor.vue

@@ -1,276 +1,276 @@
-<template>
-    <div class="ebiz-rich-text-editor" style="border: 1px solid #ccc">
-        <Toolbar 
-            style="border-bottom: 1px solid #ccc" 
-            :editor="editorRef" 
-            :defaultConfig="mergedToolbarConfig" 
-            :mode="mode" 
-        />
-        <Editor 
-            :style="{height: `${height}px`, overflowY: 'hidden'}" 
-            v-model="computedModelValue" 
-            :defaultConfig="mergedEditorConfig" 
-            :mode="mode"
-            @onCreated="handleCreated"
-            @onChange="handleChange"
-            @onDestroyed="handleDestroyed"
-            @onFocus="handleFocus"
-            @onBlur="handleBlur"
-            @customAlert="handleCustomAlert"
-            @customPaste="handleCustomPaste"
-        />
-    </div>
-</template>
-
-<script>
-/**
- * @displayName 富文本编辑器
- * @description 基于WangEditor的富文本编辑器组件，支持图片和视频上传
- * @category 表单组件
- * @name EbizRichTextEditor
- */
-export default {
-    name: "EbizRichTextEditor"
-}
-</script>
-
-<script setup>
-import '@wangeditor/editor/dist/css/style.css'
-import { defineProps, defineEmits, computed, ref, shallowRef, onBeforeUnmount, onMounted } from 'vue'
-import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
-// import { upload } from '../utils/upload'
-
-// 编辑器实例，必须用 shallowRef
-const editorRef = shallowRef()
-
-// 编辑器内容
-const valueHtml = ref('')
-
-// 编辑器模式
-const mode = ref('default') // 或 'simple'
-
-const props = defineProps({
-    /**
-     * 绑定的值
-     */
-    modelValue: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 是否禁用
-     */
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 是否只读
-     */
-    readonly: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 占位文本
-     */
-    placeholder: {
-        type: String,
-        default: '请输入内容...'
-    },
-    /**
-     * 编辑器高度
-     */
-    height: {
-        type: [String, Number],
-        default: 300
-    },
-    /**
-     * 工具栏配置
-     */
-    toolbarConfig: {
-        type: Object,
-        default: () => ({})
-    },
-    /**
-     * 编辑器配置
-     */
-    editorConfig: {
-        type: Object,
-        default: () => ({})
-    },
-    /**
-     * 图片上传路径
-     */
-    imagePath: {
-        type: String,
-        default: 'editor'
-    },
-    /**
-     * 视频上传路径
-     */
-    videoPath: {
-        type: String,
-        default: 'video'
-    },
-    /**
-     * 最大长度
-     */
-    maxLength: {
-        type: Number,
-        default: undefined
-    }
-});
-
-const emit = defineEmits([
-    'update:modelValue',
-    'change',
-    'focus',
-    'blur',
-    'created',
-    'destroyed'
-]);
-
-// 计算属性处理v-model双向绑定
-const computedModelValue = computed({
-    get: () => props.modelValue,
-    set: (val) => {
-        emit('update:modelValue', val);
-    }
-});
-
-// 合并工具栏配置
-const mergedToolbarConfig = computed(() => {
-    return {
-        ...props.toolbarConfig
-    };
-});
-
-// 合并编辑器配置
-const mergedEditorConfig = computed(() => {
-    return {
-        placeholder: props.placeholder,
-        readOnly: props.disabled || props.readonly,
-        maxLength: props.maxLength,
-        MENU_CONF: {
-            uploadImage: {
-                customUpload(file, insertFn) {
-                    
-                    upload({
-                        path: props.imagePath,
-                        file: {
-                            name: file.name,
-                            raw: file
-                        },
-                        onSuccess: (res) => {
-                            insertFn(res.url, '', '');
-                        }
-                    });
-                },
-            },
-            uploadVideo: {
-                customUpload(file, insertFn) {
-                    upload({
-                        path: props.videoPath,
-                        file: {
-                            name: file.name,
-                            raw: file
-                        },
-                        onSuccess: (res) => {
-                            insertFn(res.url, '', '');
-                        }
-                    });
-                },
-            },
-            ...props.editorConfig?.MENU_CONF
-        },
-        ...props.editorConfig
-    };
-});
-
-// 编辑器创建完成回调
-const handleCreated = (editor) => {
-    editorRef.value = editor; // 记录编辑器实例
-    emit('created', editor);
-};
-
-// 内容变化事件
-const handleChange = (editor) => {
-    emit('change', editor.getHtml());
-};
-
-// 销毁事件
-const handleDestroyed = (editor) => {
-    emit('destroyed', editor);
-};
-
-// 获得焦点事件
-const handleFocus = (editor) => {
-    emit('focus', editor);
-};
-
-// 失去焦点事件
-const handleBlur = (editor) => {
-    emit('blur', editor);
-};
-
-// 自定义提示事件
-const handleCustomAlert = (info, type) => {
-    console.log(`【自定义提示】${type} - ${info}`);
-};
-
-// 自定义粘贴事件
-const handleCustomPaste = (editor, event, callback) => {
-    console.log('ClipboardEvent 粘贴事件对象', event);
-    // 返回值（注意，vue 事件的返回值，不能用 return）
-    callback(true); // true 继续默认的粘贴行为
-};
-
-// 组件销毁时，销毁编辑器实例
-onBeforeUnmount(() => {
-    const editor = editorRef.value;
-    if (editor === null) return;
-    editor.destroy();
-});
-
-// 暴露编辑器实例和方法
-defineExpose({
-    editor: editorRef,
-    insertText: (text) => {
-        if (editorRef.value) {
-            editorRef.value.insertText(text);
-        }
-    },
-    getHtml: () => {
-        if (editorRef.value) {
-            return editorRef.value.getHtml();
-        }
-        return '';
-    },
-    getText: () => {
-        if (editorRef.value) {
-            return editorRef.value.getText();
-        }
-        return '';
-    }
-});
-</script>
-
-<style scoped>
-.ebiz-rich-text-editor {
-    border-radius: var(--td-radius-default);
-    overflow: hidden;
-}
-
-.ebiz-rich-text-editor :deep(.w-e-text-container) {
-    z-index: 1; /* 避免编辑区域遮挡其他元素 */
-}
-
-.ebiz-rich-text-editor :deep(.w-e-toolbar) {
-    z-index: 2; /* 确保工具栏在编辑区域之上 */
-}
-
-.ebiz-rich-text-editor :deep(.w-e-text-placeholder) {
-    color: var(--td-text-color-placeholder);
-}
+<template>
+    <div class="ebiz-rich-text-editor" style="border: 1px solid #ccc">
+        <Toolbar 
+            style="border-bottom: 1px solid #ccc" 
+            :editor="editorRef" 
+            :defaultConfig="mergedToolbarConfig" 
+            :mode="mode" 
+        />
+        <Editor 
+            :style="{height: `${height}px`, overflowY: 'hidden'}" 
+            v-model="computedModelValue" 
+            :defaultConfig="mergedEditorConfig" 
+            :mode="mode"
+            @onCreated="handleCreated"
+            @onChange="handleChange"
+            @onDestroyed="handleDestroyed"
+            @onFocus="handleFocus"
+            @onBlur="handleBlur"
+            @customAlert="handleCustomAlert"
+            @customPaste="handleCustomPaste"
+        />
+    </div>
+</template>
+
+<script>
+/**
+ * @displayName 富文本编辑器
+ * @description 基于WangEditor的富文本编辑器组件，支持图片和视频上传
+ * @category 表单组件
+ * @name EbizRichTextEditor
+ */
+export default {
+    name: "EbizRichTextEditor"
+}
+</script>
+
+<script setup>
+import '@wangeditor/editor/dist/css/style.css'
+import { defineProps, defineEmits, computed, ref, shallowRef, onBeforeUnmount, onMounted } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+// import { upload } from '../utils/upload'
+
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef()
+
+// 编辑器内容
+const valueHtml = ref('')
+
+// 编辑器模式
+const mode = ref('default') // 或 'simple'
+
+const props = defineProps({
+    /**
+     * 绑定的值
+     */
+    modelValue: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 是否禁用
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 是否只读
+     */
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 占位文本
+     */
+    placeholder: {
+        type: String,
+        default: '请输入内容...'
+    },
+    /**
+     * 编辑器高度
+     */
+    height: {
+        type: [String, Number],
+        default: 300
+    },
+    /**
+     * 工具栏配置
+     */
+    toolbarConfig: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     * 编辑器配置
+     */
+    editorConfig: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     * 图片上传路径
+     */
+    imagePath: {
+        type: String,
+        default: 'editor'
+    },
+    /**
+     * 视频上传路径
+     */
+    videoPath: {
+        type: String,
+        default: 'video'
+    },
+    /**
+     * 最大长度
+     */
+    maxLength: {
+        type: Number,
+        default: undefined
+    }
+});
+
+const emit = defineEmits([
+    'update:modelValue',
+    'change',
+    'focus',
+    'blur',
+    'created',
+    'destroyed'
+]);
+
+// 计算属性处理v-model双向绑定
+const computedModelValue = computed({
+    get: () => props.modelValue,
+    set: (val) => {
+        emit('update:modelValue', val);
+    }
+});
+
+// 合并工具栏配置
+const mergedToolbarConfig = computed(() => {
+    return {
+        ...props.toolbarConfig
+    };
+});
+
+// 合并编辑器配置
+const mergedEditorConfig = computed(() => {
+    return {
+        placeholder: props.placeholder,
+        readOnly: props.disabled || props.readonly,
+        maxLength: props.maxLength,
+        MENU_CONF: {
+            uploadImage: {
+                customUpload(file, insertFn) {
+                    
+                    upload({
+                        path: props.imagePath,
+                        file: {
+                            name: file.name,
+                            raw: file
+                        },
+                        onSuccess: (res) => {
+                            insertFn(res.url, '', '');
+                        }
+                    });
+                },
+            },
+            uploadVideo: {
+                customUpload(file, insertFn) {
+                    upload({
+                        path: props.videoPath,
+                        file: {
+                            name: file.name,
+                            raw: file
+                        },
+                        onSuccess: (res) => {
+                            insertFn(res.url, '', '');
+                        }
+                    });
+                },
+            },
+            ...props.editorConfig?.MENU_CONF
+        },
+        ...props.editorConfig
+    };
+});
+
+// 编辑器创建完成回调
+const handleCreated = (editor) => {
+    editorRef.value = editor; // 记录编辑器实例
+    emit('created', editor);
+};
+
+// 内容变化事件
+const handleChange = (editor) => {
+    emit('change', editor.getHtml());
+};
+
+// 销毁事件
+const handleDestroyed = (editor) => {
+    emit('destroyed', editor);
+};
+
+// 获得焦点事件
+const handleFocus = (editor) => {
+    emit('focus', editor);
+};
+
+// 失去焦点事件
+const handleBlur = (editor) => {
+    emit('blur', editor);
+};
+
+// 自定义提示事件
+const handleCustomAlert = (info, type) => {
+    console.log(`【自定义提示】${type} - ${info}`);
+};
+
+// 自定义粘贴事件
+const handleCustomPaste = (editor, event, callback) => {
+    console.log('ClipboardEvent 粘贴事件对象', event);
+    // 返回值（注意，vue 事件的返回值，不能用 return）
+    callback(true); // true 继续默认的粘贴行为
+};
+
+// 组件销毁时，销毁编辑器实例
+onBeforeUnmount(() => {
+    const editor = editorRef.value;
+    if (editor === null) return;
+    editor.destroy();
+});
+
+// 暴露编辑器实例和方法
+defineExpose({
+    editor: editorRef,
+    insertText: (text) => {
+        if (editorRef.value) {
+            editorRef.value.insertText(text);
+        }
+    },
+    getHtml: () => {
+        if (editorRef.value) {
+            return editorRef.value.getHtml();
+        }
+        return '';
+    },
+    getText: () => {
+        if (editorRef.value) {
+            return editorRef.value.getText();
+        }
+        return '';
+    }
+});
+</script>
+
+<style scoped>
+.ebiz-rich-text-editor {
+    border-radius: var(--td-radius-default);
+    overflow: hidden;
+}
+
+.ebiz-rich-text-editor :deep(.w-e-text-container) {
+    z-index: 1; /* 避免编辑区域遮挡其他元素 */
+}
+
+.ebiz-rich-text-editor :deep(.w-e-toolbar) {
+    z-index: 2; /* 确保工具栏在编辑区域之上 */
+}
+
+.ebiz-rich-text-editor :deep(.w-e-text-placeholder) {
+    color: var(--td-text-color-placeholder);
+}
 </style> 

package/src/components/EbizRouteBreadcrumb.vue

@@ -1,47 +1,47 @@
-<template>
-  <t-breadcrumb>
-    <t-breadcrumb-item :to="{ path: '/' }">首页</t-breadcrumb-item>
-    <t-breadcrumb-item
-      v-for="(item, index) in breadcrumbItems"
-      :key="index"
-      :to="item.path"
-    >
-      {{ item.title }}
-    </t-breadcrumb-item>
-  </t-breadcrumb>
-</template>
-
-<script>
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-import { Breadcrumb as TBreadcrumb, BreadcrumbItem as TBreadcrumbItem } from 'tdesign-vue-next'
-
-export default {
-  name: 'EbizRouteBreadcrumb',
-  components: {
-    TBreadcrumb,
-    TBreadcrumbItem
-  },
-  setup() {
-    const route = useRoute()
-    
-    const breadcrumbItems = computed(() => {
-      const matched = route.matched.filter(item => item.meta && item.meta.title)
-      return matched.map(item => ({
-        title: item.meta.title,
-        path: item.path
-      }))
-    })
-
-    return {
-      breadcrumbItems
-    }
-  }
-}
-</script>
-
-<style scoped>
-.t-breadcrumb {
-  margin: 16px 0;
-}
+<template>
+  <t-breadcrumb>
+    <t-breadcrumb-item :to="{ path: '/' }">首页</t-breadcrumb-item>
+    <t-breadcrumb-item
+      v-for="(item, index) in breadcrumbItems"
+      :key="index"
+      :to="item.path"
+    >
+      {{ item.title }}
+    </t-breadcrumb-item>
+  </t-breadcrumb>
+</template>
+
+<script>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { Breadcrumb as TBreadcrumb, BreadcrumbItem as TBreadcrumbItem } from 'tdesign-vue-next'
+
+export default {
+  name: 'EbizRouteBreadcrumb',
+  components: {
+    TBreadcrumb,
+    TBreadcrumbItem
+  },
+  setup() {
+    const route = useRoute()
+    
+    const breadcrumbItems = computed(() => {
+      const matched = route.matched.filter(item => item.meta && item.meta.title)
+      return matched.map(item => ({
+        title: item.meta.title,
+        path: item.path
+      }))
+    })
+
+    return {
+      breadcrumbItems
+    }
+  }
+}
+</script>
+
+<style scoped>
+.t-breadcrumb {
+  margin: 16px 0;
+}
 </style>