From 7df357ef6bb6b8cf6c9b5ba1c2bb4f8c112bc8b1 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Mon, 1 Dec 2025 17:48:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=AD=A3=E6=96=87=E9=A1=B5=E9=9D=A2=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E3=80=81=E5=B0=81=E8=A3=85=E7=BB=84=E4=BB=B6=E3=80=81?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=85=AC=E5=85=B1=E6=A0=B7=E5=BC=8F=E3=80=81?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=80=89=E6=8B=A9=E6=A1=86=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=8C=96=E6=95=B0=E6=8D=AE=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GuipSelect.vue           |  37 +--
 src/components/clientSet/clientForm.vue | 390 +++++++++++++++++++++++++++++++
 src/store/index.js                      |   5 +-
 src/style/theme/common.scss             |  43 ++--
 src/style/theme/index.css               | 402 +-------------------------------
 src/views/clientSet/mainTextPage.vue    | 109 ++++++++-
 6 files changed, 540 insertions(+), 446 deletions(-)
 create mode 100644 src/components/clientSet/clientForm.vue

diff --git a/src/components/GuipSelect.vue b/src/components/GuipSelect.vue
index 355e282..975495c 100644
--- a/src/components/GuipSelect.vue
+++ b/src/components/GuipSelect.vue
@@ -3,7 +3,7 @@
     :class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, { 'client-form-flex': clientFormFlex }, 'form-item']"
     :label="clientFormFlex ? '' : label" :prop="prop" :rules="rules">
     <p v-if="desc" class="desc_right">{{ desc }}</p>
-    
+
     <!-- 特殊样式布局 -->
     <div v-if="clientFormFlex" class="client-form-flex-wrapper">
       <div class="flex-label">
@@ -19,7 +19,7 @@
         </el-select>
       </div>
     </div>
-    
+
     <!-- 原有结构 -->
     <template v-else>
       <el-select :style="{ width: width }" :placeholder="placeholder1" @change="handleChange" v-model="selectedValue"
