From 81c98de9cca28fcbb93342d79f46ae1bf48e86ca Mon Sep 17 00:00:00 2001 From: "Ray.Hao" <1490493387@qq.com> Date: Sat, 14 Feb 2026 10:57:25 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E5=99=A8=E7=BB=84=E4=BB=B6=E5=92=8C=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E6=9D=83=E9=99=90=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 重构 WangEditor 组件，简化双向绑定逻辑并添加防抖处理 移除角色管理页面中冗余的数据权限标签处理函数 --- src/components/NoticeDropdown/useNotice.ts | 2 +- src/components/WangEditor/index.vue | 55 ++++++++++++---------- src/views/system/role/index.vue | 27 +---------- 3 files changed, 32 insertions(+), 52 deletions(-) diff --git a/src/components/NoticeDropdown/useNotice.ts b/src/components/NoticeDropdown/useNotice.ts index 8022b796..d1fce09c 100644 --- a/src/components/NoticeDropdown/useNotice.ts +++ b/src/components/NoticeDropdown/useNotice.ts @@ -31,7 +31,7 @@ export function useNotice() { ...params, }; const page = await NoticeAPI.getMyNoticePage(query); - list.value = page.data || []; + list.value = page.list || []; } async function read(id: string) { diff --git a/src/components/WangEditor/index.vue b/src/components/WangEditor/index.vue index 1e8d16b0..098aeefc 100644 --- a/src/components/WangEditor/index.vue +++ b/src/components/WangEditor/index.vue @@ -12,6 +12,8 @@
@@ -45,56 +49,57 @@ defineProps({ default: "500px", }, }); -// 双向绑定 -const modelValue = defineModel("modelValue", { +// 双向绑定 - 直接使用 v-model，无需手动 setHtml +const modelValue = defineModel({ type: String, required: false, + default: "", }); -// 编辑器实例，必须用 shallowRef，重要！ +// 编辑器实例，必须用 shallowRef const editorRef = shallowRef(); +const editorKey = ref(0); +const innerUpdating = ref(false); + // 工具栏配置 -const toolbarConfig = ref>({}); +const toolbarConfig: Partial = {}; // 编辑器配置 -const editorConfig = ref>({ +const editorConfig: Partial = { placeholder: "请输入内容..", MENU_CONF: { uploadImage: { - customUpload(file: File, insertFn: InsertFnType) { - // 上传图片 - FileAPI.uploadFile(file).then((data) => { - // 插入图片 - insertFn(data.url, data.name, data.url); - }); + async customUpload(file: File, insertFn: InsertFnType) { + const data = await FileAPI.uploadFile(file); + insertFn(data.url, data.name, data.url); }, } as any, }, -}); +}; -// 记录 editor 实例，重要！ +// 记录 editor 实例 const handleCreated = (editor: any) => { editorRef.value = editor; - const value = modelValue.value ?? ""; - if (value) { - editor.setHtml(value); - } +}; + +const handleChange = () => { + innerUpdating.value = true; + Promise.resolve().then(() => { + innerUpdating.value = false; + }); }; watch( () => modelValue.value, - (value) => { - const editor = editorRef.value; - if (!editor) return; - const nextValue = value ?? ""; - if (nextValue !== editor.getHtml()) { - editor.setHtml(nextValue); - } + () => { + if (innerUpdating.value) return; + editorRef.value = null; + editorKey.value += 1; } ); -// 组件销毁时，也及时销毁编辑器，重要！ +// 组件销毁时，及时销毁编辑器 onBeforeUnmount(() => { const editor = editorRef.value; if (editor == null) return; diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue index 3a1971b1..1ff9929f 100644 --- a/src/views/system/role/index.vue +++ b/src/views/system/role/index.vue @@ -47,13 +47,7 @@ - - - +