feat: 111

src/global.less

@@ -111,3 +111,28 @@ ol {
   color: rgba(0, 0, 0, 0.45) !important;
   cursor: not-allowed;
 }
+.ant-pro-page-container-warp {
+  background-color: transparent;
+}
+.ant-page-header {
+  background-color: transparent;
+}
+
+.ant-pro-page-container-children-content {
+  margin: 0 24px 0;
+}
+
+.dn-resource.expand .dn-resource-content {
+  grid-gap: 9px !important;
+  background-color: #f5f7fa !important;
+}
+
+.dn-resource-header-expand {
+  display: none !important;
+}
+
+.dn-resource {
+  padding: 10px !important;
+  background-color: #f5f7fa;
+  border-radius: 10px 10px 10px 10px;
+}

src/pages/Schema/Base/components/LeftMenu.tsx

@@ -1,4 +1,6 @@
 import React from 'react'
+import { Menu } from 'antd'
+import './index.less'
 
 type LeftMenuProps = {
   title?: string
@@ -9,25 +11,16 @@ type LeftMenuProps = {
 
 const LeftMenu: React.FC<LeftMenuProps> = ({ title = '栏目/功能', options, onChange, value }) => {
   return (
-    <div className="h-full w-1/7 min-w-170px  rounded-4px shadow-card">
-      <div className="p-4 border-b-1 border-solid border-black border-opacity-10 bg-[#f7f9fa] text-left">
-        <span>{title}</span>
-      </div>
-      <div className="p-4 bg-white" style={{ height: 'calc(100vh - 201px)' }}>
-        <ul className="p-0 m-0 list-none text-primary flex flex-col flex-1">
-          {options.map(item => (
-            <li
-              key={item.value}
-              className={[
-                'flex justify-between items-center py-2 px-5 cursor-pointer',
-                item.value === value ? 'scale-up-center' : ''
-              ].join(' ')}
-              onClick={() => onChange(item.value)}>
-              {item.label}
-            </li>
-          ))}
-        </ul>
-      </div>
+    <div
+      className="w-216px rounded-20px"
+      style={{ height: 'calc(100vh - 122px)', background: '#ffffff' }}
+    >
+      <div className="p-5 text-16px text-opacity-85 menu-title">{title}</div>
+      <Menu defaultSelectedKeys={[value]} onSelect={({ key }) => onChange(key)} mode="inline">
+        {options.map(item => (
+          <Menu.Item key={item.value}>{item.label}</Menu.Item>
+        ))}
+      </Menu>
     </div>
   )
 }

src/pages/Schema/Base/components/index.less

@@ -0,0 +1,3 @@
+.menu-title {
+  box-shadow: inset 0 -1px 0 1px #f0f0f0;
+}

src/pages/Schema/Base/index.tsx

@@ -56,7 +56,7 @@ const Index: React.FC<BaseProps> = ({ base, dispatch }) => {
           value={state.activeKey}
           onChange={key => setState({ ...state, activeKey: key })}
         />
-        <div className="w-6/7 ml-8 bg-white p-4 shadow-card relative ">
+        <div className="w-6/7 ml-8 bg-white p-4 rounded-20px">
           <div className="flex flex-row-reverse mb-4 w-full">
             <div
               onClick={() => gotoDetail(state.activeKey, currentSchema?.ID)}

src/pages/Schema/Designable/index.tsx

@@ -2,16 +2,10 @@ import 'antd/dist/antd.less'
 import { useMemo } from 'react'
 import {
   Designer, // 设计器根组件，主要用于下发上下文
-  DesignerToolsWidget, // 画板工具挂件
-  ViewToolsWidget, // 视图切换工具挂件
   Workspace, // 工作区组件，核心组件，用于管理工作区内的拖拽行为，树节点数据等等...
-  OutlineTreeWidget, // 大纲树组件，它会自动识别当前工作区，展示出工作区内树节点
   ResourceWidget, // 拖拽源挂件
-  HistoryWidget, // 历史记录挂件
   StudioPanel, // 主布局面板
-  CompositePanel, // 左侧组合布局面板
   WorkspacePanel, // 工作区布局面板
-  ToolbarPanel, // 工具栏布局面板
   ViewportPanel, // 视口布局面板
   ViewPanel, // 视图布局面板
   SettingsPanel, // 右侧配置表单布局面板
@@ -19,13 +13,7 @@ import {
 } from '@designable/react'
 import { SettingsForm } from '@designable/react-settings-form'
 import { createDesigner, GlobalRegistry, Shortcut, KeyCode } from '@designable/core'
-import {
-  LogoWidget,
-  ActionsWidget,
-  PreviewWidget,
-  SchemaEditorWidget,
-  MarkupSchemaWidget
-} from './widgets'
+import { ActionsWidget } from './widgets'
 import { saveSchema } from './service'
 import {
   Form,
@@ -76,78 +64,70 @@ const Designable = () => {
   )
 
   return (
-    <Designer engine={engine}>
-      <StudioPanel logo={<LogoWidget />} actions={<ActionsWidget />}>
-        <CompositePanel>
-          <CompositePanel.Item title="panels.Component" icon="Component">
-            <ResourceWidget
-              title="sources.Inputs"
-              sources={[
-                Input,
-                Password,
-                NumberPicker,
-                Select,
-                TreeSelect,
-                Cascader,
-                Checkbox,
-                Radio,
-                DatePicker,
-                TimePicker,
-                Upload
-              ]}
-            />
-          </CompositePanel.Item>
-          <CompositePanel.Item title="panels.OutlinedTree" icon="Outline">
-            <OutlineTreeWidget />
-          </CompositePanel.Item>
-          <CompositePanel.Item title="panels.History" icon="History">
-            <HistoryWidget />
-          </CompositePanel.Item>
-        </CompositePanel>
-        <Workspace id="form">
-          <WorkspacePanel>
-            <ToolbarPanel>
+    <div className={styles.zhDesignable}>
+      <Designer engine={engine}>
+        <StudioPanel actions={<ActionsWidget />}>
+          <ResourceWidget
+            title="sources.Inputs"
+            sources={[
+              Input,
+              Password,
+              NumberPicker,
+              Select,
+              TreeSelect,
+              Cascader,
+              Checkbox,
+              Radio,
+              DatePicker,
+              TimePicker,
+              Upload
+            ]}
+          />
+          <Workspace id="form">
+            <WorkspacePanel>
+              {/* <ToolbarPanel>
               <DesignerToolsWidget use={['HISTORY', 'CURSOR']} />
               <ViewToolsWidget use={['DESIGNABLE', 'JSONTREE', 'MARKUP', 'PREVIEW']} />
-            </ToolbarPanel>
-            <ViewportPanel>
-              <ViewPanel type="DESIGNABLE">
-                {() => (
-                  <ComponentTreeWidget
-                    components={{
-                      Form,
-                      Field,
-                      Input,
-                      Select,
-                      TreeSelect,
-                      Cascader,
-                      Radio,
-                      Checkbox,
-                      NumberPicker,
-                      Password,
-                      DatePicker,
-                      TimePicker,
-                      Upload,
-                      Switch
-                    }}
-                  />
-                )}
-              </ViewPanel>
-              <ViewPanel type="JSONTREE" scrollable={false}>
-                {(tree, onChange) => <SchemaEditorWidget tree={tree} onChange={onChange} />}
-              </ViewPanel>
-              <ViewPanel type="MARKUP" scrollable={false}>
-                {tree => <MarkupSchemaWidget tree={tree} />}
-              </ViewPanel>
-              <ViewPanel type="PREVIEW">{tree => <PreviewWidget tree={tree} />}</ViewPanel>
-            </ViewportPanel>
-          </WorkspacePanel>
-        </Workspace>
-        <SettingsPanel title="panels.PropertySettings">
-          <SettingsForm uploadAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" />
-        </SettingsPanel>
-      </StudioPanel>
-    </Designer>
+            </ToolbarPanel> */}
+              <ViewportPanel>
+                <ViewPanel type="DESIGNABLE">
+                  {() => (
+                    <ComponentTreeWidget
+                      components={{
+                        Form,
+                        Field,
+                        Input,
+                        Select,
+                        TreeSelect,
+                        Cascader,
+                        Radio,
+                        Checkbox,
+                        NumberPicker,
+                        Password,
+                        DatePicker,
+                        TimePicker,
+                        Upload,
+                        Switch
+                      }}
+                    />
+                  )}
+                </ViewPanel>
+                {/* <ViewPanel type="JSONTREE" scrollable={false}>
+                  {(tree, onChange) => <SchemaEditorWidget tree={tree} onChange={onChange} />}
+                </ViewPanel>
+                <ViewPanel type="MARKUP" scrollable={false}>
+                  {tree => <MarkupSchemaWidget tree={tree} />}
+                </ViewPanel>
+                <ViewPanel type="PREVIEW">{tree => <PreviewWidget tree={tree} />}</ViewPanel> */}
+              </ViewportPanel>
+            </WorkspacePanel>
+          </Workspace>
+          <SettingsPanel title="panels.PropertySettings">
+            <SettingsForm uploadAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" />
+          </SettingsPanel>
+        </StudioPanel>
+      </Designer>
+    </div>
   )
 }