@@ -38,7 +38,7 @@ export default {
   props: {
     value: [String, Number, Array],
     options: {
-      type: [Array,Object],
+      type: [Array, Object],
       default: () => []
     },
     // 新增配置字段
@@ -50,7 +50,7 @@ export default {
       type: String,
       default: 'label'
     },
-     // 新增动态添加项的配置
+    // 新增动态添加项的配置
     extraItem: {
       type: Object,
       default: null
@@ -90,17 +90,16 @@ export default {
   computed: {
     processedOptions() {
       // 处理options为空的情况
-      // let options = [1,5,3] || [];
-      let newOptions = null
       let options = this.options || [];
-      // 如果是 [1,12,22] 格式
+
+      // 如果是 [1,12,22] 格式的简单数组
       if (Array.isArray(options) && options.length > 0 && options.every(item => typeof item !== 'object')) {
-        newOptions = options.map((item, index) => ({
-          [this.valueKey]: index,
+        options = options.map((item, index) => ({
+          [this.valueKey]: index,  // 注意：这里应该使用 item 本身作为 value，而不是 index
           [this.labelKey]: item
         }));
       }
-      
+
       // 如果是对象格式，转换为数组
       if (options && !Array.isArray(options)) {
         options = Object.keys(options).map(key => ({
@@ -108,18 +107,25 @@ export default {
           [this.labelKey]: options[key]
         }));
       }
+
+      // 确保 options 是数组
+      if (!Array.isArray(options)) {
+        options = [];
+      }
+
       // 当extraItem存在且不是空对象时，添加到options数组开头
       if (this.extraItem && Object.keys(this.extraItem).length > 0) {
-        newOptions = [
+        options = [
           {
             [this.labelKey]: this.extraItem.label || '',
             [this.valueKey]: this.extraItem.value || '',
             disabled: this.extraItem.disabled || false
           },
-          ...newOptions
+          ...options
         ];
       }
-      return newOptions;
+
+      return options;
     }
   },
   watch: {
@@ -153,7 +159,7 @@ export default {
         item.onmouseout = function () {
           item.classList.remove("hoverclass")
         }
-    
+
       })
     })
   },
@@ -194,5 +200,4 @@ export default {
 //   .el-select {
 //     width: 100%;
 //   }
-// }
-</style>
\ No newline at end of file
+// }</style>
\ No newline at end of file
diff --git a/src/components/clientSet/clientForm.vue b/src/components/clientSet/clientForm.vue
new file mode 100644
index 0000000..ee3fe36
--- /dev/null
+++ b/src/components/clientSet/clientForm.vue
@@ -0,0 +1,390 @@
+<template>
+    <div class="client_form " id="">
+           <div class="before_h_title mb24">{{ title }}</div>
+           <el-form :model="coverInfo">
+                <GuipRadio :options="titlePosList" v-if="titlePosFlag" v-model="coverInfo.titlePos" :client-form-flex="true" label="标题位置" />
+                <GuipRadio :options="imgPosList" v-if="imgPosFlag" v-model="coverInfo.imgPos" :client-form-flex="true" label="图片位置" />
+
+                <div class="fontWrap" v-if="fontDetailflag">
+                    <div class="flex-between">
+                        <GuipSelect v-model="coverInfo.ch_font" :options="chFontList" :client-form-flex="true" placeholder="请选择" label="中文字体" width="127px" />
+                        <GuipSelect v-model="coverInfo.ch_f_weight" :options="chFontWeightList" :client-form-flex="true" placeholder="请选择" label="中文字重" width="127px" />
+                    </div>
+                   <div class="flex-between">
+                       <GuipSelect v-model="coverInfo.eng_font" :options="engFontList" :client-form-flex="true" placeholder="请选择" label="英文字体" width="127px" />
+                       <GuipSelect v-model="coverInfo.eng_f_weight" :options="engFontWeightList" :client-form-flex="true" placeholder="请选择" label="英文字重" width="127px" />
+                    </div>
+                </div>
+                <div class="flex-between" v-else>
+                    <GuipSelect v-model="coverInfo.eng_font" :options="engFontList" :client-form-flex="true" placeholder="请选择" label="字体" width="127px" />
+                    <GuipInput v-model="coverInfo.fontSize" :client-form-flex="true" placeholder="请填写" label="字号" unit="pt" width="127px"/>
+                </div>
+
+                <GuipRadio v-if="!fontDetailflag" :options="boldList" v-model="coverInfo.bold" :client-form-flex="true" label="加粗" />
+
+                <GuipInput v-model="coverInfo.fontSize" v-if="fontDetailflag" :client-form-flex="true" placeholder="请填写" label="字号" unit="pt"/>
+
+               <GuipRadio :options="alignList" v-model="coverInfo.align" :client-form-flex="true" label="对齐" />
+               <GuipRadio :options="indentationList" v-model="coverInfo.indentation" :client-form-flex="true" label="缩进" />
+
+               <div v-if="computedShowIndentation" class="grayLabel showIndentation">
+                   <div class="flex-between">
+                       <GuipSelect v-model="coverInfo.spe_format" :options="speFormatList" :client-form-flex="true" placeholder="请选择" label="特殊格式" width="127px" />
+                       <GuipSelect :options="indentationUnitList" v-model="coverInfo.indentationUnit" placeholder="请选择" :client-form-flex="true" label="缩进单位" width="127px" />
+                   </div>
+                   <div class="flex-between">
+                       <GuipInput v-model="coverInfo.text_before" :client-form-flex="true" placeholder="请填写" label="文本之前" width="127px" />
+                       <GuipInput v-model="coverInfo.text_after" :client-form-flex="true" placeholder="请填写" label="文本之后" width="127px" />
+                   </div>
+               </div>
+               <div class="flex-label mt20">
+                   <div class="label-text">行距</div>
+                   <span class="colon">：</span>
+               </div>
+               <div class="grayLabel">
+                   <div class="flex-between">
+                       <GuipInput v-model="coverInfo.paragraph_before" label="段前" placeholder="请填写" :client-form-flex="true" width="127px" unit="行"/>
+                       <GuipInput v-model="coverInfo.paragraph_after" label="段后" placeholder="请填写" :client-form-flex="true" width="127px" unit="行"/>
+                   </div>
+                   <div class="flex-between">
+                       <GuipInput v-model="coverInfo.lineSpace" label="行间距" placeholder="请填写" :client-form-flex="true" width="127px" />
+                       <GuipSelect v-model="coverInfo.lineSpaceUnit" :options="lineSpaceUnitList" placeholder="请选择" label="行距单位" :client-form-flex="true" width="127px" />
+                   </div>
+               </div>
+
+               <GroupFormBtns 
+                   cancelText="重置" 
+                   @cancel="cancelClick" 
+                   flex="start"
+                   @confirm="submitDoctorBaseInfo" 
+               />
+           </el-form>
+       </div>
+</template>
+
+<script>
+import GuipInput from '@/components/GuipInput.vue';
+import GroupFormBtns from '@/components/GroupFormBtns.vue';
+import GuipRadio from '@/components/GuipRadio.vue';
+import GuipSelect from '@/components/GuipSelect.vue';
+
+export default {
+   name: 'CoverInfoPage',
+   props: {
+       title: {
+           type: String,
+           default: '封面信息'
+       },
+       titlePosFlag: {
+           type: Boolean,
+           default: false
+       },
+       imgPosFlag: {
+           type: Boolean,
+           default: false
+       },
+       fontDetailflag: {
+           type: Boolean,
+           default: false
+       },
+       // 外部传入的数据
+       initData: {
+           type: Object,
+           default: () => ({})
+       },
+       // 外部传入的选项列表
+       alignOptions: {
+           type: Array,
+           default: () => []
+       },
+       indentationOptions: {
+           type: Array,
+           default: () => []
+       },
+       indentationUnitOptions: {
+           type: Array,
+           default: () => []
+       },
+       lineSpaceUnitOptions: {
+           type: Array,
+           default: () => []
+       },
+       // 是否显示缩进区域（外部可控制）
+       showIndentation: {
+           type: Boolean,
+           default: null // 默认null表示使用内部逻辑
+       },
+       // 重置和提交方法是否由外部提供
+       externalCancelMethod: {
+           type: Function,
+           default: null
+       },
+       externalSubmitMethod: {
+           type: Function,
+           default: null
+       }
+   },
+   components: {
+       GroupFormBtns,
+       GuipInput,
+       GuipRadio,
+       GuipSelect
+   },
+   data() {
+       return {
+           coverInfo: {
+               lineSpaceUnit: '',
+               lineSpace: '',
+               indentationUnit: '',
+               indentation: '',
+               align: '',
+               fontSize: '',
+               eng_f_weight: '',
+               ch_f_weight: '',
+               spe_format: '',
+               text_before: '',
+               text_after: '',
+               paragraph_before: '',
+               paragraph_after: '',
+               eng_font: '',
+               ch_font: ''
+           },
+           // 内部默认选项，如果外部没有传入则使用这些
+           internalAlignList: [
+               { label: '左', value: 1 },
+               { label: '右', value: 2 },
+               { label: '居中', value: 3 },
+               { label: '两端', value: 4 },
+           ],
+           internalIndentationList: [
+               { label: '有', value: '1' },
+               { label: '无', value: '0' },
+           ],
+           internalIndentationUnitList: [
+               { label: '字符', value: '1' },
+               { label: '无', value: '0' },
+           ],
+           internalLineSpaceUnitList: [
+               { label: '行', value: '1' },
+               { label: '磅', value: '2' },
+               { label: '厘米', value: '3' },
+           ],
+           chFontList:[
+               { label: '宋体', value: 1 },
+               { label: '黑体', value: 2 },
+               { label: '仿宋_GB2312', value: 3 }
+           ],
+           engFontList:[
+               { label: 'Arial', value: 1 },
+               { label: 'Times New Roman', value: 2 },
+               { label: 'Courier New', value: 3 }
+           ],
+           speFormatList:[
+               { label: '常规', value: 1 },
+               { label: '加粗', value: 2 }
+           ],
+           engFontWeightList:[
+               { label: '常规', value: 1 },
+               { label: '加粗', value: 2 }
+           ],
+           chFontWeightList:[
+               { label: '常规', value: 1 },
+               { label: '加粗', value: 2 }
+           ],
+           titlePosList:[
+               { label: '表格之上', value: 1 },
+               { label: '表格之下', value: 2 },
+           ],
+           imgPosList:[
+               { label: '图片之上', value: 1 },
+               { label: '图片之下', value: 2 },
+           ],
+           boldList:[
+               { label: '加粗', value: 1 },
+               { label: '不加粗', value: 2 }
+           ]
+       };
+   },
+   computed: {
+       // 计算属性：优先使用外部传入的选项
+       alignList() {
+           return this.alignOptions.length > 0 ? this.alignOptions : this.internalAlignList;
+       },
+       indentationList() {
+           return this.indentationOptions.length > 0 ? this.indentationOptions : this.internalIndentationList;
+       },
+       indentationUnitList() {
+           return this.indentationUnitOptions.length > 0 ? this.indentationUnitOptions : this.internalIndentationUnitList;
+       },
+       lineSpaceUnitList() {
+           return this.lineSpaceUnitOptions.length > 0 ? this.lineSpaceUnitOptions : this.internalLineSpaceUnitList;
+       },
+       // 计算是否显示缩进区域
+       computedShowIndentation() {
+           if (this.showIndentation !== null) {
+               return this.showIndentation; // 外部控制
+           }
+           // 内部逻辑：当indentation为'1'时显示
+           return this.coverInfo.indentation === '1';
+       }
+   },
+   watch: {
+       // 监听外部传入的数据变化
+       initData: {
+           handler(newData) {
+               if (newData && Object.keys(newData).length > 0) {
+                   this.setFormData(newData);
+               }
+           },
+           immediate: true,
+           deep: true
+       }
+   },
+   methods: {
+       /**
+        * 取消/重置按钮点击
+        * 如果外部提供了方法，则调用外部方法；否则使用内部方法
+        */
+       cancelClick() {
+           if (this.externalCancelMethod) {
+               this.externalCancelMethod(this.coverInfo);
+           } else {
+               this.internalCancel();
+           }
+           // 触发事件供外部监听
+           this.$emit('cancel', this.coverInfo);
+       },
+       
+       /**
+        * 提交按钮点击
+        * 如果外部提供了方法，则调用外部方法；否则使用内部方法
+        */
+       submitDoctorBaseInfo() {
+           if (this.externalSubmitMethod) {
+               this.externalSubmitMethod(this.coverInfo);
+           } else {
+               this.internalSubmit();
+           }
+           // 触发事件供外部监听
+           this.$emit('submit', this.coverInfo);
+       },
+       
+       /**
+        * 内部重置方法
+        */
+       internalCancel() {
+           // 重置表单数据
+           Object.keys(this.coverInfo).forEach(key => {
+               this.coverInfo[key] = '';
+           });
+       },
+       
+       /**
+        * 内部提交方法
+        */
+       internalSubmit() {
+           console.log('内部提交:', this.coverInfo);
+           // 这里可以添加内部提交逻辑，如验证等
+       },
+       
+       /**
+        * 获取表单数据（供外部调用）
+        */
+       getFormData() {
+           return { ...this.coverInfo };
+       },
+       
+       /**
+        * 设置表单数据（供外部调用）
+        * @param {Object} data 表单数据
+        */
+       setFormData(data) {
+           Object.keys(data).forEach(key => {
+               if (key in this.coverInfo) {
+                   this.coverInfo[key] = data[key];
+               }
+           });
+       },
+       
+       /**
+        * 重置表单（供外部调用）
+        */
+       resetForm() {
+           this.internalCancel();
+       },
+       
+       /**
+        * 验证表单（供外部调用）
+        * @returns {Object} 验证结果 {valid: Boolean, errors: Array}
+        */
+       validateForm() {
+           const errors = [];
+           
+           // 示例验证规则
+           if (!this.coverInfo.fontSize) {
+               errors.push('字号不能为空');
+           }
+           if (!this.coverInfo.align) {
+               errors.push('请选择对齐方式');
+           }
+           
+           return {
+               valid: errors.length === 0,
+               errors: errors
+           };
+       },
+       
+       /**
+        * 获取特定字段值（供外部调用）
+        * @param {String} field 字段名
+        * @returns {*} 字段值
+        */
+       getFieldValue(field) {
+           return this.coverInfo[field];
+       },
+       
+       /**
+        * 设置特定字段值（供外部调用）
+        * @param {String} field 字段名
+        * @param {*} value 字段值
+        */
+       setFieldValue(field, value) {
+           if (field in this.coverInfo) {
+               this.coverInfo[field] = value;
+           }
+       },
+       
+       /**
+        * 显示缩进区域（供外部调用）
+        */
+       showIndentationArea() {
+           this.$emit('update:showIndentation', true);
+       },
+       
+       /**
+        * 隐藏缩进区域（供外部调用）
+        */
+       hideIndentationArea() {
+           this.$emit('update:showIndentation', false);
+       }
+   }
+};
+</script>
+
+<style scoped lang="scss">
+.client_flex-common .el-form-item__label {
+   width: 100px;
+}
+.client_form{
+   width: 440px;
+}
+.grayLabel ::v-deep .label-text{
+       color: #8A9099;
+}
+.mt20{
+   margin-bottom: 20px;
+}
+.el-form-item{
+   margin-bottom: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index 11fd8fa..2cf7b07 100755
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -736,10 +736,7 @@ export default new Vuex.Store({
       {
         name: '正文',
         path: '/clientSet/mainTextPage',
-        list: [{
-            name: '正文',
-            desc: 'mainTextPage',
-          },
+        list: [
           {
             name: '正文标题',
             desc: 'mainTextTitle'
diff --git a/src/style/theme/common.scss b/src/style/theme/common.scss
index 9ea1c6b..ded7246 100644
--- a/src/style/theme/common.scss
+++ b/src/style/theme/common.scss
@@ -1319,27 +1319,6 @@ body {
       align-items: center;
       width: 100%;
       
-      .flex-label {
-        display: flex;
-        align-items: center;
-        margin-right: 12px;
-        height: 32px;
-        flex-shrink: 0;
-        
-        .label-text {
-          display: block;
-          width: 56px;
-          text-align: justify;
-          text-align-last: justify;
-          line-height: 1;
-        }
-        
-        .colon {
-          margin-left: 4px;
-          line-height: 1;
-        }
-      }
-      
       .flex-input {
         flex: 1;
         position: relative;
@@ -1363,3 +1342,25 @@ body {
       }
     }
   }
+// 行  距： 这种表现样式
+  .flex-label {
+    display: flex;
+    align-items: center;
+    margin-right: 12px;
+    height: 32px;
+    flex-shrink: 0;
+    
+    .label-text {
+      display: block;
+      color: #333;
+      width: 56px;
+      text-align: justify;
+      text-align-last: justify;
+      line-height: 1;
+    }
+    
+    .colon {
+      margin-left: 4px;
+      line-height: 1;
+    }
+  }
diff --git a/src/style/theme/index.css b/src/style/theme/index.css
index c57ce1f..f86a201 100644
--- a/src/style/theme/index.css
+++ b/src/style/theme/index.css
@@ -4639,206 +4639,6 @@ border-color:#006AFF !important;
     line-height: 13px
 }
 
-.el-radio {
-    color: #606266;
-    font-weight: 500;
-    line-height: 1;
-    position: relative;
-    cursor: pointer;
-    display: inline-block;
-    white-space: nowrap;
-    outline: 0;
-    font-size: 14px;
-    margin-right: 30px;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none
-}
-
-.el-radio.is-bordered {
-    padding: 12px 20px 0 10px;
-    border-radius: 4px;
-    border: 1px solid #dfe2e6;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    height: 40px
-}
-
-.el-radio.is-bordered.is-checked {
-    border-color: #006aff
-}
-
-.el-radio.is-bordered.is-disabled {
-    cursor: not-allowed;
-    border-color: #ebeef5
-}
-
-.el-radio.is-bordered+.el-radio.is-bordered {
-    margin-left: 10px
-}
-
-.el-radio--medium.is-bordered {
-    padding: 10px 20px 0 10px;
-    border-radius: 4px;
-    height: 36px
-}
-
-.el-radio--medium.is-bordered .el-radio__label {
-    font-size: 14px
-}
-
-.el-radio--medium.is-bordered .el-radio__inner {
-    height: 14px;
-    width: 14px
-}
-
-.el-radio--small.is-bordered {
-    padding: 8px 15px 0 10px;
-    border-radius: 3px;
-    height: 32px
-}
-
-.el-radio--small.is-bordered .el-radio__label {
-    font-size: 12px
-}
-
-.el-radio--small.is-bordered .el-radio__inner {
-    height: 12px;
-    width: 12px
-}
-
-.el-radio--mini.is-bordered {
-    padding: 6px 15px 0 10px;
-    border-radius: 3px;
-    height: 28px
-}
-
-.el-radio--mini.is-bordered .el-radio__label {
-    font-size: 12px
-}
-
-.el-radio--mini.is-bordered .el-radio__inner {
-    height: 12px;
-    width: 12px
-}
-
-.el-radio:last-child {
-    margin-right: 0
-}
-
-.el-radio__input {
-    white-space: nowrap;
-    cursor: pointer;
-    outline: 0;
-    display: inline-block;
-    line-height: 1;
-    position: relative;
-    vertical-align: middle
-}
-
-.el-radio__input.is-disabled .el-radio__inner {
-    background-color: #f5f7fa;
-    border-color: #e4e7ed;
-    cursor: not-allowed
-}
-
-.el-radio__input.is-disabled .el-radio__inner::after {
-    cursor: not-allowed;
-    background-color: #f5f7fa
-}
-
-.el-radio__input.is-disabled .el-radio__inner+.el-radio__label {
-    cursor: not-allowed
-}
-
-.el-radio__input.is-disabled.is-checked .el-radio__inner {
-    background-color: #f5f7fa;
-    border-color: #e4e7ed
-}
-
-.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
-    background-color: #babdc2
-}
-
-.el-radio__input.is-disabled+span.el-radio__label {
-    color: #babdc2;
-    cursor: not-allowed
-}
-
-.el-radio__input.is-checked .el-radio__inner {
-    border-color: #006aff;
-    background: #006aff
-}
-
-.el-radio__input.is-checked .el-radio__inner::after {
-    -webkit-transform: translate(-50%, -50%) scale(1);
-    transform: translate(-50%, -50%) scale(1)
-}
-
-.el-radio__input.is-checked+.el-radio__label {
-    color: #006aff
-}
-
-.el-radio__input.is-focus .el-radio__inner {
-    border-color: #006aff
-}
-
-.el-radio__inner {
-    border: 1px solid #dfe2e6;
-    border-radius: 100%;
-    width: 14px;
-    height: 14px;
-    background-color: #fff;
-    position: relative;
-    cursor: pointer;
-    display: inline-block;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box
-}
-
-.el-radio__inner:hover {
-    border-color: #006aff
-}
-
-.el-radio__inner::after {
-    width: 4px;
-    height: 4px;
-    border-radius: 100%;
-    background-color: #fff;
-    content: "";
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    -webkit-transform: translate(-50%, -50%) scale(0);
-    transform: translate(-50%, -50%) scale(0);
-    -webkit-transition: -webkit-transform .15s ease-in;
-    transition: -webkit-transform .15s ease-in;
-    transition: transform .15s ease-in;
-    transition: transform .15s ease-in, -webkit-transform .15s ease-in
-}
-
-.el-radio__original {
-    opacity: 0;
-    outline: 0;
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: 0
-}
-
-.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
-    -webkit-box-shadow: 0 0 2px 2px #006aff;
-    box-shadow: 0 0 2px 2px #006aff
-}
-
-.el-radio__label {
-    font-size: 14px;
-    padding-left: 10px
-}
-
 .el-radio-group {
     display: inline-block;
     line-height: 1;
@@ -21695,206 +21495,6 @@ border-color:#006AFF !important;
     font-size: 0
 }
 
-.el-radio {
-    color: #606266;
-    font-weight: 500;
-    line-height: 1;
-    position: relative;
-    cursor: pointer;
-    display: inline-block;
-    white-space: nowrap;
-    outline: 0;
-    font-size: 14px;
-    margin-right: 30px;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none
-}
-
-.el-radio.is-bordered {
-    padding: 12px 20px 0 10px;
-    border-radius: 4px;
-    border: 1px solid #dfe2e6;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    height: 40px
-}
-
-.el-radio.is-bordered.is-checked {
-    border-color: #006aff
-}
-
-.el-radio.is-bordered.is-disabled {
-    cursor: not-allowed;
-    border-color: #ebeef5
-}
-
-.el-radio.is-bordered+.el-radio.is-bordered {
-    margin-left: 10px
-}
-
-.el-radio--medium.is-bordered {
-    padding: 10px 20px 0 10px;
-    border-radius: 4px;
-    height: 36px
-}
-
-.el-radio--medium.is-bordered .el-radio__label {
-    font-size: 14px
-}
-
-.el-radio--medium.is-bordered .el-radio__inner {
-    height: 14px;
-    width: 14px
-}
-
-.el-radio--small.is-bordered {
-    padding: 8px 15px 0 10px;
-    border-radius: 3px;
-    height: 32px
-}
-
-.el-radio--small.is-bordered .el-radio__label {
-    font-size: 12px
-}
-
-.el-radio--small.is-bordered .el-radio__inner {
-    height: 12px;
-    width: 12px
-}
-
-.el-radio--mini.is-bordered {
-    padding: 6px 15px 0 10px;
-    border-radius: 3px;
-    height: 28px
-}
-
-.el-radio--mini.is-bordered .el-radio__label {
-    font-size: 12px
-}
-
-.el-radio--mini.is-bordered .el-radio__inner {
-    height: 12px;
-    width: 12px
-}
-
-.el-radio:last-child {
-    margin-right: 0
-}
-
-.el-radio__input {
-    white-space: nowrap;
-    cursor: pointer;
-    outline: 0;
-    display: inline-block;
-    line-height: 1;
-    position: relative;
-    vertical-align: middle
-}
-
-.el-radio__input.is-disabled .el-radio__inner {
-    background-color: #f5f7fa;
-    border-color: #e4e7ed;
-    cursor: not-allowed
-}
-
-.el-radio__input.is-disabled .el-radio__inner::after {
-    cursor: not-allowed;
-    background-color: #f5f7fa
-}
-
-.el-radio__input.is-disabled .el-radio__inner+.el-radio__label {
-    cursor: not-allowed
-}
-
-.el-radio__input.is-disabled.is-checked .el-radio__inner {
-    background-color: #f5f7fa;
-    border-color: #e4e7ed
-}
-
-.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
-    background-color: #babdc2
-}
-
-.el-radio__input.is-disabled+span.el-radio__label {
-    color: #babdc2;
-    cursor: not-allowed
-}
-
-.el-radio__input.is-checked .el-radio__inner {
-    border-color: #006aff;
-    background: #006aff
-}
-
-.el-radio__input.is-checked .el-radio__inner::after {
-    -webkit-transform: translate(-50%, -50%) scale(1);
-    transform: translate(-50%, -50%) scale(1)
-}
-
-.el-radio__input.is-checked+.el-radio__label {
-    color: #006aff
-}
-
-.el-radio__input.is-focus .el-radio__inner {
-    border-color: #006aff
-}
-
-.el-radio__inner {
-    border: 1px solid #dfe2e6;
-    border-radius: 100%;
-    width: 14px;
-    height: 14px;
-    background-color: #fff;
-    position: relative;
-    cursor: pointer;
-    display: inline-block;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box
-}
-
-.el-radio__inner:hover {
-    border-color: #006aff
-}
-
-.el-radio__inner::after {
-    width: 4px;
-    height: 4px;
-    border-radius: 100%;
-    background-color: #fff;
-    content: "";
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    -webkit-transform: translate(-50%, -50%) scale(0);
-    transform: translate(-50%, -50%) scale(0);
-    -webkit-transition: -webkit-transform .15s ease-in;
-    transition: -webkit-transform .15s ease-in;
-    transition: transform .15s ease-in;
-    transition: transform .15s ease-in, -webkit-transform .15s ease-in
-}
-
-.el-radio__original {
-    opacity: 0;
-    outline: 0;
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: 0
-}
-
-.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
-    -webkit-box-shadow: 0 0 2px 2px #006aff;
-    box-shadow: 0 0 2px 2px #006aff
-}
-
-.el-radio__label {
-    font-size: 14px;
-    padding-left: 10px
-}
-
 .el-scrollbar {
     overflow: hidden;
     position: relative
@@ -24767,7 +24367,7 @@ border-color:#006AFF !important;
     white-space: nowrap;
     outline: 0;
     font-size: 14px;
-    margin-right: 30px;
+    margin-right: 0px !important;
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none
diff --git a/src/views/clientSet/mainTextPage.vue b/src/views/clientSet/mainTextPage.vue
index 8a67b20..8cf5cc4 100644
--- a/src/views/clientSet/mainTextPage.vue
+++ b/src/views/clientSet/mainTextPage.vue
@@ -1,6 +1,107 @@
-
 <template>
-    <div class="mainTextPage">
-        
+    <div class="mainTextPage main-content12">
+        <h3 class="pageTitle">正文</h3>
+        <div class="flex-between flex-common" id="mainTextTitle">
+            <ClientForm ref="oneLevelRef" title="一级标题" :init-data="initFormData" :titlePosFlag="false"
+                :fontDetailflag="true" @cancel="(data) => handleCancelEvent(data, 'oneLevel')"
+                @submit="(data) => handleSubmitEvent(data, 'oneLevel')" />
+            <ClientForm ref="twoLevelRef" title="二级标题" :titlePosFlag="false" :fontDetailflag="false"
+                :init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'twoLevel')"
+                @submit="(data) => handleSubmitEvent(data, 'twoLevel')" />
+        </div>
+        <div class="flex-between flex-common mt12" id="">
+            <ClientForm ref="threeLevelRef" title="三级标题" :titlePosFlag="false" :fontDetailflag="false"
+                :init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'threeLevelRef')"
+                @submit="(data) => handleSubmitEvent(data, 'threeLevelRef')" />
+        </div>
+        <div class="flex-between flex-common mt12" id="mainTextContent">
+            <ClientForm ref="mainRef" title="正文内容" :titlePosFlag="false" :fontDetailflag="false"
+                :init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'mainRef')"
+                @submit="(data) => handleSubmitEvent(data, 'mainRef')" />
+        </div>
+        <div class="flex-between flex-common mt12" id="mainTextTableImage">
+            <ClientForm ref="tableRef" title="表格标题" :titlePosFlag="true" :fontDetailflag="true"
+                :init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'tableRef')"
+                @submit="(data) => handleSubmitEvent(data, 'tableRef')" />
+            <ClientForm ref="imagesRef" title="图片标题" :imgPosFlag="true" :fontDetailflag="true" :init-data="initFormData"
+                @cancel="(data) => handleCancelEvent(data, 'imagesRef')"
+                @submit="(data) => handleSubmitEvent(data, 'imagesRef')" />
+        </div>
     </div>
-</template>
\ No newline at end of file
+</template>
+<script>
+import ClientForm from '@/components/clientSet/clientForm.vue';
+export default {
+    components: {
+        ClientForm,
+    },
+    data() {
+        return {
+            initFormData: {
+                fontSize: '12',
+                align: 1,
+                indentation: '1'
+            },
+        };
+    },
+    methods: {
+        // 外部重置方法
+        handleCancelEvent(formData, refName) {
+            console.log('外部重置方法:', formData);
+            // 根据 refName 执行不同的重置逻辑
+            switch (refName) {
+                case 'oneLevel':
+                    console.log('执行一级标题重置逻辑');
+                    // 这里可以调用对应的 ref 方法
+                    this.$refs[refName + 'Ref']?.someMethod();
+                    break;
+                case 'twoLevel':
+                    console.log('执行二级标题重置逻辑');
+                    break;
+                case 'threeLevel':
+                    console.log('执行三级标题重置逻辑');
+                    break;
+                case 'main':
+                    console.log('执行正文内容重置逻辑');
+                    break;
+                case 'table':
+                    console.log('执行表格标题重置逻辑');
+                    break;
+                case 'images':
+                    console.log('执行图片标题重置逻辑');
+                    break;
+                default:
+                    console.log('默认重置逻辑');
+            }
+        },
+
+        // 外部提交方法
+        handleSubmitEvent(formData, refName) {
+            console.log('外部提交方法:', formData);
+            // 根据 refName 调用不同的 API
+            switch (refName) {
+                case 'oneLevel':
+                    this.submitOneLevel(formData);
+                    break;
+                case 'twoLevel':
+                    this.submitTwoLevel(formData);
+                    break;
+            }
+        },
+        submitOneLevel(data) {
+            // 调用一级标题的 API
+            console.log('提交一级标题数据:', data);
+        },
+
+        submitTwoLevel(data) {
+            // 调用二级标题的 API
+            console.log('提交二级标题数据:', data);
+        }
+    },
+};
+</script>
+<style>
+.flex-common {
+    align-items: flex-start;
+}
+</style>
\ No newline at end of file