From f85a1933f610bc8d543db21beb93b95252e29b82 Mon Sep 17 00:00:00 2001
From: lbw <wangiegie@163.com>
Date: Thu, 22 Jun 2023 15:15:23 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=20=E6=96=87=E7=AB=A0=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=96=87=E7=AB=A0=E5=88=86=E7=BB=84=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E4=B8=8D=E6=AD=A3=E7=A1=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Editor/index.vue    | 24 +++++++++++++++++++-----
 src/views/app/appArticle/form.vue  |  6 +++---
 src/views/app/appArticle/index.vue |  2 +-
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
index 196e7ced..d17d4130 100644
--- a/src/components/Editor/index.vue
+++ b/src/components/Editor/index.vue
@@ -1,10 +1,10 @@
 <template>
-	<div class="editor-container">
-		<Toolbar :editor="editorRef" :mode="mode" />
+	<div class="flex flex-col border border-br" :style="styles">
+		<Toolbar class="border-b border-br" :editor="editorRef" :mode="mode" />
 		<Editor
+			class="flex-1 overflow-y-auto"
 			:mode="mode"
 			:defaultConfig="state.editorConfig"
-			:style="{ height }"
 			v-model="state.editorVal"
 			@onCreated="handleCreated"
 			@onChange="handleChange"
@@ -14,11 +14,12 @@
 
 <script setup lang="ts" name="wngEditor">
 import '@wangeditor/editor/dist/css/style.css';
-import { reactive, shallowRef, watch, onBeforeUnmount } from 'vue';
+import { reactive, shallowRef, watch, onBeforeUnmount, CSSProperties } from 'vue';
 // @ts-ignore
 import { IDomEditor } from '@wangeditor/editor';
 import { Toolbar, Editor } from '@wangeditor/editor-for-vue';
 import { Session } from '/@/utils/storage';
+import other from '/@/utils/other';
 const { proxy } = getCurrentInstance();
 
 // 定义父组件传过来的值
@@ -42,7 +43,12 @@ const props = defineProps({
 	// 高度
 	height: {
 		type: String,
-		default: () => '310px',
+		default: () => '310',
+	},
+	// 宽度
+	width: {
+		type: String,
+		default: () => 'auto',
 	},
 	// 双向绑定，用于获取 editor.getHtml()
 	getHtml: String,
@@ -87,21 +93,29 @@ const state = reactive({
 	editorVal: props.getHtml,
 });
 
+const styles = computed<CSSProperties>(() => ({
+	height: other.addUnit(props.height),
+	width: other.addUnit(props.width),
+}));
+
 // 编辑器回调函数
 const handleCreated = (editor: IDomEditor) => {
 	editorRef.value = editor;
 };
+
 // 编辑器内容改变时
 const handleChange = (editor: IDomEditor) => {
 	emit('update:getHtml', editor.getHtml());
 	emit('update:getText', editor.getText());
 };
+
 // 页面销毁时
 onBeforeUnmount(() => {
 	const editor = editorRef.value;
 	if (editor == null) return;
 	editor.destroy();
 });
+
 // 监听是否禁用改变
 watch(
 	() => props.disable,
diff --git a/src/views/app/appArticle/form.vue b/src/views/app/appArticle/form.vue
index cf381ad9..33896e05 100644
--- a/src/views/app/appArticle/form.vue
+++ b/src/views/app/appArticle/form.vue
@@ -1,8 +1,8 @@
 <template>
 	<div class="layout-padding-auto layout-padding-view">
 		<el-card shadow="never">
-			<el-form ref="dataFormRef" class="ls-form" :model="form" label-width="85px" :rules="dataRules">
-				<div class="xl:flex">
+			<el-form ref="dataFormRef" class="form" :model="form" label-width="85px" :rules="dataRules">
+				<div class="flex">
 					<div>
 						<el-form-item label="文章标题" prop="title">
 							<div class="w-80">
@@ -77,7 +77,7 @@
 							</el-col>
 						</el-row>
 						<el-form-item label="文章内容" required prop="content">
-							<editor v-model:get-html="form.content" />
+							<editor v-model:get-html="form.content" :height="500" :width="600" />
 						</el-form-item>
 						<div style="text-align: center">
 							<el-button type="primary" @click="onSubmit">保存</el-button>
diff --git a/src/views/app/appArticle/index.vue b/src/views/app/appArticle/index.vue
index b01de789..0a36ddb6 100644
--- a/src/views/app/appArticle/index.vue
+++ b/src/views/app/appArticle/index.vue
@@ -43,7 +43,7 @@
 			>
 				<el-table-column type="selection" width="40" align="center" />
 				<el-table-column type="index" label="#" width="40" />
-				<el-table-column prop="cid" label="分类" show-overflow-tooltip />
+				<el-table-column prop="cname" label="分类" show-overflow-tooltip />
 				<el-table-column prop="title" label="标题" show-overflow-tooltip />
 				<el-table-column prop="author" label="作者" show-overflow-tooltip />
 				<el-table-column prop="visit" label="浏览" show-overflow-tooltip />