fix： 文章列表文章分组显示不正确

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,

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>

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 />