style: 调整公式部分样式

packages/amis-formula/src/parser.ts

@@ -62,7 +62,7 @@ export function parse(input: string, options?: ParserOptions): ASTNode {
 
   function fatal() {
     throw TypeError(
-      `Unexpected token ${token!.value} in ${token!.start.line}:${
+      `Unexpected token ${token!.value || token.type} in ${token!.start.line}:${
         token!.start.column
       }`
     );

packages/amis-ui/scss/components/_condition-builder.scss

@@ -439,6 +439,7 @@
   display: flex;
   flex: 1;
   min-width: 0;
+  flex-wrap: wrap;
 
   > * {
     flex-shrink: 0;
@@ -451,7 +452,7 @@
   vertical-align: middle;
   margin: px2rem(3px);
   flex: 1;
-  min-width: 0;
+  min-width: px2rem(100px);
 }
 
 .#{$ns}CBFormula {

packages/amis-ui/src/components/CodeMirror.tsx

@@ -4,6 +4,7 @@ import type CodeMirror from 'codemirror';
 import {autobind, changedEffect} from 'amis-core';
 import {resizeSensor} from 'amis-core';
 
+import 'codemirror/theme/idea.css';
 import 'codemirror/theme/base16-dark.css';
 // import 'codemirror/theme/base16-light.css';
 

packages/amis-ui/src/components/formula/CodeEditor.tsx

@@ -97,7 +97,7 @@ function CodeEditor(props: CodeEditorProps, ref: any) {
       (editorTheme ??
         ((defaultTheme || '').includes('dark') ? 'dark' : 'light')) === 'dark'
         ? 'base16-dark'
-        : 'default';
+        : 'idea';
     let options: any = {
       autoFocus,
       indentUnit: 2,

packages/amis-ui/src/components/formula/Input.tsx

@@ -15,7 +15,7 @@ import {
 
 import {FormulaEditor} from './Editor';
 import ResultBox from '../ResultBox';
-import Select from '../Select';
+import {SelectWithRemoteOptions as Select} from '../Select';
 import NumberInput from '../NumberInput';
 import DatePicker from '../DatePicker';
 import Tag from '../Tag';
@@ -91,7 +91,7 @@ const FormulaInput = (props: FormulaInputProps, ref: any) => {
   } = props;
   const schemaType = inputSettings.type;
   /** 自上层共享的属性 */
-  const sharedProps = pick(props, ['disabled', 'clearable']);
+  const sharedProps = pick(props, ['disabled', 'clearable', 'data']);
   const pipInValue = useCallback(
     (value?: any) => {
       /** 数据来源可能是从 query中下发的（CRUD查询表头），导致数字或者布尔值被转为 string 格式，这里预处理一下 */
@@ -118,7 +118,7 @@ const FormulaInput = (props: FormulaInputProps, ref: any) => {
         result = origin.value;
       } else if (schemaType === 'select') {
         const {
-          joinValues,
+          joinValues = true,
           extractValue,
           delimiter,
           multiple,
@@ -223,7 +223,7 @@ const FormulaInput = (props: FormulaInputProps, ref: any) => {
   } else if (!isExpr && (schemaType === 'select' || schemaType === 'boolean')) {
     return (
       <Select
-        {...sharedProps}
+        {...(sharedProps as any)}
         className={cx(className, `FormulaPicker-input-${schemaType}`)}
         borderMode="none"
         multiple={schemaType === 'boolean' ? false : inputSettings.multiple}
@@ -241,6 +241,7 @@ const FormulaInput = (props: FormulaInputProps, ref: any) => {
               ]
             : inputSettings.options ?? []
         }
+        source={inputSettings.source}
         value={pipInValue(value)}
         renderValueLabel={option => {
           const label = option.label?.toString() ?? '';

packages/amis-ui/src/components/formula/Picker.tsx

@@ -281,7 +281,13 @@ export class FormulaPicker extends React.Component<
 
       return editorValue;
     } else {
-      return value ? (mixedMode ? `\`${value}\`` : value) : '';
+      return value
+        ? mixedMode
+          ? isExpression(value)
+            ? `\`${value.replace(/`/g, '\\`')}\``
+            : JSON.stringify(value)
+          : value
+        : '';
     }
   }
 
@@ -330,6 +336,14 @@ export class FormulaPicker extends React.Component<
     const {translate: __, inputSettings} = this.props;
     const {editorValue} = this.state;
 
