SettingForm 优化

packages/designer/src/setters/event-setter.tsx

@@ -8,6 +8,7 @@ import { ExpressionModal, getWrappedExpressionCode } from './expression-setter';
 
 enum EventAction {
   NoAction = 'noAction',
+  ConsoleLog = 'consoleLog',
   BindExpression = 'bindExpression',
   OpenModal = 'openModal',
   CloseModal = 'closeModal',
@@ -24,6 +25,7 @@ const wrapperStyle = css`
 
 const options = [
   { label: '无动作', value: EventAction.NoAction },
+  { label: '打印事件', value: EventAction.ConsoleLog },
   { label: '绑定 JS 表达式', value: EventAction.BindExpression },
   { label: '打开页面', value: EventAction.NavigateTo },
   { label: '打开弹窗', value: EventAction.OpenModal },
@@ -36,7 +38,7 @@ export type EventSetterProps = FormItemComponentProps<string>;
  * 事件监听函数绑定器
  */
 export function EventSetter(props: EventSetterProps) {
-  const { value, onChange, modalTitle } = props;
+  const { value, onChange, modalTitle, toggleIsVariable } = props;
   const [type, setType] = useState<EventAction>(); // 事件类型
   const [temp, setTemp] = useState(''); // 二级暂存值
   const [expModalVisible, setExpModalVisible] = useState(false); // 弹窗是否显示
@@ -50,6 +52,8 @@ export function EventSetter(props: EventSetterProps) {
       const ret = getWrappedExpressionCode(nextValue);
       if (ret !== value) {
         onChange(ret, ...args);
+        // 默认切换至源码模式
+        toggleIsVariable();
       }
     },
     [onChange, value],
@@ -63,6 +67,9 @@ export function EventSetter(props: EventSetterProps) {
       case EventAction.BindExpression:
         setExpModalVisible(true);
         break;
+      case EventAction.ConsoleLog:
+        handleChange('(...args) => console.log(...args)');
+        break;
       case EventAction.NoAction:
         handleChange(undefined);
         break;

packages/designer/src/setters/expression-setter.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Box, Text, css } from 'coral-system';
-import { Modal } from 'antd';
+import { Dropdown, Modal } from 'antd';
 import {
   isValidExpressionCode,
   isWrappedByExpressionContainer,
@@ -13,8 +13,14 @@ import {
   getValue,
   IVariableTreeNode,
 } from '@music163/tango-helpers';
-import { CloseCircleFilled, ExpandAltOutlined } from '@ant-design/icons';
-import { Panel, InputCode, Action } from '@music163/tango-ui';
+import {
+  CloseCircleFilled,
+  ExpandAltOutlined,
+  InfoOutlined,
+  KeyOutlined,
+  MenuOutlined,
+} from '@ant-design/icons';
+import { Panel, InputCode, Action, CodeOutlined } from '@music163/tango-ui';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
 import { useWorkspace, useWorkspaceData } from '@music163/tango-context';
 import { VariableTree } from '../components';
@@ -60,6 +66,8 @@ export function getWrappedExpressionCode(code: string) {
 }
 
 const suffixStyle = css`
+  display: flex;
+  align-items: center;
   .anticon-close-circle {
     color: rgba(0, 0, 0, 0.25);
     &:hover {
@@ -73,6 +81,7 @@ export interface ExpressionSetterProps extends FormItemComponentProps<string> {
   modalTip?: string;
   autoCompleteOptions?: string[];
   allowClear?: boolean;
+  showOptionsDropDown?: boolean;
 }
 
 export function ExpressionSetter(props: ExpressionSetterProps) {
@@ -86,6 +95,7 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
     status,
     allowClear = true,
     newStoreTemplate,
+    showOptionsDropDown = true,
   } = props;
   const [visible, { on, off }] = useBoolean();
   const [inputValue, setInputValue] = useState(() => {
@@ -118,6 +128,7 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
 
   return (
     <Box className="ExpressionSetter">
+      {/* 同时支持下拉框展示 */}
       <InputCode
         placeholder={placeholder}
         suffix={
@@ -130,6 +141,26 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
                 }}
               />
             )}
+            {showOptionsDropDown && autoCompleteOptions?.length && (
+              <Dropdown
+                menu={{
+                  items: autoCompleteOptions.map((option) => ({
+                    key: option,
+                    label: (
+                      <Text
+                        onClick={() => {
+                          change(option);
+                        }}
+                      >
+                        {option}
+                      </Text>
+                    ),
+                  })),
+                }}
+              >
+                <Action tooltip="使用预设代码片段" icon={<MenuOutlined />} size="small" />
+              </Dropdown>
+            )}
             <Action
               tooltip="打开表达式变量选择面板"
               icon={<ExpandAltOutlined />}

packages/designer/src/setters/render-props-setter.tsx

@@ -23,6 +23,7 @@ export function RenderSetter({
   text = '自定义渲染为',
   options = [],
   fallbackOption,
+  toggleIsVariable,
 }: FormItemComponentProps & RenderSetterProps) {
   const optionsMap = useMemo(() => {
     return options.reduce((prev, cur) => {
@@ -36,6 +37,8 @@ export function RenderSetter({
       const option = optionsMap[key] || fallbackOption;
       if (option?.render) {
         onChange(option.render, { relatedImports: option.relatedImports });
+        // 默认切换至源码模式
+        toggleIsVariable();
       } else {
         onChange(undefined);
       }

packages/designer/src/setting-panel.tsx

@@ -91,6 +91,9 @@ export const SettingPanel = observer((props: SettingPanelProps) => {
       borderLeftColor="line2"
       bg="white"
       headerProps={headerProps}
+      bodyProps={{
+        overflowY: 'hidden',
+      }}
       className="SettingPanel"
     >
       {prototype ? (

packages/setting-form/src/form-item.tsx

@@ -34,6 +34,7 @@ export interface FormItemComponentProps<T = any> {
   onChange: (value: T, detail?: SetterOnChangeDetailType) => void;
   readOnly?: boolean;
   disabled?: boolean;
+  toggleIsVariable?: () => void;
   status?: InputProps['status'];
   [prop: string]: any;
 }
@@ -144,6 +145,7 @@ export function createFormItem(options: IFormItemCreateOptions) {
         ...baseComponentProps,
         ...setterProps, // setterProps 优先级大于快捷属性
         ...getSetterProps(model),
+        toggleIsVariable, // 是否显示源码模式
       })
     );
 

packages/setting-form/src/form-ui.tsx

@@ -86,6 +86,7 @@ export function FormControlGroup({
       collapsed={collapsed}
       onCollapse={setCollapsed}
       className="FormControlGroup"
+      stickyHeader
       title={
         <Box display="flex" columnGap="s">
           <Checkbox
@@ -109,6 +110,7 @@ export function FormControlGroup({
       borderColor="line.normal"
       headerProps={{
         bg: 'fill1',
+        zIndex: 2,
       }}
     >
       <Box

packages/setting-form/src/form.tsx

@@ -47,7 +47,9 @@
 
 const formStyle = css`
   position: relative;
-
+  height: 100%;
+  display: flex;
+  flex-direction: column;
   > .SettingFormMain > :first-child:is(.FormControl) {
     margin-top: var(--tango-space-m);
   }
@@ -193,13 +195,13 @@
     if (modelProp && modelProp !== model) {
       setModel(modelProp);
     }
   }, [modelProp]);
 
   return (
     <FormVariableProvider value={{ disableSwitchExpressionSetter, showItemSubtitle }}>
       <FormModelProvider value={model}>
         <Box className="SettingForm" mb="xl" css={formStyle}>
-          <Box className="SettingFormHeader" position="sticky" top="0" bg="white" zIndex="2">
+          <Box className="SettingFormHeader" bg="white">
             <Box px="l" py="m">
               {showIdentifier && (
                 <FormHeader
@@ -247,7 +249,14 @@
               </Box>
             )}
           </Box>
-          <Box className="SettingFormMain" display="flex" flexDirection="column" rowGap="m">
+          <Box
+            className="SettingFormMain"
+            display="flex"
+            flexDirection="column"
+            paddingBottom="m"
+            rowGap="m"
+            overflow="auto"
+          >
             {renderProps(filterProps)}
             {filterProps.length === 0 && (
               <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="未找到配置项" />