fix(components): 修复wang-editor样式和聚焦问题

src/components/custom/wang-editor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, shallowRef, watch } from 'vue';
+import { nextTick, onBeforeUnmount, shallowRef, watch } from 'vue';
 import '@wangeditor-next/editor/dist/css/style.css';
 import { Editor, Toolbar } from '@wangeditor-next/editor-for-vue';
 import { i18nChangeLanguage } from '@wangeditor-next/editor';
@@ -12,6 +12,10 @@ defineOptions({
   name: 'WangEditor'
 });
 
+const props = defineProps<{
+  visible?: boolean;
+}>();
+
 const appStore = useAppStore();
 
 const editorRef = shallowRef<IDomEditor>();
@@ -58,39 +62,51 @@ const handleCreated = (editor: IDomEditor) => {
   editorRef.value = editor;
 };
 
-watch(
-  () => appStore.locale,
-  () => {
-    const localeMap = {
-      'zh-CN': 'zh-CN',
-      'en-US': 'en'
-    };
-    i18nChangeLanguage(localeMap[appStore.locale]);
-  }
-);
+watch([() => appStore.locale, () => props.visible], ([locale, show]) => {
+  const localeMap = {
+    'zh-CN': 'zh-CN',
+    'en-US': 'en'
+  };
+
+  i18nChangeLanguage(localeMap[locale]);
+
+  if (!show) return;
+  nextTick(() => {
+    editorRef.value?.focus(true);
+  });
+});
 
 onBeforeUnmount(() => {
   const editor = editorRef.value;
-  if (editor === null) return;
+  if (!editor) return;
 
   editorRef.value?.destroy();
 });
 </script>
 
 <template>
-  <NCard size="small" class="size-full min-h-500px" content-class="size-full">
+  <NCard size="small" class="wang-editor size-full min-h-500px" content-class="size-full">
     <Toolbar :editor="editorRef" :default-config="toolbarConfig" class="border-b-1px border-gray-200" />
     <Editor v-model="value" :default-config="editorConfig" @on-created="handleCreated" />
   </NCard>
 </template>
 
-<style scoped>
-:deep(.w-e-toolbar) {
-  background: inherit !important;
-  border-color: #999 !important;
+<style lang="scss">
+html.dark .wang-editor {
+  /* 编辑区 */
+  --w-e-textarea-bg-color: #1e1e1e;
+  --w-e-textarea-color: #c8c8c8;
+  --w-e-textarea-border-color: #4d4d4d;
+
+  /* 工具栏 */
+  --w-e-toolbar-bg-color: #2c2c2c;
+  --w-e-toolbar-color: #999;
+  --w-e-toolbar-active-color: #d4d4d4;
+  --w-e-toolbar-active-bg-color: #3a3a3a;
+  --w-e-toolbar-border-color: #3d3d3d;
 }
-:deep(.w-e-text-container) {
-  background: inherit;
-  border-color: #999 !important;
+
+.w-e-select-list {
+  @include scrollbar();
 }
 </style>

src/views/system/notice/modules/notice-operate-drawer.vue

@@ -128,7 +128,7 @@ watch(visible, () => {
           </NFormItem>
         </div>
         <NFormItem :show-label="false" path="noticeContent">
-          <WangEditor v-model:value="model.noticeContent!" />
+          <WangEditor v-model:value="model.noticeContent!" :visible="visible" />
         </NFormItem>
       </NForm>
       <template #footer>