Demo：富文本模式支持设置节点文本的对齐方式

web/src/assets/icon-font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2479351 */
-  src: url('iconfont.woff2?t=1726022313538') format('woff2'),
+  src: url('iconfont.woff2?t=1737022296799') format('woff2'),
-       url('iconfont.woff?t=1726022313538') format('woff'),
+       url('iconfont.woff?t=1737022296799') format('woff'),
-       url('iconfont.ttf?t=1726022313538') format('truetype');
+       url('iconfont.ttf?t=1737022296799') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.iconjuzhongduiqi:before {
+  content: "\ec80";
+}
+
 .iconfile-excel:before {
   content: "\e7b7";
 }

web/src/config/en.js

@@ -626,3 +626,19 @@ export const linearGradientDirList = [
     end: [0, 0]
   }
 ]
+
+// 文本对齐方式
+export const alignList = [
+  {
+    name: 'Align left',
+    value: 'left'
+  },
+  {
+    name: 'Align center',
+    value: 'center'
+  },
+  {
+    name: 'Align right',
+    value: 'right'
+  }
+]

web/src/config/index.js

@@ -21,7 +21,8 @@ import {
   lineStyleMap as lineStyleMapZh,
   numberTypeList as numberTypeListZh,
   numberLevelList as numberLevelListZh,
-  linearGradientDirList as linearGradientDirListZh
+  linearGradientDirList as linearGradientDirListZh,
+  alignList as alignListZh
 } from './zh'
 import {
   fontFamilyList as fontFamilyListEn,
@@ -37,7 +38,8 @@ import {
   downTypeList as downTypeListEn,
   numberTypeList as numberTypeListEn,
   numberLevelList as numberLevelListEn,
-  linearGradientDirList as linearGradientDirListEn
+  linearGradientDirList as linearGradientDirListEn,
+  alignList as alignListEn
 } from './en'
 import {
   fontFamilyList as fontFamilyListZhtw,
@@ -53,7 +55,8 @@ import {
   downTypeList as downTypeListZhtw,
   numberTypeList as numberTypeListZhtw,
   numberLevelList as numberLevelListZhtw,
-  linearGradientDirList as linearGradientDirListZhtw
+  linearGradientDirList as linearGradientDirListZhtw,
+  alignList as alignListZhtw
 } from './zhtw'
 
 const fontFamilyList = {
@@ -152,6 +155,12 @@ const linearGradientDirList = {
   zhtw: linearGradientDirListZhtw
 }
 
+const alignList = {
+  zh: alignListZh,
+  en: alignListEn,
+  zhtw: alignListZhtw
+}
+
 export {
   fontSizeList,
   borderWidthList,
@@ -175,5 +184,6 @@ export {
   downTypeList,
   numberTypeList,
   numberLevelList,
-  linearGradientDirList
+  linearGradientDirList,
+  alignList
 }

web/src/config/zh.js

@@ -721,3 +721,19 @@ export const linearGradientDirList = [
     end: [0, 0]
   }
 ]
+
+// 文本对齐方式
+export const alignList = [
+  {
+    name: '左对齐',
+    value: 'left'
+  },
+  {
+    name: '居中对齐',
+    value: 'center'
+  },
+  {
+    name: '右对齐',
+    value: 'right'
+  }
+]

web/src/config/zhtw.js

@@ -626,3 +626,19 @@ export const linearGradientDirList = [
     end: [0, 0]
   }
 ]
+
+// 文本对齐方式
+export const alignList = [
+  {
+    name: '左對齊',
+    value: 'left'
+  },
+  {
+    name: '居中對齊',
+    value: 'center'
+  },
+  {
+    name: '右對齊',
+    value: 'right'
+  }
+]

web/src/lang/en_us.js

@@ -368,7 +368,8 @@ export default {
     fontSize: 'Font size',
     color: 'Color',
     backgroundColor: 'Background color',
-    removeFormat: 'Clear Style'
+    removeFormat: 'Clear Style',
+    textAlign: 'Text align'
   },
   other: {
     loading: 'Loading, please wait...'

web/src/lang/zh_cn.js

@@ -358,7 +358,8 @@ export default {
     fontSize: '字号',
     color: '字体颜色',
     backgroundColor: '背景颜色',
-    removeFormat: '清除样式'
+    removeFormat: '清除样式',
+    textAlign: '对齐方式'
   },
   other: {
     loading: '正在加载，请稍后...'

web/src/lang/zh_tw.js

@@ -357,7 +357,8 @@ export default {
     fontSize: '字型大小',
     color: '字型顏色',
     backgroundColor: '背景顏色',
-    removeFormat: '清除樣式'
+    removeFormat: '清除樣式',
+    textAlign: '對齊方式'
   },
   other: {
     loading: '載入中，請稍候...'

web/src/pages/Edit/components/RichTextToolbar.vue

@@ -110,6 +110,25 @@
       </el-popover>
     </el-tooltip>
 
+    <el-tooltip :content="$t('richTextToolbar.textAlign')" placement="top">
+      <el-popover placement="bottom" trigger="hover">
+        <div class="fontOptionsList" :class="{ isDark: isDark }">
+          <div
+            class="fontOptionItem"
+            v-for="item in alignList"
+            :key="item.value"
+            :class="{ active: formatInfo.align === item.value }"
+            @click="changeTextAlign(item.value)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+        <div class="btn" slot="reference">
+          <span class="icon iconfont iconjuzhongduiqi"></span>
+        </div>
+      </el-popover>
+    </el-tooltip>
+
     <el-tooltip :content="$t('richTextToolbar.removeFormat')" placement="top">
       <div class="btn" @click="removeFormat">
         <span class="icon iconfont iconqingchu"></span>
@@ -119,7 +138,7 @@
 </template>
 
 <script>
-import { fontFamilyList, fontSizeList } from '@/config'
+import { fontFamilyList, fontSizeList, alignList } from '@/config'
 import Color from './Color'
 import { mapState } from 'vuex'
 
@@ -153,6 +172,10 @@ export default {
 
     fontFamilyList() {
       return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh
+    },
+
+    alignList() {
+      return alignList[this.$i18n.locale] || alignList.zh
     }
   },
   created() {
@@ -230,6 +253,13 @@ export default {
       })
     },
 
+    changeTextAlign(align) {
+      this.formatInfo.align = align
+      this.mindMap.richText.formatText({
+        align
+      })
+    },
+
     removeFormat() {
       this.mindMap.richText.removeFormat()
     }

web/src/pages/Edit/components/Style.vue

@@ -10,7 +10,9 @@
         <div class="title noTop">{{ $t('style.text') }}</div>
         <div class="row">
           <div class="rowItem">
-            <span class="name">{{ $t('style.fontFamily') }}</span>
+            <span class="name" v-if="!openNodeRichText">{{
+              $t('style.fontFamily')
+            }}</span>
             <el-select
               size="mini"
               style="width: 100px"
@@ -29,10 +31,12 @@
             </el-select>
           </div>
           <div class="rowItem">
-            <span class="name">{{ $t('style.fontSize') }}</span>
+            <span class="name" v-if="!openNodeRichText">{{
+              $t('style.fontSize')
+            }}</span>
             <el-select
               size="mini"
-              style="width: 80px"
+              style="width: 60px"
               v-model="style.fontSize"
               placeholder=""
               @change="update('fontSize')"
@@ -47,6 +51,23 @@
               </el-option>
             </el-select>
           </div>
+          <div class="rowItem" v-if="openNodeRichText">
+            <el-select
+              size="mini"
+              style="width: 80px"
+              v-model="style.textAlign"
+              placeholder=""
+              @change="update('textAlign')"
+            >
+              <el-option
+                v-for="item in alignList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
         </div>
         <div class="row">
           <div class="btnGroup">
@@ -500,7 +521,8 @@ import {
   borderRadiusList,
   shapeList,
   shapeListMap,
-  linearGradientDirList
+  linearGradientDirList,
+  alignList
 } from '@/config'
 import { mapState } from 'vuex'
 
@@ -546,7 +568,8 @@ export default {
         linearGradientDir: '',
         lineFlow: false,
         lineFlowForward: true,
-        lineFlowDuration: 1
+        lineFlowDuration: 1,
+        textAlign: ''
       }
     }
   },
@@ -554,7 +577,8 @@ export default {
     ...mapState({
       isDark: state => state.localConfig.isDark,
       activeSidebar: state => state.activeSidebar,
-      supportLineFlow: state => state.supportLineFlow
+      supportLineFlow: state => state.supportLineFlow,
+      openNodeRichText: state => state.localConfig.openNodeRichText
     }),
     fontFamilyList() {
       return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh
@@ -572,6 +596,9 @@ export default {
       return (
         linearGradientDirList[this.$i18n.locale] || linearGradientDirList.zh
       )
+    },
+    alignList() {
+      return alignList[this.$i18n.locale] || alignList.zh
     }
   },
   watch: {