feat: 1.替换分割组件。2.增加cdn。3.画布增加缩放和拖拽。4.功能优化。

JackySoft · Sep 25, 2024 · aa3a6b6 · aa3a6b6
1 parent 7c6d501
commit aa3a6b6
Show file tree

Hide file tree

Showing 25 changed files with 376 additions and 375 deletions.
diff --git a/package.json b/package.json
@@ -53,7 +53,7 @@
     "@ant-design/plots": "^1.2.6",
     "@types/qs": "^6.9.15",
     "ahooks": "^3.7.8",
-    "antd": "^5.20.6",
+    "antd": "^5.21.1",
     "axios": "^0.27.2",
     "copy-to-clipboard": "^3.3.3",
     "less": "^4.2.0",

diff --git a/packages/admin/index.html b/packages/admin/index.html
@@ -6,9 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Marsview低代码平台</title>
     <link rel="preconnect" href="http://admin.marsview.cc" />
-    <link rel="preconnect" href="https://cdn.staticfile.net" />
     <link rel="preconnect" href="http://mars-api.marsview.cc" />
     <link rel="preconnect" href="https://marsview.cdn.bcebos.com/" />
+    <link href="https://marsview.cdn.bcebos.com/static/antd%405.21.1/reset.css" rel="stylesheet" />
     <style>
       html,
       body {

diff --git a/packages/admin/vite.config.ts b/packages/admin/vite.config.ts
@@ -45,7 +45,7 @@ export default defineConfig({
           varName: 'dayjs',
         },
         antd: {
-          src: 'https://marsview.cdn.bcebos.com/static/antd%405.20.3.min.js',
+          src: 'https://marsview.cdn.bcebos.com/static/antd%405.21.1/antd.min.js',
           varName: 'antd',
         },
         ahooks: {
@@ -56,6 +56,14 @@ export default defineConfig({
           src: 'https://marsview.cdn.bcebos.com/static/axios%401.7.5.min.js',
           varName: 'axios',
         },
+        '@ant-design/icons': {
+          src: 'https://marsview.cdn.bcebos.com/static/%40ant-design-icons%405.5.1/index.umd.min.js',
+          varName: 'icons',
+        },
+        '@ant-design/plots': {
+          src: 'https://marsview.cdn.bcebos.com/static/plots%401.2.6.min.js',
+          varName: 'Plots',
+        },
       }),
   ],
 });
diff --git a/packages/editor/index.html b/packages/editor/index.html
@@ -13,6 +13,7 @@
     <link rel="preconnect" href="http://www.marsview.cc" />
     <link rel="preconnect" href="http://mars-api.marsview.cc" />
     <link rel="preconnect" href="https://marsview.cdn.bcebos.com/" />
