gm-printer 10.42.4-beta.7 → 10.42.4-beta.8

package/package.json

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

package/src/common/editor_select.js

@@ -8,6 +8,33 @@ import _ from 'lodash'
 import { dispatchMsg } from '../util'
 import PropTypes from 'prop-types'
 
+/**
+ * 本机字体可用性检测（DOM 宽度法）：
+ * 用同一文本分别以「不存在的字体（强制走浏览器 fallback 默认）」和「目标字体栈」
+ * 离屏渲染量宽，宽度差 >0.5px 说明栈中有字体真实命中（未安装时会 fallback 到与
+ * 假字体相同的系统默认，宽度一致）。基线不能用 monospace：中文等宽字体自身会
+ * fallback 到系统默认，与目标字体栈的 fallback 同源，导致未安装也判 true。
+ */
+const isFontInstalled = (fontFamily) => {
+  if (typeof document === 'undefined' || !fontFamily) return true
+  const host = document.body
+  if (!host) return true
+  const probe = document.createElement('div')
+  probe.textContent = '配送单验收签字汉字测试123'
+  probe.style.cssText =
+    'position:absolute;left:-9999px;top:0;font-size:32px;white-space:nowrap;'
+  const widthOf = (ff) => {
+    probe.style.fontFamily = ff
+    host.appendChild(probe)
+    const w = probe.getBoundingClientRect().width
+    host.removeChild(probe)
+    return w
+  }
+  // 基线：一个肯定不存在的字体名 → 浏览器对中文回落系统默认；目标栈若全未安装，回落结果与之等宽
+  const base = widthOf('GmDefinitelyNotAFont999')
+  return Math.abs(widthOf(fontFamily) - base) > 0.5
+}
+
 @inject('editStore')
 @observer
 class EditorSelector extends React.Component {
@@ -56,7 +83,7 @@ class EditorSelector extends React.Component {
       computedSelectedRegionTip,
       selectedRegion
     } = this.props.editStore
-    const { showFontFamily } = this.props
+    const { showFontFamily, fontFamilies } = this.props
     const isDIY = page.type === 'DIY'
     const isLongPrint = page.type === LONG_PRINT
     return (
@@ -134,11 +161,23 @@ class EditorSelector extends React.Component {
               value={page.fontFamily || ''}
               onChange={this.handleFontFamily}
             >
-              {_.map(fontFamilyList, v => (
-                <Option key={v.value} value={v.value}>
-                  {v.text}
-                </Option>
-              ))}
+              {_.map(fontFamilies || fontFamilyList, v => {
+                // 非默认字体且本机未安装时，选项标注提示：选中后打印/导出会退化为默认字体
+                const installed = isFontInstalled(v.value)
+                return (
+                  <Option key={v.value} value={v.value}>
+                    {v.text}
+                    {!installed && (
+                      <span
+                        className='gm-text-red gm-padding-left-5'
+                        style={{ fontSize: '11px' }}
+                      >
+                        （本机未安装，将退化默认字体）
+                      </span>
+                    )}
+                  </Option>
+                )
+              })}
             </Select>
           </Flex>
         )}
@@ -213,6 +252,8 @@ class EditorSelector extends React.Component {
 EditorSelector.propTypes = {
   isPurchase: PropTypes.bool,
   showFontFamily: PropTypes.bool,
+  // 自定义打印字体列表（扩展接口）：[{ value, text }]；不传用内置 fontFamilyList
+  fontFamilies: PropTypes.array,
   editStore: PropTypes.object
 }
 EditorSelector.defaultProps = {

package/src/editor/editor.js

@@ -49,7 +49,8 @@ class Editor extends React.Component {
       showNewDate,
       mockData,
       mergeClassificationAndLabel,
-      customTableConfigs
+      customTableConfigs,
+      fontFamilies
     } = this.props
 
     return (
@@ -85,7 +86,7 @@ class Editor extends React.Component {
               <span>{':' + i18next.t('商户配送单')}</span>
             </>
             <Gap height='10px' />
-            <EditorSelect showFontFamily />
+            <EditorSelect showFontFamily fontFamilies={fontFamilies} />
             <Gap height='5px' />
             <SpecialField addFields={addFields} mockData={mockData} />
             <SpecialOtherField addFields={addFields} mockData={mockData} />
@@ -125,7 +126,10 @@ Editor.propTypes = {
   addFields: PropTypes.object.isRequired,
   showNewDate: PropTypes.bool,
   mergeClassificationAndLabel: PropTypes.bool,
-  customTableConfigs: PropTypes.array
+  customTableConfigs: PropTypes.array,
+  // 自定义打印字体列表（扩展接口）：[{ value: 'KaiTi, Kaiti SC, 楷体', text: '楷体' }]，
+  // 不传用内置 fontFamilyList；value 建议「Windows 名, macOS 名, 中文名」三段 fallback
+  fontFamilies: PropTypes.array
 }
 
 Editor.defaultProps = {

package/src/editor/editor_menu_config.js

@@ -49,7 +49,8 @@ class Editor extends React.Component {
       mockData,
       mergeClassificationAndLabel,
       customTableConfigs,
-      menuConfig
+      menuConfig,
+      fontFamilies
     } = this.props
     return (
       <div className='gm-printer-edit'>
@@ -84,7 +85,7 @@ class Editor extends React.Component {
               <span>{':' + i18next.t('商户配送单')}</span>
             </>
             <Gap height='10px' />
-            <EditorSelect showFontFamily />
+            <EditorSelect showFontFamily fontFamilies={fontFamilies} />
             <Gap height='5px' />
             <SpecialField addFields={addFields} mockData={mockData} />
             <SpecialOtherField addFields={addFields} mockData={mockData} />
@@ -126,6 +127,8 @@ Editor.propTypes = {
   showNewDate: PropTypes.bool,
   mergeClassificationAndLabel: PropTypes.bool,
   customTableConfigs: PropTypes.array,
+  // 自定义打印字体列表（扩展接口），透传给 EditorSelect；不传用内置 fontFamilyList
+  fontFamilies: PropTypes.array,
   menuConfig: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.string),
     PropTypes.object