feat(预置信息界面优化):

ruoyi-ui/src/views/board/component/TextPreview.vue

@@ -35,7 +35,7 @@ export default {
     };
   },
   props: {
-    fontStyle: {
+    fontFamily: {
       type: String,
       default: 'normal',
     },
@@ -73,7 +73,15 @@ export default {
     },
     content: {
       type: String,
-      default: '这里是示例内容，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',
+      default: '这里是示例内容',
+    },
+    horizontalCenter: {
+      type: Boolean,
+      default: false,
+    },
+    verticalCenter: {
+      type: Boolean,
+      default: false,
     },
   },
   computed: {
@@ -85,20 +93,19 @@ export default {
         background: '#000000',
         overflow: 'hidden',
         display: 'flex',
-        alignItems: 'center',
+        alignItems: this.verticalCenter ? 'center' : 'flex-start',
-        justifyContent: 'center',
+        justifyContent: this.horizontalCenter ? 'center' : 'flex-start',
       };
     },
     textStyle() {
       return {
-        position: 'absolute',
+        fontFamily: this.fontFamily,
-        top: `${-this.fontY * this.scale}px`,
+        whiteSpace: 'preserve-breaks',
-        left: `${this.fontX * this.scale}px`,
-        fontStyle: this.fontStyle,
         color: this.fontColor,
         fontSize: `${this.fontSize * this.scale}px`,
         letterSpacing: `${this.letterSpacing * this.scale}px`,
         lineHeight: `${this.lineHeight}`,
+        transform: `translate(${this.horizontalCenter ? this.fontX * this.scale : this.fontX}px, ${this.verticalCenter ? this.fontY * this.scale : this.fontY}px)`,
       };
     },
   },

ruoyi-ui/src/views/board/content/index.vue

@@ -97,8 +97,10 @@
     />
 
     <!-- 添加或修改预置信息及模版对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="auto">
+        <el-row :gutter="0">
+          <el-col :span="8">
             <el-form-item label="内容模版名称" prop="name">
               <el-input v-model="form.name" placeholder="请输入预置信息名称"/>
             </el-form-item>
@@ -122,17 +124,36 @@
               </el-select>
             </el-form-item>
             <el-form-item label="预置内容" prop="content">
-          <el-input v-model="form.content" placeholder="请输入预置内容"/>
+              <el-input type="textarea" v-model="form.content" placeholder="请输入预置内容"/>
             </el-form-item>
             <el-form-item label="备注" prop="remark">
               <el-input v-model="form.remark" placeholder="请输入备注"/>
             </el-form-item>
-        <el-form-item label="字体样式" prop="fontStyle">
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="字体大小" prop="fontSize">
+              <el-input-number :controls="false" :min="20" :max="50" v-model="form.fontSize" placeholder="请输入字体大小" size="small" />
+            </el-form-item>
+            <el-form-item label="字体间距" prop="letterSpacing">
+              <el-input-number :controls="false" :min="0" v-model="form.letterSpacing" placeholder="请输入字体间距" size="small" />
+            </el-form-item>
+            <el-form-item label="字体坐标X" prop="fontPositionX">
+              <el-input-number :controls="false" v-model="form.fontPositionX" placeholder="请输入字体坐标X" size="small"/>
+            </el-form-item>
+            <el-form-item label="字体坐标Y" prop="fontPositionY">
+              <el-input-number :controls="false" v-model="form.fontPositionY" placeholder="请输入字体坐标Y" size="small"/>
+            </el-form-item>
+            <el-form-item label="播放时间" prop="playTime">
+              <el-input-number :controls="false" :min="0" v-model="form.playTime" placeholder="请输入播放时间" size="small"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="字体样式" prop="fontFamily">
               <el-select
-            v-model="form.fontStyle"
+                v-model="form.fontFamily"
                 placeholder="请选择字体样式">
                 <el-option
-              v-for="dict in dict.type.font_style"
+                  v-for="dict in dict.type.font_family"
                   :key="dict.value"
                   :label="dict.label"
                   :value="dict.value"
@@ -151,31 +172,39 @@
                 />
               </el-select>
             </el-form-item>
-        <el-form-item label="字体大小" prop="fontSize">
+            <el-form-item label="水平居中" prop="horizontalCenter">
-          <el-input-number :min="20" :max="50" v-model="form.fontSize" placeholder="请输入字体大小" />
+              <el-switch
+                v-model="form.horizontalCenter"
+                active-color="#13ce66"
+                inactive-color="#ff4949">
+              </el-switch>
             </el-form-item>
-        <el-form-item label="字体间距" prop="letterSpacing">
+            <el-form-item label="垂直居中" prop="verticalCenter">
-          <el-input-number :min="0" v-model="form.letterSpacing" placeholder="请输入字体间距" />
+              <el-switch
-        </el-form-item>
+                v-model="form.verticalCenter"
-        <el-form-item label="字体坐标X" prop="fontPositionX">
+                active-color="#13ce66"
-          <el-input-number v-model="form.fontPositionX" placeholder="请输入字体坐标X" />
+                inactive-color="#ff4949">
-        </el-form-item>
+              </el-switch>
-        <el-form-item label="字体坐标Y" prop="fontPositionY">
-          <el-input-number v-model="form.fontPositionY" placeholder="请输入字体坐标Y" />
-        </el-form-item>
-        <el-form-item label="播放时间" prop="playTime">
-          <el-input-number :min="0" v-model="form.playTime" placeholder="请输入播放时间" />
             </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
             <text-preview
-          fontStyle="SongTi"
+              :fontFamily="form.fontFamily"
               :fontSize="form.fontSize"
+              :fontColor="form.fontColor"
               :letterSpacing="form.letterSpacing"
               :fontX="form.fontPositionX"
               :fontY="form.fontPositionY"
               :backgroundWidth="bgSize.width"
               :backgroundHeight="bgSize.height"
               :lineHeight="1"
+              :horizontalCenter="form.horizontalCenter"
+              :verticalCenter="form.verticalCenter"
               :content="form.content"/>
+          </el-col>
+        </el-row>
       </el-form>
 
       <div slot="footer" class="dialog-footer">
@@ -195,7 +224,7 @@ import {listBoardType} from "@/api/board/boardtype";
 export default {
   name: "Content",
   components: {TextPreview},
-  dicts: ['board_size','font_color','font_style', 'alert_type'],
+  dicts: ['board_size', 'font_color', 'font_family', 'alert_type'],
   data() {
     return {
       // 遮罩层
@@ -334,7 +363,7 @@ export default {
         infoType: null,
         content: null,
         previewPath: null,
-        fontStyle: null,
+        fontFamily: null,
         fontSize: null,
         letterSpacing: null,
         fontColor: null,
@@ -346,7 +375,9 @@ export default {
         createTime: null,
         updateTime: null,
         createBy: null,
-        updateBy: null
+        updateBy: null,
+        horizontalCenter: true,
+        verticalCenter: true,
       };
       this.resetForm("form");
     },