form-driver 0.1.0

package/src/ui/editor/complex/AForm.tsx

@@ -0,0 +1,340 @@
+
+import React from "react";
+import _ from "lodash";
+import "./AForm.less";
+import { Viewer, ViewerState } from '../../BaseViewer';
+import { M3UISpec, MFieldSchema, MProp } from '../../../framework/Schema';
+import { HideMap, MUtil } from "../../../framework/MUtil";
+import { MFieldViewer } from '../../../framework/MFieldViewer';
+import { Segment } from '../../widget/Segment';
+import { MORPH } from '../../../framework/Assembly';
+import { SegmentEditSwitch } from "../../widget/SegmentEditSwitch";
+import { Modal, Popover } from "antd";
+import { QuestionCircleTwoTone } from "@ant-design/icons";
+import { MContext } from "../../../framework/MContext";
+import { Collapsible } from "../../widget/Collapsible";
+
+function ItemLabel(props: { uispec?: M3UISpec, schema: MFieldSchema, labelWidth?: number, morph: MORPH }): JSX.Element {
+  // label自动加冒号功能 uispec.comma
+  let label = props.schema.label;
+  if (props.uispec?.comma) {
+    // @ts-ignore trimEnd支持正则的，但lodash的声明写得不对
+    label = _.trimEnd(label, new RegExp(":：" + props.uispec.comma)) + props.uispec.comma;
+  }
+
+  // 必填label加星号
+  const star = (props.schema.required && props.morph === "editor") ? <span style={{ color: "red" }}>*</span> : undefined;
+
+  if (!props.schema.label) {
+    return <></>;
+  }
+
+  let popoverDesc = undefined;
+  if (props.schema.popoverDesc) {
+    popoverDesc = <Popover key=":popoverDesc" content={props.schema.popoverDesc}>
+      <QuestionCircleTwoTone style={{ marginLeft: 5 }} />
+    </Popover>
+  }
+
+  if (props.labelWidth) {
+    return <span className="ItemLabel" style={{ display: "inline-block", width: props.labelWidth + 20 }}>{star}{label}{popoverDesc}</span>;
+  } else {
+    return <div className="ItemLabel" key={"字段标题:" + props.schema.name}>{star}{label}{popoverDesc}</div>;
+  }
+}
+
+interface State extends ViewerState {
+  /** 编辑中的分组label，以及编辑前的数据 */
+  editing: { [label: string]: any };
+
+  /** 保存中的分组label */
+  saving: { [segmentLabel: string]: boolean };
+
+  // /** 上一个状态时的hideMap */
+  // shouldAnimation: {[n:string]: boolean};
+}
+
+// /**
+//  * 判断是否应该使用动画。
+//  * 
+//  * 当相邻的题，状态变化不同向（都是隐藏，或者都是出现）时，不能使用折叠动画，否则会出现抖动
+//  * 这个函数判断所有的字段，是否需要折叠动画
+//  */
+// function shouldAnimation(prevHideMap:HideMap, hideMap:HideMap, fields: MFieldSchema[]): {[n:string]: boolean}{
+//   // 变化方向：隐藏->展现=1  展现->隐藏=-1  状态不变=0
+//   const direction = fields.map(f=> {
+//     const prev = ! (prevHideMap?.[f.name]);
+//     const now = ! (hideMap[f.name]);
+//     if(!prev && now) {
+//       return 1;
+//     } else if(prev && !now) {
+//       return -1;
+//     } else {
+//       return 0;
+//     }
+//   })
+  
+//   // 监视哨
+//   direction[-1] = 0;
+//   direction[fields.length] = 0;
+
+//   // 计算动画是否会抖动
+//   let anim = {};
+//   fields.map((f,idx)=>{
+//     if(direction[idx] + direction[idx - 1] != 0 && direction[idx] + direction[idx + 1] != 0){
+//       anim[f.name] = true;
+//     } else {
+//       anim[f.name] = false;
+//     }
+//   });
+//   console.log(anim)
+//   return anim;
+// }
+export class AForm extends Viewer<State> {
+  constructor(p: MProp) {
+    super(p);
+    this.state = { 
+      //shouldAnimation:{}, 
+      editing: {}, saving: {}, ctrlVersion: 1, noValidate: true };
+  }
+
+  /**
+   * 表单项，包括label和viewer
+   * @param hideField 
+   * @param hideMap 
+   * @param f 
+   * @param objectFields 
+   * @param uispec 
+   * @param morph 
+   * @param labelWidth 
+   * @param invalidLayoutMsg 
+   * @param column
+   * @returns 
+   */
+  private formItem(hideField: boolean, hideMap:HideMap, f: MFieldSchema, objectFields: MFieldSchema[], uispec, morph: MORPH,
+    labelWidth: number, invalidLayoutMsg: string, column: number): JSX.Element {
+
+    const path = MUtil.jsonPath(this.props.path, f.name)
+    const wrapperProp = {
+      style: {
+        display: undefined,
+        marginBottom: 15,
+        content: f.name // debug用
+      },
+      open: !hideField,
+      //ms: this.state.shouldAnimation?.[f.name] ? 500 : null,
+      ms: 500,
+      key: f.name,
+      id: path,
+      name: f.name
+    };
+    if (column > 1) {
+      // 计算每项的宽度（保留2位有效数字）
+      Object.assign(wrapperProp.style, {
+        width: Math.floor(100 / column * 100) / 100 + '%'
+      })
+    }
+
+    const fieldViewer = <MFieldViewer morph={morph ?? "readable"} key={path} schema={f} database={this.props.database} path={path} afterChange={(p, v: any, blur) => {
+      this.props.afterChange?.(path, v, blur);
+
+      const newHideMap = MUtil.hideMap(MUtil.get(this.props.database, this.props.path), objectFields, uispec);
+      if (!_.isEqual(newHideMap, hideMap)) { // 如果有字段依赖导致表单项展示与否变化
+        //this.setState({shouldAnimation: shouldAnimation(hideMap, newHideMap, objectFields)});
+        this.setState({});
+      }
+    }} parent={this.props.schema} forceValid={this.props.forceValid} style={{ width: "100%" }} />
+
+    let ele;
+    if(uispec.layout === "vertical") { // label在字段上面的分段布局
+      ele = <Collapsible {...wrapperProp}>
+        <ItemLabel uispec={uispec} schema={f} morph={morph}/>
+        {fieldViewer}
+      </Collapsible>
+    } else if(uispec.layout === "horizontal") { // label在字段左边的分段布局 TODO
+      wrapperProp.style.display = "flex";
+      ele = <Collapsible {...wrapperProp}>
+        <ItemLabel uispec={uispec} schema={f} labelWidth={labelWidth} morph={morph}/>
+        <span style={{flex: 1}}>{fieldViewer}</span>
+      </Collapsible>
+    } else {
+      ele = MUtil.error(invalidLayoutMsg);
+    }
+
+    return <MContext.Consumer key={f.name}>
+      {ctx => {
+        if (ctx.rootProps.formItemWrapper) {
+          return ctx.rootProps.formItemWrapper(ele, f)
+        } else {
+          return ele
+        }
+      }}
+    </MContext.Consumer>
+  }
+
+  /**
+   * 分段表单
+   * @param objectFields 
+   * @param uispec 
+   */
+  private _segmentForm(objectFields: MFieldSchema[], uispec: M3UISpec, column: number) {
+    const objectFieldMap = _.chain(objectFields).keyBy('name').value();
+    const hideMap = MUtil.hideMap(MUtil.get(this.props.database, this.props.path), objectFields, uispec);
+    if (!uispec.segments) {
+      return MUtil.error("分段未定义");
+    }
+
+    // 先计算一遍label的宽度，即使有隐藏的字段，确保展示出来时也不会因为label太长布局变化。
+    let labelWidth = 0;
+    if (uispec.layout === "horizontal") {
+      for (let segment of uispec.segments) {
+        for (let fieldName of segment.fields) {
+          let f = objectFieldMap[fieldName];
+          if (!f) {
+            return MUtil.error(`segments中的${fieldName}未定义`);
+          }
+          let label = f.label;
+          labelWidth = Math.max(labelWidth, MUtil.antdTextWidth(label ?? ""))
+        }
+      }
+    }
+
+    // 然后再把表单表格画出来
+    const segments = [];
+    let fno = 0;
+    for (let segment of uispec.segments) {
+      const segHide = hideMap["segment:" + segment.label];
+      const items = [];
+      const segmentFieldNames: string[] = [];
+
+      for (let fieldName of segment.fields) {
+        let f = objectFieldMap[fieldName];
+        if (!f) {
+          items.push(MUtil.error(`字段不存在：${fieldName}`));
+          continue;
+        }
+
+        const hideField = segHide || hideMap[f.name];
+
+        // segment里的字段名都记下来
+        segmentFieldNames.push(fieldName);
+
+        items.push(this.formItem(hideField, hideMap, f, objectFields, uispec,
+          ((this.props.morph === "editor" || this.state.editing[segment.label]) ? "editor" : "readable"),
+          labelWidth, `${segment.label}的layout值无效：${uispec.layout}`, column))
+      }
+
+      let topRight: React.ReactNode = undefined;
+      if (segment.onSubmit) {
+        const onSubmit = segment.onSubmit;
+        if (this.state.editing[segment.label]) {
+          const saving = this.state.saving[segment.label];
+          const cancel = () => {
+            const prev = this.state.editing[segment.label];
+            _.assign(this.props.database, prev);
+            delete this.state.editing[segment.label];
+            this.setState({});
+          }
+          topRight = <SegmentEditSwitch state={saving ? "saving" : "editor"} onClick={(e) => {
+            if (e) {
+              this.state.saving[segment.label] = true; // 先展示loading动画
+              onSubmit(segment, _.pick(this.props.database, segmentFieldNames), () => {
+                // 保存完了以后移除loading状态，并且改回readable模式
+                this.setState({
+                  saving: _.omit(this.state.saving, segment.label),
+                  editing: _.omit(this.state.saving, segment.label),
+                });
+              })
+            } else {
+              const prev = this.state.editing[segment.label];
+              const current = _.pick(this.props.database, segmentFieldNames);
+              if (!_.isEqual(prev, current)) {
+                Modal.confirm({
+                  content: '会丢失刚才的修改，确定吗？',
+                  okText: "刚才的修改不要了",
+                  cancelText: "继续编辑",
+                  onOk: cancel
+                });
+              } else {
+                cancel();
+              }
+            }
+          }} />
+        } else {
+          topRight = <SegmentEditSwitch state={"readable"} onClick={(e) => {
+            this.setState({
+              editing: _.set(this.state.editing, segment.label, _.pick(this.props.database, segmentFieldNames))
+            });
+          }} />
+        }
+      }
+
+        segments.push(<Segment column={column} style={{ ...segment.style, display: segHide ? "none" : undefined }} key={fno++} mainTitle={segment.label} labelName={"segment_" + fno} topRight={topRight}>
+          {items}
+        </Segment>);
+    }
+    return <div className="AForm">{segments}</div>
+  }
+
+  /**
+   * 不分段的表单
+   * @param objectFields 
+   * @param uispec 
+   * @param column 
+   */
+  private _flowForm(objectFields: MFieldSchema[], uispec: M3UISpec, column: number) {
+    const hideMap = MUtil.hideMap(MUtil.get(this.props.database, this.props.path), objectFields, uispec);
+
+    // 先计算一遍label的宽度，即使有隐藏的字段，确保展示出来时也不会因为label太长布局变化。
+    // table防止折行是保底的
+    let labelWidth = 0;
+    if (uispec.layout === "horizontal") {
+      for (let f of objectFields) {
+        let label = f.label;
+        labelWidth = Math.max(labelWidth, MUtil.antdTextWidth(label ?? ""))
+      }
+    }
+
+    // 然后再把表单表格画出来
+    const items = [];
+    for (let f of objectFields) {
+      items.push(this.formItem(hideMap[f.name], hideMap, f, objectFields, uispec,
+        this.props.morph, labelWidth, `layout值无效：${uispec.layout}`, column
+      ))
+    }
+    if (column > 1) {
+      return <div className="AForm" style={{
+        display: 'flex',
+        flexFlow: 'row wrap',
+        alignContent: 'flex-start',
+      }}>
+        {items}
+      </div>
+    } else {
+      return <div className="AForm">{items}</div>
+    }
+  }
+
+  element() {
+    const objectFields = this.props.schema.objectFields;
+    if (!objectFields) {
+      return MUtil.error(`表单是空的`, this.props.schema);
+    }
+
+    const uispec = this.props.schema.uispec ?? { type: "flowForm", layout: "vertical" };
+    const column = this.props.schema.column ?? 1;
+    switch (this.props.schema.uispec?.type) {
+      case "segmentForm": // 分段的表单
+        if (!uispec) {
+          return MUtil.error(`uispec未定义`);
+        }
+        return this._segmentForm(objectFields, uispec, column);
+      case "flowForm": // 不分段的表单
+        return this._flowForm(objectFields, uispec, column);
+      case null:
+      case undefined:
+      default:
+        return this._flowForm(objectFields, uispec, column);
+    }
+  }
+}

