gm-printer 10.42.4-beta.2 → 10.42.4-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gm-printer",
-  "version": "10.42.4-beta.2",
+  "version": "10.42.4-beta.6",
   "description": "diy printer",
   "main": "src/index.js",
   "scripts": {

package/src/common/editor_select.js

@@ -3,7 +3,7 @@ import React from 'react'
 import { observer, inject } from 'mobx-react'
 import { Flex, Option, Select, RadioGroup, Radio } from '../components'
 import { InputWithUnit } from '../common/component'
-import { pageTypeMap, printDirectionList, LONG_PRINT } from '../config'
+import { pageTypeMap, printDirectionList, fontFamilyList, LONG_PRINT } from '../config'
 import _ from 'lodash'
 import { dispatchMsg } from '../util'
 import PropTypes from 'prop-types'
@@ -31,6 +31,10 @@ class EditorSelector extends React.Component {
     this.props.editStore.setPagePrintDirection(value)
   }
 
+  handleFontFamily = value => {
+    this.props.editStore.setPageFontFamily(value)
+  }
+
   handleSelectedRegion = selected => {
     dispatchMsg('gm-printer-select-region', { selected })
   }
@@ -52,6 +56,7 @@ class EditorSelector extends React.Component {
       computedSelectedRegionTip,
       selectedRegion
     } = this.props.editStore
+    const { showFontFamily } = this.props
     const isDIY = page.type === 'DIY'
     const isLongPrint = page.type === LONG_PRINT
     return (
@@ -121,6 +126,23 @@ class EditorSelector extends React.Component {
           </Flex>
         )}
 
+        {showFontFamily && (
+          <Flex alignCenter className='gm-padding-top-5'>
+            <div>{i18next.t('打印字体')}：</div>
+            <Select
+              className='gm-printer-edit-select'
+              value={page.fontFamily || ''}
+              onChange={this.handleFontFamily}
+            >
+              {_.map(fontFamilyList, v => (
+                <Option key={v.value} value={v.value}>
+                  {v.text}
+                </Option>
+              ))}
+            </Select>
+          </Flex>
+        )}
+
         <Flex alignCenter className='gm-padding-top-5'>
           <div>{i18next.t('选择区域')}：</div>
           <Select
@@ -190,10 +212,12 @@ class EditorSelector extends React.Component {
 
 EditorSelector.propTypes = {
   isPurchase: PropTypes.bool,
+  showFontFamily: PropTypes.bool,
   editStore: PropTypes.object
 }
 EditorSelector.defaultProps = {
-  isPurchase: false
+  isPurchase: false,
+  showFontFamily: false
 }
 
 export default EditorSelector

package/src/common/editor_store.js

@@ -537,6 +537,33 @@ class EditorStore {
     }
   }
 
+  // 模板级打印字体（page.fontFamily），空值清掉字段恢复默认字体
+  @action
+  setPageFontFamily(value) {
+    this.config.page = {
+      ...this.config.page,
+      fontFamily: value || undefined
+    }
+  }
+
+  // 模板级打印字体（page.fontFamily），空值清掉字段恢复默认字体
+  @action
+  setPageFontFamily(value) {
+    this.config.page = {
+      ...this.config.page,
+      fontFamily: value || undefined
+    }
+  }
+
+  // 模板级打印字体（page.fontFamily），空值清掉字段恢复默认字体
+  @action
+  setPageFontFamily(value) {
+    this.config.page = {
+      ...this.config.page,
+      fontFamily: value || undefined
+    }
+  }
+
   @action
   setSelected(selected = null) {
     this.selected = selected

package/src/config.js

@@ -116,6 +116,18 @@ export const printDirectionList = [
   { value: 'horizontal', text: i18next.t('横向') }
 ]
 
+// 模板级打印字体（配送单等产品需求：整页字体自定义）。
+// 只收系统字体，避免自定义字体文件的网络加载与打印时机问题。
+// 值为三段 fallback：Windows 名 + macOS 名 + 中文名，双平台都能命中
+export const fontFamilyList = [
+  { value: '', text: i18next.t('默认字体') },
+  { value: 'SimSun, Songti SC, 宋体', text: i18next.t('宋体') },
+  { value: 'KaiTi, Kaiti SC, 楷体', text: i18next.t('楷体') },
+  { value: 'SimHei, Heiti SC, 黑体', text: i18next.t('黑体') },
+  { value: 'Microsoft YaHei, PingFang SC, 微软雅黑', text: i18next.t('微软雅黑') },
+  { value: 'FangSong, STFangsong, 仿宋', text: i18next.t('仿宋') }
+]
+
 export const borderStyleList = [
   { value: 'solid', text: i18next.t('实线') },
   { value: 'dashed', text: i18next.t('虚线') },

package/src/editor/editor.js

@@ -85,7 +85,7 @@ class Editor extends React.Component {
               <span>{':' + i18next.t('商户配送单')}</span>
             </>
             <Gap height='10px' />
-            <EditorSelect />
+            <EditorSelect showFontFamily />
             <Gap height='5px' />
             <SpecialField addFields={addFields} mockData={mockData} />
             <SpecialOtherField addFields={addFields} mockData={mockData} />

package/src/editor/editor_menu_config.js

@@ -84,7 +84,7 @@ class Editor extends React.Component {
               <span>{':' + i18next.t('商户配送单')}</span>
             </>
             <Gap height='10px' />
-            <EditorSelect />
+            <EditorSelect showFontFamily />
             <Gap height='5px' />
             <SpecialField addFields={addFields} mockData={mockData} />
             <SpecialOtherField addFields={addFields} mockData={mockData} />

package/src/printer/page.js

@@ -31,6 +31,7 @@ class Page extends React.Component {
     const {
       size: { width, height },
       pageStyle,
+      fontFamily,
       type
     } = printerStore.config.page
     // 统一减2毫米,防止计算误差溢出
@@ -43,6 +44,8 @@ class Page extends React.Component {
         })}
         style={{
           ...pageStyle,
+          // 模板级自定义字体（station 配送单模板 page.fontFamily）：整页生效，未配置时保持浏览器默认
+          ...(fontFamily ? { fontFamily } : undefined),
           boxSizing: 'content-box',
           width: `calc(${width} - ${paddingLeft} - ${paddingRight})`,
           padding: `${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`,