refactor: ♻️ 组件样式优化

Former-commit-id: c2c03e83483b2f4646adb018859e82de6b60f1e1

src/components/WangEditor/index.vue

@@ -1,17 +1,17 @@
 <template>
-  <div style="border: 1px solid #ccc">
+  <div class="editor-wrapper">
     <!-- 工具栏 -->
     <Toolbar
+      id="toolbar-container"
       :editor="editorRef"
       :default-config="toolbarConfig"
-      style="border-bottom: 1px solid #ccc"
       :mode="mode"
     />
     <!-- 编辑器 -->
     <Editor
-      v-model="defaultHtml"
+      id="editor-container"
+      v-model="modelValue"
       :default-config="editorConfig"
-      style="height: 500px; overflow-y: hidden"
       :mode="mode"
       @on-change="handleChange"
       @on-created="handleCreated"
@@ -34,7 +34,7 @@ const props = defineProps({
 
 const emit = defineEmits(["update:modelValue"]);
 
-const defaultHtml = useVModel(props, "modelValue", emit);
+const modelValue = useVModel(props, "modelValue", emit);
 
 const editorRef = shallowRef(); // 编辑器实例，必须用 shallowRef
 const mode = ref("default"); // 编辑器模式
@@ -60,7 +60,7 @@ const handleCreated = (editor: any) => {
 };
 
 function handleChange(editor: any) {
-  emit("update:modelValue", editor.getHtml());
+  modelValue.value = editor.getHtml();
 }
 
 // 组件销毁时，也及时销毁编辑器
@@ -72,3 +72,19 @@ onBeforeUnmount(() => {
 </script>
 
 <style src="@wangeditor/editor/dist/css/style.css"></style>
+
+<style lang="scss" scoped>
+.editor-wrapper {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #ccc;
+
+  #toolbar-container {
+    border-bottom: 1px solid #ccc;
+  }
+
+  #editor-container {
+    flex-grow: 1;
+  }
+}
+</style>

src/styles/index.scss

@@ -3,7 +3,7 @@
 @import "./dark";
 
 .app-container {
-  padding: 20px;
+  margin: 20px;
 
   .search {
     padding: 18px 0 0 10px;

src/views/demo/apidoc.vue

@@ -2,22 +2,18 @@
 <template>
   <div class="app-container">
     <iframe
-      id="apidoc-iframe"
       src="https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5"
       width="100%"
+      height="100%"
       frameborder="0"
     ></iframe>
   </div>
 </template>
 
 <style lang="scss" scoped>
-#apidoc-iframe {
+.app-container {
-  height: calc(100vh - 100px);
+  display: flex;
-}
+  flex-direction: column;
-
+  height: calc(100vh - 124px);
-.hasTagsView {
-  #apidoc-iframe {
-    height: calc(100vh - 140px);
-  }
 }
 </style>

src/views/demo/wangEditor.vue

@@ -1,11 +1,11 @@
 <!-- wangEditor富文本编辑器示例 -->
 <script setup lang="ts">
-import Editor from '@/components/WangEditor/index.vue';
+import Editor from "@/components/WangEditor/index.vue";
-const value = ref('初始内容');
+const value = ref("初始内容");
 </script>
 
 <template>
   <div class="app-container">
-    <editor v-model="value" style="height: 600px" />
+    <editor v-model="value" style="height: calc(100vh - 124px)" />
   </div>
 </template>