package/src/ui/editor/complex/AIntDiff.tsx

@@ -0,0 +1,77 @@
+
+import React from "react";
+import { Radio } from 'antd';
+import { BaseViewer } from "../../BaseViewer";
+import { MUtil } from "../../../framework/MUtil";
+import { UnderlineInputBox } from '../../widget/UnderlineInputBox';
+
+/**
+ * 类似这样分正负的数字：
+ * 
+ * 与去年同期(2019 年 1 月初-6 月底)相比，您的收入
+ * (1)增长了(具体数字:约___万元) (2)下降了(具体数字:约___万元) (3) 基本没有变化
+ */
+export class AIntDiff extends BaseViewer {
+  _posInputBoxValue?: number;
+  _negInputBoxValue?: number;
+  _radio?: number;
+
+  element() {
+    const value = super.getValue();
+    const sign = this._radio ?? MUtil.sign(value);
+    const radioStyle = {
+      display: 'block',
+      marginBottom: 3
+    };
+
+    return <Radio.Group key={this.state.ctrlVersion} defaultValue={sign} onChange={(v)=>{
+      const sign = v.target.value;
+      if(sign < 0){
+        super.changeValue(this._negInputBoxValue);
+      } else if(sign > 0){
+        super.changeValue(this._posInputBoxValue);
+      } else {
+        super.changeValue(0);
+      }
+      this._radio = sign;
+      }}>
+      <Radio style={radioStyle} key={1} value={1}> 
+        {this.props.schema.intDiff?.incLabel}
+        <UnderlineInputBox pattern="\d*" type="number" style={{width:"5em"}} min={1} defaultValue={this._posInputBoxValue || undefined } onChange={(v)=> {
+          const nv = parseInt(v.target.value);
+          if(nv === 0){
+            this._posInputBoxValue = undefined;
+            super.changeValueEx(nv, true, false)
+            this._radio = 0;
+          } else {
+            this._posInputBoxValue = nv;
+            super.changeValue(nv)
+          }
+        }} disabled={!sign || sign <= 0} onBlur={()=>{
+          super.changeValue(value)
+        }}/>
+        {this.props.schema.intDiff?.incLabelPostfix}
+      </Radio>
+      <Radio style={radioStyle} key={-1} value={-1}>
+        {this.props.schema.intDiff?.decLabel}
+        <UnderlineInputBox pattern="\d*" type="number" style={{width:"5em"}} size={10} min={1} defaultValue={this._negInputBoxValue || undefined} onChange={(v)=> {
+          const nv = parseInt(v.target.value);
+          if(nv === 0){
+            this._negInputBoxValue = undefined;
+            super.changeValueEx(nv, true, false)
+            this._radio = 0;
+          } else {
+            this._negInputBoxValue = nv;
+            super.changeValue(-nv)
+          }
+        }} disabled={!sign || sign >= 0} onBlur={()=>{
+          super.changeValue(value)
+        }}/>
+        {this.props.schema.intDiff?.decLabelPostfix}
+      </Radio>
+      <Radio style={radioStyle} key={0} value={0} onClick={()=>super.changeValue(0)}>
+        {this.props.schema.intDiff?.keep}
+      </Radio>
+    </Radio.Group>
+  }
+}

