feat(demo): beautify sidebar style (#476)

* feat(free-demo): beautify sidebar style

* feat(fixed-demo): beautify sidebar style

* fix(demo): form content border radius

apps/demo-fixed-layout/src/components/sidebar/sidebar-node-renderer.tsx

@@ -13,7 +13,17 @@ export function SidebarNodeRenderer(props: { node: FlowNodeEntity }) {
 
   return (
     <NodeRenderContext.Provider value={nodeRender}>
-      {nodeRender.form?.render()}
+      <div
+        style={{
+          background: 'rgb(251, 251, 251)',
+          height: 'calc(100vh - 40px)',
+          margin: '8px 8px 8px 0',
+          borderRadius: 8,
+          border: '1px solid rgba(82,100,154, 0.13)',
+        }}
+      >
+        {nodeRender.form?.render()}
+      </div>
     </NodeRenderContext.Provider>
   );
 }

apps/demo-fixed-layout/src/components/sidebar/sidebar-renderer.tsx

@@ -86,7 +86,23 @@ export const SidebarRenderer = () => {
     ) : null;
 
   return (
-    <SideSheet mask={false} visible={visible} onCancel={handleClose}>
+    <SideSheet
+      mask={false}
+      visible={visible}
+      onCancel={handleClose}
+      closable={false}
+      width={360}
+      headerStyle={{
+        display: 'none',
+      }}
+      bodyStyle={{
+        padding: 0,
+      }}
+      style={{
+        background: 'none',
+        boxShadow: 'none',
+      }}
+    >
       <IsSidebarContext.Provider value={true}>{content}</IsSidebarContext.Provider>
     </SideSheet>
   );

apps/demo-fixed-layout/src/form-components/form-content/styles.tsx

@@ -11,7 +11,8 @@ export const FormWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 6px;
-  background-color: rgba(0, 0, 0, 0.02);
+  background-color: rgb(251, 251, 251);
+  border-radius: 0 0 8px 8px;
   padding: 0 12px 12px;
 `;
 

apps/demo-fixed-layout/src/form-components/form-header/index.tsx

@@ -7,13 +7,13 @@ import { useContext, useCallback, useMemo, useState } from 'react';
 
 import { useClientContext } from '@flowgram.ai/fixed-layout-editor';
 import { IconButton, Dropdown, Button } from '@douyinfe/semi-ui';
-import { IconSmallTriangleDown, IconSmallTriangleLeft } from '@douyinfe/semi-icons';
+import { IconClose, IconSmallTriangleDown, IconSmallTriangleLeft } from '@douyinfe/semi-icons';
 import { IconMore } from '@douyinfe/semi-icons';
 
 import { FlowNodeRegistry } from '../../typings';
 import { FlowCommandId } from '../../shortcuts/constants';
 import { useIsSidebar } from '../../hooks';
-import { NodeRenderContext } from '../../context';
+import { NodeRenderContext, SidebarContext } from '../../context';
 import { getIcon } from './utils';
 import { TitleInput } from './title-input';
 import { Header, Operators } from './styles';
@@ -67,11 +67,15 @@ export function FormHeader() {
   const { node, expanded, startDrag, toggleExpand, readonly } = useContext(NodeRenderContext);
   const [titleEdit, updateTitleEdit] = useState<boolean>(false);
 
+  const { setNodeId } = useContext(SidebarContext);
   const isSidebar = useIsSidebar();
   const handleExpand = (e: React.MouseEvent) => {
     toggleExpand();
     e.stopPropagation(); // Disable clicking prevents the sidebar from opening
   };
+  const handleClose = () => {
+    setNodeId(undefined);
+  };
 
   return (
     <Header
@@ -109,6 +113,15 @@ export function FormHeader() {
           </Dropdown>
         </Operators>
       )}
+      {isSidebar && (
+        <Button
+          type="primary"
+          icon={<IconClose />}
+          size="small"
+          theme="borderless"
+          onClick={handleClose}
+        />
+      )}
     </Header>
   );
 }

apps/demo-fixed-layout/src/form-components/form-header/styles.tsx

@@ -12,9 +12,9 @@ export const Header = styled.div`
   align-items: center;
   width: 100%;
   column-gap: 8px;
-  border-radius: 8px;
+  border-radius: 8px 8px 0 0;
 
-  background: linear-gradient(#f2f2ff 0%, rgba(0, 0, 0, 0.02) 100%);
+  background: linear-gradient(#f2f2ff 0%, rgb(251, 251, 251) 100%);
   overflow: hidden;
 
   padding: 8px;

apps/demo-free-layout/src/components/sidebar/sidebar-node-renderer.tsx

@@ -13,7 +13,17 @@ export function SidebarNodeRenderer(props: { node: FlowNodeEntity }) {
 
   return (
     <NodeRenderContext.Provider value={nodeRender}>
-      {nodeRender.form?.render()}
+      <div
+        style={{
+          background: 'rgb(251, 251, 251)',
+          height: 'calc(100vh - 40px)',
+          margin: '8px 8px 8px 0',
+          borderRadius: 8,
+          border: '1px solid rgba(82,100,154, 0.13)',
+        }}
+      >
+        {nodeRender.form?.render()}
+      </div>
     </NodeRenderContext.Provider>
   );
 }

apps/demo-free-layout/src/components/sidebar/sidebar-renderer.tsx

@@ -86,7 +86,23 @@ export const SidebarRenderer = () => {
     ) : null;
 
   return (
-    <SideSheet mask={false} visible={visible} onCancel={handleClose}>
+    <SideSheet
+      mask={false}
+      visible={visible}
+      onCancel={handleClose}
+      closable={false}
+      width={360}
+      headerStyle={{
+        display: 'none',
+      }}
+      bodyStyle={{
+        padding: 0,
+      }}
+      style={{
+        background: 'none',
+        boxShadow: 'none',
+      }}
+    >
       <IsSidebarContext.Provider value={true}>{content}</IsSidebarContext.Provider>
     </SideSheet>
   );

apps/demo-free-layout/src/form-components/form-content/styles.tsx

@@ -11,7 +11,8 @@ export const FormWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 6px;
-  background-color: rgba(0, 0, 0, 0.02);
+  background-color: rgb(251, 251, 251);
+  border-radius: 0 0 8px 8px;
   padding: 0 12px 12px;
 `;
 

apps/demo-free-layout/src/form-components/form-header/index.tsx

@@ -3,14 +3,15 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 
 import { useClientContext, CommandService } from '@flowgram.ai/free-layout-editor';
 import { Button } from '@douyinfe/semi-ui';
-import { IconSmallTriangleDown, IconSmallTriangleLeft } from '@douyinfe/semi-icons';
+import { IconClose, IconSmallTriangleDown, IconSmallTriangleLeft } from '@douyinfe/semi-icons';
 
 import { FlowCommandId } from '../../shortcuts';
 import { useIsSidebar, useNodeRenderContext } from '../../hooks';
+import { SidebarContext } from '../../context';
 import { NodeMenu } from '../../components/node-menu';
 import { getIcon } from './utils';
 import { TitleInput } from './title-input';
@@ -20,6 +21,7 @@ export function FormHeader() {
   const { node, expanded, toggleExpand, readonly } = useNodeRenderContext();
   const [titleEdit, updateTitleEdit] = useState<boolean>(false);
   const ctx = useClientContext();
+  const { setNodeId } = useContext(SidebarContext);
   const isSidebar = useIsSidebar();
   const handleExpand = (e: React.MouseEvent) => {
     toggleExpand();
@@ -28,6 +30,9 @@ export function FormHeader() {
   const handleDelete = () => {
     ctx.get<CommandService>(CommandService).executeCommand(FlowCommandId.DELETE, [node]);
   };
+  const handleClose = () => {
+    setNodeId(undefined);
+  };
 
   return (
     <Header>
@@ -47,6 +52,15 @@ export function FormHeader() {
           <NodeMenu node={node} deleteNode={handleDelete} updateTitleEdit={updateTitleEdit} />
         </Operators>
       )}
+      {isSidebar && (
+        <Button
+          type="primary"
+          icon={<IconClose />}
+          size="small"
+          theme="borderless"
+          onClick={handleClose}
+        />
+      )}
     </Header>
   );
 }

apps/demo-free-layout/src/form-components/form-header/styles.tsx

@@ -15,7 +15,7 @@ export const Header = styled.div`
   border-radius: 8px 8px 0 0;
   cursor: move;
 
-  background: linear-gradient(#f2f2ff 0%, rgba(0, 0, 0, 0.02) 100%);
+  background: linear-gradient(#f2f2ff 0%, rgb(251, 251, 251) 100%);
   overflow: hidden;
 
   padding: 8px;