From 1a19253865a732b952bfa578eee8f47b727dfcbd Mon Sep 17 00:00:00 2001
From: haoxr <1490493387@qq.com>
Date: Wed, 17 May 2023 04:34:09 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: c2c03e83483b2f4646adb018859e82de6b60f1e1
---
 src/components/WangEditor/index.vue | 28 ++++++++++++++++++++++------
 src/styles/index.scss               |  2 +-
 src/views/demo/apidoc.vue           | 14 +++++---------
 src/views/demo/wangEditor.vue       |  6 +++---
 4 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/src/components/WangEditor/index.vue b/src/components/WangEditor/index.vue
index e302bbbe..5c7b4ef3 100644
--- a/src/components/WangEditor/index.vue
+++ b/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>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 5f0e69f0..655cc381 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -3,7 +3,7 @@
 @import "./dark";
 
 .app-container {
-  padding: 20px;
+  margin: 20px;
 
   .search {
     padding: 18px 0 0 10px;
diff --git a/src/views/demo/apidoc.vue b/src/views/demo/apidoc.vue
index 1200d7b0..acd7fd76 100644
--- a/src/views/demo/apidoc.vue
+++ b/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 {
-  height: calc(100vh - 100px);
-}
-
-.hasTagsView {
-  #apidoc-iframe {
-    height: calc(100vh - 140px);
-  }
+.app-container {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 124px);
 }
 </style>
diff --git a/src/views/demo/wangEditor.vue b/src/views/demo/wangEditor.vue
index 26c6e0c3..8f4b5e89 100644
--- a/src/views/demo/wangEditor.vue
+++ b/src/views/demo/wangEditor.vue
@@ -1,11 +1,11 @@
 <!-- wangEditor富文本编辑器示例 -->
 <script setup lang="ts">
-import Editor from '@/components/WangEditor/index.vue';
-const value = ref('初始内容');
+import Editor from "@/components/WangEditor/index.vue";
+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>