package/src/ui/editor/complex/AMatrix.less

@@ -0,0 +1,18 @@
+
+.AMatrixOpenTd {
+  word-break: keep-all;
+  white-space: nowrap;
+}
+
+
+.AMatrix_DropdownList_sameLine {
+  display: flex;
+}
+
+.AMatrix_DropdownList_sameLine div {
+  flex: 1
+}
+
+.AMatrix_DropdownList_wrap {
+
+}

package/src/ui/editor/complex/AMatrix.tsx

@@ -0,0 +1,242 @@
+
+import { Radio } from "antd";
+import React, { CSSProperties } from "react";
+import "./AMatrix.less";
+import _ from "lodash";
+import { BaseViewer } from "../../BaseViewer";
+import { CompactArray, MUtil } from "../../../framework/MUtil";
+import { UnderlineInputBox } from "../../widget/UnderlineInputBox";
+import { SelectBox } from "../../widget/SelectBox";
+import { MEnumField } from "../../../framework/Schema";
+
+/**
+ * 单选矩阵.
+ * 暂不支持字符串以外的值。
+ * 示例：{label:"3.3 您是否愿意与农村人",name:"countryman", type:"matrix", editor:"ARadioMatrix", matrix: {x:"很愿意 比较愿意 不太愿意 很不愿意 不好说", y:"聊天 一起工作 成为邻居 成为亲密朋友 结成亲家"}},
+ * 数据: 
+ *  {"聊天":["很愿意", "比较愿意"], "一起工作":"比较愿意"}
+ */
+export class AMatrix extends BaseViewer {
+  private _inputBoxValue?: string;
+  /**
+   * 当某个值被选中时，将其设置到数据上。
+   * 例如:
+   *  let data = {}
+   *  _setDataForKey(data, "foo", "bar", ["foo"])
+   *  // data会变成 {foo:bar}
+   * 
+   *  let data = {"foo": "bar1"}
+   *  _setDataForKey(data, "foo", "bar2", ["foo"])
+   *  // data会变成 {foo:["bar1", "bar2"]}
+   * 
+   *  let data = {"foo": "bar1"}
+   *  _setDataForKey(data, "foo", "bar2", ["foo"])
+   *  // data会变成 {foo:["bar1", "bar2"]}
+   * 
+   *  let data = {"foo": "bar1", "open":"before"}
+   *  _setDataForKey(data, nil, "bar2", ["foo"])
+   *  // 假如此时文本框内是foo3
+   *  // data会变成 {foo:"bar1", foo3:"bar2"}
+   * 
+   * @param data 这个控件的数据，这个函数会讲key/value存入data，例如：{"聊天":["很愿意", "比较愿意"], "一起工作":"比较愿意", "开放-用户填的":"比较愿意"}
+   * @param key 字符串表示  nil表示设置开放选项，此时key不固定，以_inputBoxValue为准
+   * @param value 
+   * @param yyClosed 非开放选项的值，传进来免得再计算
+   */
+  private _setDataForKey(data:any, key:string, value:string, yyClosed: (string|boolean|number)[]){
+    const maxX = this.props.schema.matrix?.maxX ?? 1;
+    const maxY = this.props.schema.matrix?.maxY ?? Number.MAX_VALUE;
+
+    // 预先处理好开放选项
+    let prevValues;
+    let actualKey;
+    if(!key) { // 设置开放选项
+      // 先找到原来的开放选项并删除掉，因为key可能会变的
+      const prevOpenKey = _openKey(data, yyClosed);
+      if(!_.isNil(prevOpenKey)) {
+        prevValues = data[prevOpenKey];
+        delete data[prevOpenKey];
+      }
+
+      actualKey = this._inputBoxValue ?? ""; 
+      if(prevValues) {
+        data[actualKey] = prevValues;
+      }
+    } else { // 设置备选项
+      actualKey = key; 
+      prevValues = data[key];
+    }
+
+    // 再考虑maxX的情况下，设置数据
+    switch(typeof prevValues) {
+      case "undefined":
+        data[actualKey] = value;
+        break;
+      case "string"://"..."
+        if(maxX === 1) {
+          data[actualKey] = value;
+        } else {
+          data[actualKey] = [prevValues, value];
+        }
+        break;
+      case "object":// ["...","..."]
+        if(prevValues.length >= maxX) {
+          data[actualKey].shift(); 
+        }
+        data[actualKey] = [...prevValues, value];
+        break;
+    }
+
+    // 再考虑maxY，如果超了，要去掉一个勾
+    let n = 0;
+    for(let key in data) {
+      const row = data[key];
+      if(row === value || row?.includes(value)){
+        n ++;
+        if(n >= maxY && key !== actualKey){
+          if(data[key] === value){
+            delete data[key];
+          } else {
+            data[key] = MUtil.arrayRemove(data[key], value);
+          }
+          n --;
+        }
+      }
+    }
+  }
+
+  /**
+   * 渲染成矩阵
+   */
+  _renderAsMatrix(){
+    let data = super.getValue() ?? {};
+    
+    // const minX = this.props.schema.matrix?.minX ?? 1;
+    // const minY = this.props.schema.matrix?.minY ?? 1;
+    
+    const style = {};
+    const xx = MUtil.standardFields(this.props.schema.matrix?.x);
+    const yy = MUtil.standardFields(this.props.schema.matrix?.y);
+    const yyClosed = yy.map(e=>e.value);
+
+    if(this.props.schema.matrix?.open) {
+      yy.push({value:"", label:this.props.schema.matrix.open.label});
+    }
+
+    let trs:JSX.Element[] = [];
+    let titleRow = [<td key={"空的格子"}></td>];
+    for(let x of xx) {
+      titleRow.push(<td key={x.value?.toString()} style={style}>{x.label}</td>);
+    }
+    trs.push(<tr key={"标题"}>{titleRow}</tr>);
+
+    const openKey = _openKey(data, yyClosed);
+    for(let y of yy) {
+      let dataRow:JSX.Element[] = [];
+      let key: string|undefined = y.value?.toString();
+      
+      if(y.value) { // 候选项
+        dataRow.push(<td key={y.value + ":label"}>{y.label}</td>);
+      } else { // 开放选项
+        dataRow.push(<td key={"open:label"} className="AMatrixOpenTd">
+          {y.label}
+          <UnderlineInputBox defaultValue={openKey} disabled={_.isNil(openKey)} onChange={(v)=>{
+            const openKeyOnClick = _openKey(data, yyClosed);
+            const str = v.target.value;
+            const matchEnum = yy.find(e=>e.value === str);
+            if(matchEnum){ // 不能让用户输入了某个枚举值
+              alert("请不要直接输入，您可以勾选 " + (matchEnum.label ?? matchEnum.value)); // TODO 用校验解决此问题，chrome解析不了反撇号
+            } else {
+              this._inputBoxValue = str;
+              super.changeValue(this._inputBoxValue);
+              if(!_.isNil(openKeyOnClick)) {
+                const prev = data[openKeyOnClick];
+                delete data[openKeyOnClick];
+                data[this._inputBoxValue] = prev;
+              }
+              super.changeValue(data);
+            }
+          }}/>
+        </td>);
+
+        // 开放选项的key不固定
+        key = openKey;
+      }
+
+      for(let x of xx) {
+        const checked = CompactArray.indexOf(MUtil.get(data, key), x.value) >= 0; // _.isNil(key) ? false : data[key] === x.value || data[key]?.includes(x.value);
+        dataRow.push(<td key={x.value?.toString()} style={style}><Radio key={x.value?.toString()} checked={checked} onChange={(vv)=>{
+          if(vv.target.checked) {
+            this._setDataForKey(data, y.value?.toString(), x.value?.toString(), yyClosed);
+          }
+          super.changeValue(data);
+        }}/></td>);
+      }
+      trs.push(<tr key={y.value?.toString()}>{dataRow}</tr>);
+    }
+
+    return <table className="M3_table" style={{width:"100%", textAlign:"center"}}><tbody>{trs}</tbody></table>;
+  }
+
+  /**
+   * 渲染成一组下拉框
+   */
+  _renderAsDropdownList(){
+    let data = super.getValue() ?? {};
+    const xx = MUtil.standardFields(this.props.schema.matrix?.x);
+    const yy = MUtil.standardFields(this.props.schema.matrix?.y);
+
+    const getLabelLength = (e?:MEnumField) => e ? (e.label ?? e.value?.toString()).length : 0;
+    const maxXLen = _.maxBy(xx, getLabelLength);
+    const maxYLen = _.maxBy(yy, getLabelLength);
+
+    const sameLine = (getLabelLength(maxXLen) + getLabelLength(maxYLen)) < 19;  // 超过19个字符就要折行
+    const toOption = (x:any) => {return {label: x.label??x.value, value: x.value}};
+
+    let jsx = [];
+
+    if(this.props.schema.matrix?.minX === 1) { // 每行只能选一个，可以渲染成一组下拉框
+      const options = xx.map(toOption);
+      for(let y of yy) {
+        jsx.push(
+          <div key={y.value?.toString()} className={sameLine ? "AMatrix_DropdownList_sameLine" : "AMatrix_DropdownList_wrap"}>
+            <span key="label" style={{width: MUtil.antdTextWidth(maxYLen?.label ?? maxXLen?.value?.toString())}}>{y.label ?? y.value}</span>
+            <SelectBox key="selector" data={data[y.value?.toString()]} options={options} onChange={(v)=>{
+              data[y.value?.toString()] = v;
+              super.changeValue(data);
+            }}/>
+          </div> 
+        )
+      }
+    } else if(this.props.schema.matrix?.minY ===1){
+      const options = yy.map(toOption);
+      const x2y:any = _.invert(data);
+      for(let x of xx) {
+        jsx.push(
+          <div key={x.value?.toString()} className={sameLine ? "AMatrix_DropdownList_sameLine" : "AMatrix_DropdownList_wrap"}>
+            <span key="label" style={{width: MUtil.antdTextWidth(maxXLen?.label)}}>{x.label ?? x.value}</span>
+            <SelectBox key="selector" data={x2y[x.value?.toString()]} options={options} onChange={(v)=>{
+              x2y[x.value?.toString()] = v;
+              super.changeValue(_.invert(x2y));
+            }}/>
+          </div> 
+        )
+      }
+    }
+    return jsx;
+  }
+
+  element() {
+    let screenAdaption = this.props.schema.screenAdaption ?? (MUtil.phoneLike() ? "phone" : "big");
+
+    if(screenAdaption === "phone"){ // 手机空间不足，只能各种想办法转换选项形式
+      return this._renderAsDropdownList();
+    } else {
+      return this._renderAsMatrix();
+    }
+  }
+}
+
+function _openKey(data:any, yyClosed: (string|boolean|number)[]){
+  return _.first(_.difference(_.keys(data), yyClosed))?.toString();
+}

package/src/ui/editor/complex/ATable.less

@@ -0,0 +1,4 @@
+
+.ATable .ant-table {
+	background: none;
+}