+    let ast: any;
+    try {
+      ast = parse(editorValue, {evalMode: true, allowFilter: false});
+    } catch (error) {
+      this.setState({isError: error?.message ?? true});
+      return;
+    }
+
     if (
       inputSettings?.type &&
       ['boolean', 'number'].includes(inputSettings?.type)
@@ -337,24 +351,17 @@ export class FormulaPicker extends React.Component<
       let result = editorValue;
       // const schemaType = inputSettings?.type;
 
-      try {
+      if (ast.type === 'literal' || ast.type === 'string') {
-        const ast = parse(editorValue, {evalMode: true, allowFilter: false});
+        result = ast.value ?? '';
-
-        if (ast.type === 'literal' || ast.type === 'string') {
-          result = ast.value ?? '';
-        }
-      } catch (error) {
-        this.setState({isError: error?.message ?? true});
-        return;
       }
 
       this.setState({isError: false});
       return this.confirm(result);
     }
-    return this.confirm(editorValue);
+    return this.confirm(editorValue, ast);
   }
 
-  confirm(value: any) {
+  confirm(value: any, ast?: any) {
     const {mixedMode} = this.props;
     const validate = this.validate(value);
 
@@ -363,10 +370,12 @@ export class FormulaPicker extends React.Component<
 
       if (mixedMode && typeof value === 'string') {
         result =
-          !value.includes('$') &&
+          ast?.type === 'string'
-          value[0] === '`' &&
+            ? ast.value
-          value[value.length - 1] === '`'
+            : ast?.type === 'template' &&
-            ? value.substring(1, value.length - 1)
+              ast.body.length === 1 &&
+              ast.body[0].type === 'template_raw'
+            ? ast.body[0].value
             : `\${${value}}`;
       }
 
@@ -518,6 +527,7 @@ export class FormulaPicker extends React.Component<
                 className={cx('FormulaPicker-action', 'w-full')}
                 level={level}
                 size={btnSize}
+                active={!!value}
                 onClick={this.handleClick}
               >
                 {iconElement ? (

packages/amis-ui/src/components/formula/plugin.ts

@@ -213,11 +213,18 @@ export class FormulaPlugin {
     from: CodeMirror.Position,
     to: CodeMirror.Position,
     label: string,
-    className = 'cm-func'
+    className = 'cm-func',
+    rawString?: string
   ) {
     const text = document.createElement('span');
     text.className = className;
     text.innerText = label;
+
+    if (rawString) {
+      text.setAttribute('data-tooltip', rawString);
+      text.setAttribute('data-position', 'bottom');
+    }
+
     return this.editor.markText(from, to, {
       atomic: true,
       replacedWith: text
@@ -290,7 +297,8 @@ export class FormulaPlugin {
                   ch: host.end.column - 1
                 },
                 variable.label,
-                'cm-field'
+                'cm-field',
+                host.name
               );
 
               // 再标记子对象
@@ -318,7 +326,8 @@ export class FormulaPlugin {
                         ch: item.end.column - 1
                       },
                       variable.label,
-                      'cm-field'
+                      'cm-field',
+                      item.name
                     );
                     path += item.name + '.';
                     vars = variable.children || [];
@@ -344,7 +353,8 @@ export class FormulaPlugin {
                 ch: ast.end.column - 1
               },
               variable.label,
-              'cm-field'
+              'cm-field',
+              ast.name
             );
           }
           return false;

packages/amis/__tests__/renderers/Form/__snapshots__/inputFormula.test.tsx.snap

@@ -197,7 +197,7 @@ exports[`Renderer:input-formula button 1`] = `
                     class="cxd-FormulaPicker cxd-FormulaPicker--text cxd-Form-control"
                   >
                     <button
-                      class="cxd-Button cxd-Button--default cxd-Button--size-default cxd-FormulaPicker-action w-full"
+                      class="cxd-Button cxd-Button--default cxd-Button--size-default is-active cxd-FormulaPicker-action w-full"
                       type="button"
                     >
                       <span
@@ -438,7 +438,7 @@ exports[`Renderer:input-formula input-group 1`] = `
                         style="position: relative;"
                       >
                         <div
-                          class="CodeMirror cm-s-default"
+                          class="CodeMirror cm-s-idea"
                           translate="no"
                         >
                           <div