fix: update SettingForm style (#125)

* fix: auto focus expression panel * fix: form control group level 1 sticky head * fix: expression-setter add showOptionsDropDown * fix: update icon * fix: revert toggleIsVariable * fix: revert comment
NetEase · Apr 3, 2024 · 3f42516 · 3f42516
1 parent 93608d1
commit 3f42516
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 6 deletions.
diff --git a/packages/designer/src/setters/event-setter.tsx b/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 },
@@ -63,6 +65,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;

diff --git a/packages/designer/src/setters/expression-setter.tsx b/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 />}

diff --git a/packages/designer/src/setting-panel.tsx b/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 ? (

diff --git a/packages/setting-form/src/form-ui.tsx b/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

diff --git a/packages/setting-form/src/form.tsx b/packages/setting-form/src/form.tsx
@@ -51,7 +51,9 @@ function filterComponentProps(props: IComponentPrototype['props'], keyword: stri
 
 const formStyle = css`
   position: relative;
-
+  height: 100%;
+  display: flex;
+  flex-direction: column;
   > .SettingFormMain > :first-child:is(.FormControl) {
     margin-top: var(--tango-space-m);
   }
@@ -203,7 +205,7 @@ export function SettingForm({
     <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
@@ -251,7 +253,14 @@ export function SettingForm({
               </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="未找到配置项" />