refactor: 优化编辑器组件和数据权限显示逻辑

重构 WangEditor 组件，简化双向绑定逻辑并添加防抖处理
移除角色管理页面中冗余的数据权限标签处理函数

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) {

src/components/WangEditor/index.vue

@@ -12,6 +12,8 @@
   <div style="z-index: 999; border: 1px solid var(--el-border-color)">
     <!-- 工具栏 -->
     <Toolbar
+      v-if="editorRef"
+      :key="editorKey"
       :editor="editorRef"
       mode="simple"
       :default-config="toolbarConfig"
@@ -19,11 +21,13 @@
     />
     <!-- 编辑器 -->
     <Editor
+      :key="editorKey"
       v-model="modelValue"
       :style="{ height: height, overflowY: 'hidden' }"
       :default-config="editorConfig"
       mode="simple"
       @on-created="handleCreated"
+      @on-change="handleChange"
     />
   </div>
 </template>
@@ -45,56 +49,57 @@ defineProps({
     default: "500px",
   },
 });
-// 双向绑定
+// 双向绑定 - 直接使用 v-model，无需手动 setHtml
-const modelValue = defineModel("modelValue", {
+const modelValue = defineModel<string>({
   type: String,
   required: false,
+  default: "",
 });
 
-// 编辑器实例，必须用 shallowRef，重要！
+// 编辑器实例，必须用 shallowRef
 const editorRef = shallowRef();
 
+const editorKey = ref(0);
+const innerUpdating = ref(false);
+
 // 工具栏配置
-const toolbarConfig = ref<Partial<IToolbarConfig>>({});
+const toolbarConfig: Partial<IToolbarConfig> = {};
 
 // 编辑器配置
-const editorConfig = ref<Partial<IEditorConfig>>({
+const editorConfig: Partial<IEditorConfig> = {
   placeholder: "请输入内容..",
   MENU_CONF: {
     uploadImage: {
-      customUpload(file: File, insertFn: InsertFnType) {
+      async customUpload(file: File, insertFn: InsertFnType) {
-        // 上传图片
+        const data = await FileAPI.uploadFile(file);
-        FileAPI.uploadFile(file).then((data) => {
+        insertFn(data.url, data.name, data.url);
-          // 插入图片
-          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 (innerUpdating.value) return;
-    if (!editor) return;
+    editorRef.value = null;
-    const nextValue = value ?? "";
+    editorKey.value += 1;
-    if (nextValue !== editor.getHtml()) {
-      editor.setHtml(nextValue);
-    }
   }
 );
 
-// 组件销毁时，也及时销毁编辑器，重要！
+// 组件销毁时，及时销毁编辑器
 onBeforeUnmount(() => {
   const editor = editorRef.value;
   if (editor == null) return;

src/views/system/role/index.vue

@@ -47,13 +47,7 @@
         <el-table-column label="角色名称" prop="name" min-width="100" />
         <el-table-column label="角色编码" prop="code" width="150" />
 
-        <el-table-column label="数据权限" align="center" width="140">
+        <el-table-column label="数据权限" align="center" width="140" prop="dataScopeLabel" />
-          <template #default="scope">
-            <el-tag :type="getDataScopeTagType(scope.row.dataScope)">
-              {{ getDataScopeLabel(scope.row.dataScope) }}
-            </el-tag>
-          </template>
-        </el-table-column>
 
         <el-table-column label="状态" align="center" width="100">
           <template #default="scope">
@@ -306,25 +300,6 @@ const isExpanded = ref(true);
 
 const parentChildLinked = ref(true);
 
-// 数据权限标签
-const dataScopeOptions = [
-  { value: 1, label: "全部数据", type: "danger" },
-  { value: 2, label: "部门及子部门数据", type: "warning" },
-  { value: 3, label: "本部门数据", type: "primary" },
-  { value: 4, label: "本人数据", type: "info" },
-  { value: 5, label: "自定义部门数据", type: "success" },
-];
-
-function getDataScopeLabel(value: number): string {
-  const option = dataScopeOptions.find((item) => item.value === value);
-  return option ? option.label : "未知";
-}
-
-function getDataScopeTagType(value: number): string {
-  const option = dataScopeOptions.find((item) => item.value === value);
-  return option ? option.type : "info";
-}
-
 // 获取数据
 function fetchData() {
   loading.value = true;