+    <link href="https://marsview.cdn.bcebos.com/static/antd%405.21.1/reset.css" rel="stylesheet" />
     <style>
       * {
         margin: 0;

diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -16,7 +16,6 @@
     "@marsview/materials": "workspace:^",
     "@monaco-editor/react": "^4.6.0",
     "@xyflow/react": "^12.3.0",
-    "allotment": "^1.19.5",
     "bytemd": "^1.21.0",
     "css": "^3.0.0",
     "dayjs": "^1.11.10",

diff --git a/packages/editor/src/components/FlowNode/index.less b/packages/editor/src/components/FlowNode/index.less
@@ -1,6 +1,6 @@
 .node-viewer {
-  width: 100vw;
-  height: calc(100vh - 65px);
+  width: auto;
+  height: 100vh;
   margin: -24px;
   background-color: #f0f2f3;
   cursor: grab;

diff --git a/packages/editor/src/layout/EditLayout.tsx b/packages/editor/src/layout/EditLayout.tsx
@@ -1,50 +1,45 @@
-import { useState } from 'react';
+import { Outlet } from 'react-router-dom';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import { ConfigProvider, Splitter } from 'antd';
 import ConfigPanel from './components/ConfigPanel/ConfigPanel';
 import Menu from './components/Menu';
-import { Outlet } from 'react-router-dom';
-import { Allotment } from 'allotment'; //面板分割、拖拽
 import { usePageStore } from '@/stores/pageStore';
-import 'allotment/dist/style.css';
 import './layout.less';
 
 /**
  * 编辑器布局组件
  */
 const EditLayout = () => {
-  const [isOpen, setOpen] = useState<boolean>(true);
-  const { mode, updateToolbar } = usePageStore((state) => ({ mode: state.mode, updateToolbar: state.updateToolbar }));
-  const toggleOpen = (status: boolean) => {
-    if (status === isOpen) return;
-    setOpen(!isOpen);
-  };
-
+  const mode = usePageStore((state) => state.mode);
   // 模式切换，会导致子组件重新渲染
   return (
     <DndProvider backend={HTML5Backend}>
       {/* 编辑器 */}
       <div style={{ height: 'calc(100vh - 64px)' }}>
-        <Allotment onChange={updateToolbar}>
-          {/* 左侧组件，菜单展开后，最小320不可缩小，菜单关闭后，拖拽面板不可见 */}
-          {mode === 'edit' && (
-            <Allotment.Pane preferredSize={320} minSize={isOpen ? 320 : 49} maxSize={isOpen ? 800 : 49}>
-              <Menu toggleOpen={toggleOpen} isOpen={isOpen} />
-            </Allotment.Pane>
-          )}
-
-          {/* 编辑器 */}
-          <Allotment.Pane>
-            <Outlet></Outlet>
-          </Allotment.Pane>
-
-          {/* 属性面板 */}
-          {mode === 'edit' && (
-            <Allotment.Pane preferredSize={300} minSize={300} maxSize={800}>
+        <ConfigProvider
+          theme={{
+            components: {
+              Splitter: {
+                splitBarSize: 3,
+                controlItemBgActiveHover: '#7d33ff',
+                controlItemBgHover: '#e8e9eb',
+              },
+            },
+          }}
+        >
+          <Splitter>
+            <Splitter.Panel size={mode === 'preview' ? 0 : 300} defaultSize={300}>
+              <Menu />
+            </Splitter.Panel>
+            <Splitter.Panel size={mode === 'preview' ? '100%' : ''}>
+              <Outlet></Outlet>
+            </Splitter.Panel>
+            <Splitter.Panel size={mode === 'preview' ? 0 : 300} defaultSize={300}>
               <ConfigPanel />
-            </Allotment.Pane>
-          )}
-        </Allotment>
+            </Splitter.Panel>
+          </Splitter>
+        </ConfigProvider>
       </div>
     </DndProvider>
   );

diff --git a/packages/editor/src/layout/components/Menu/OutlinePanel.tsx b/packages/editor/src/layout/components/Menu/OutlinePanel.tsx
@@ -36,10 +36,14 @@ const OutlinePanel = memo(() => {
   const handleSelect = (selectedKeys: any, { node }: any) => {
     setSelectedKeys(selectedKeys);
     if (selectedKeys.length > 0) {
-      setSelectedElement({
-        id: node.id,
-        type: node.type,
-      });
+      if(selectedKeys[0] === 'page'){
+        setSelectedElement(undefined);
+      }else{
+        setSelectedElement({
+          id: node.id,
+          type: node.type,
+        });
+      }
     } else {
       setSelectedElement(undefined);
     }

diff --git a/packages/editor/src/layout/components/Menu/index.tsx b/packages/editor/src/layout/components/Menu/index.tsx
@@ -2,7 +2,6 @@ import { Col, Row, Tabs, Tooltip } from 'antd';
 import {
   AppstoreOutlined,
   PartitionOutlined,
-  MenuFoldOutlined,
   CodeOutlined,
   ApiOutlined,
   FunctionOutlined,
@@ -84,7 +83,7 @@ const panels = [
  * 生成左侧组件列表
  */
 
-const Menu = (props: any) => {
+const Menu = () => {
   return (
     <>
       <Tabs
@@ -94,7 +93,6 @@ const Menu = (props: any) => {
         tabBarStyle={{ width: '50px', height: 'calc(100vh - 64px)' }}
         className={styles.leftTool}
         centered={true}
-        onTabClick={() => props.toggleOpen(true)}
         items={panels.map((item) => {
           return {
             key: item.key,
@@ -103,15 +101,12 @@ const Menu = (props: any) => {
                 {item.icon}
               </Tooltip>
             ),
-            children: props.isOpen && (
+            children: (
               <div style={{ marginLeft: -10, marginRight: 10 }}>
-                <Row style={{ height: 46, paddingRight: 14 }} align={'middle'} justify={'space-between'}>
+                <Row style={{ height: 46 }} align={'middle'} justify={'space-between'}>
                   <Col>
                     <span style={{ fontWeight: 'bold' }}>{item.title}</span>
                   </Col>
-                  <Tooltip placement="right" title="关闭菜单">
-                    <MenuFoldOutlined onClick={() => props.toggleOpen()} />
-                  </Tooltip>
                 </Row>
                 {item.component?.()}
               </div>

diff --git a/packages/editor/src/packages/Basic/Image/Schema.ts b/packages/editor/src/packages/Basic/Image/Schema.ts
@@ -15,6 +15,16 @@ export default {
       label: '图片地址',
       name: 'src',
     },
+    {
+      type: 'InputPx',
+      label: '图片宽度',
+      name: 'width',
+    },
+    {
+      type: 'InputPx',
+      label: '图片高度',
+      name: 'height',
+    },
     {
       type: 'Switch',
       label: '是否预览',
@@ -26,13 +36,12 @@ export default {
     props: {
       src: 'https://marsview.cdn.bcebos.com/s1.png',
       preview: false,
-      alt: '',
-    },
-    // 组件样式
-    style: {
       width: '200px',
       height: '200px',
+      alt: '',
     },
+    // 组件样式
+    style: {},
   },
   // 组件事件
   events: [

diff --git a/packages/editor/src/packages/EChart/Bar/Schema.tsx b/packages/editor/src/packages/EChart/Bar/Schema.tsx
@@ -184,7 +184,7 @@ export default {
       barWidthRatio: 0.6, // 柱子宽度占比
       isGroup: true,
       theme: 'default', // 主题
-      color: ['#f16622', '#FFAB3E', '#FADB1E', '#9ADB19', '#28C084', '#3CA2FF', '#1861EB', '#A24CF5', '#F32AA3', '#F11818'],
+      color: ['#9d5cff', '#FFAB3E', '#FADB1E', '#9ADB19', '#28C084', '#3CA2FF', '#1861EB', '#A24CF5', '#F32AA3', '#F11818'],
       seriesField: 'type', // 分类字段
       autoFit: true, // 图表自适应
       appendPadding: 20, // 图表内边距

diff --git a/packages/editor/src/packages/EChart/Column/Schema.tsx b/packages/editor/src/packages/EChart/Column/Schema.tsx
@@ -205,7 +205,7 @@ export default {
         text: '多色饼图',
       },
       theme: 'default', // 主题
-      color: ['#f16622', '#FFAB3E', '#FADB1E', '#9ADB19', '#28C084', '#3CA2FF', '#1861EB', '#A24CF5', '#F32AA3', '#F11818'],
+      color: ['#9d5cff', '#FFAB3E', '#FADB1E', '#9ADB19', '#28C084', '#3CA2FF', '#1861EB', '#A24CF5', '#F32AA3', '#F11818'],
       seriesField: 'type', // 分类字段
       isStack: false, // 是否堆叠
       isRange: false, // 是否区间柱状图

diff --git a/packages/editor/src/packages/EChart/Line/Schema.tsx b/packages/editor/src/packages/EChart/Line/Schema.tsx
@@ -177,7 +177,7 @@ export default {
     // 组件默认属性值
     props: {
       theme: 'default', // 主题
-      color: ['#f16622', '#FFAB3E', '#FADB1E', '#9ADB19', '#28C084', '#3CA2FF', '#1861EB', '#A24CF5', '#F32AA3', '#F11818'],
+      color: ['#9d5cff', '#FFAB3E', '#FADB1E', '#9ADB19', '#28C084', '#3CA2FF', '#1861EB', '#A24CF5', '#F32AA3', '#F11818'],
       xField: 'week',
       yField: 'value',
       seriesField: 'name',

diff --git a/packages/editor/src/packages/EChart/Pie/Schema.tsx b/packages/editor/src/packages/EChart/Pie/Schema.tsx
@@ -201,7 +201,7 @@ export default {
         position: 'right',
       },
       theme: 'default', // 主题
-      color: ['#f16622', '#FFAB3E', '#FADB1E', '#9ADB19', '#28C084', '#3CA2FF', '#1861EB', '#A24CF5', '#F32AA3', '#F11818'],
+      color: ['#9d5cff', '#FFAB3E', '#FADB1E', '#9ADB19', '#28C084', '#3CA2FF', '#1861EB', '#A24CF5', '#F32AA3', '#F11818'],
       interactions: [
         {
           type: 'element-active',

diff --git a/packages/editor/src/packages/EChart/Progress/Schema.tsx b/packages/editor/src/packages/EChart/Progress/Schema.tsx
@@ -63,7 +63,7 @@ export default {
       autoFit: false, // 图表自适应
       appendPadding: 0, // 图表内边距
       barWidthRatio: 0.2,
-      color: ['#f16622', '#E8EDF3'],
+      color: ['#9d5cff', '#E8EDF3'],
     },
     // 组件样式
     style: {

diff --git a/packages/editor/src/packages/EChart/RingProgress/Schema.tsx b/packages/editor/src/packages/EChart/RingProgress/Schema.tsx
@@ -75,7 +75,7 @@ export default {
       appendPadding: 0, // 图表内边距
       innerRadius: 0.85,
       radius: 1,
-      color: ['#f16622', '#E8EDF3'],
+      color: ['#9d5cff', '#E8EDF3'],
     },
     // 组件样式
     style: {

diff --git a/packages/editor/src/packages/EChart/components/ColorSet.tsx b/packages/editor/src/packages/EChart/components/ColorSet.tsx
@@ -13,7 +13,7 @@ export default memo(() => {
                 <Form.Item noStyle {...restField} name={[name]}>
                   <MColorPicker style={{ width: '120px' }} />
                 </Form.Item>
-                <PlusOutlined onClick={() => add('#f16622', name + 1)} />
+                <PlusOutlined onClick={() => add('#9d5cff', name + 1)} />
                 {name > 0 && <MinusOutlined onClick={() => remove(name)} />}
               </Space>
             ))}