feat: 1.开发数值统计组件。 2.开发倒计时组件。3.优化首页。

packages/editor/package.json

@@ -26,6 +26,7 @@
     "lodash-es": "^4.17.21",
     "md5": "^2.3.0",
     "prettier": "^2.2.0",
+    "react-countup": "^6.5.3",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-infinite-viewer": "^0.28.1",

packages/editor/src/components/VariableBind/VariableBind.tsx

@@ -30,7 +30,7 @@ const VariableBind: React.FC<Props> = ({ value, onChange, ...props }: any) => {
     });
   }
 
-  const val = typeof value === 'string' ? { type: 'static', value } : value;
+  const val = typeof value === 'string' || typeof value === 'number' ? { type: 'static', value } : value;
 
   return (
     <>

packages/editor/src/config/components.ts

@@ -333,6 +333,16 @@ const components = [
         name: '超链接',
         type: 'Link',
       },
+      {
+        icon: '',
+        name: '统计数值',
+        type: 'Statistic',
+      },
+      {
+        icon: '',
+        name: '倒计时',
+        type: 'CountDown',
+      },
       {
         icon: '',
         name: '图标',

packages/editor/src/packages/Basic/CountDown/CountDown.tsx

@@ -0,0 +1,69 @@
+import React, { useState, useEffect, useImperativeHandle, forwardRef } from 'react';
+import { Statistic } from 'antd';
+import { ComponentType } from '@/packages/types';
+import * as icons from '@ant-design/icons';
+import { message } from '@/utils/AntdGlobal';
+
+/**
+ *
+ * @param props 组件本身属性
+ * @param style 组件样式
+ * @returns
+ */
+const CountDown = ({ id, type, config, onChange, onFinish }: ComponentType, ref: any) => {
+  const [text, setText] = useState(0);
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    if (isNaN(config.props?.value)) {
+      console.error('倒计时组件值必须为时间戳类型');
+      message.error('倒计时组件值必须为时间戳');
+      return;
+    }
+    const originText = config.props?.value?.toString() || '';
+    const script = config.props?.script;
+    let value: string | number = originText;
+
+    if (script) {
+      try {
+        const renderFn = new Function('value', `return (${script})(value);`);
+        value = renderFn(value);
+      } catch (error) {
+        console.error(`脚本解析失败`, error);
+        message.error(JSON.stringify(error));
+      }
+    }
+    setText(Number(value?.toString()));
+  }, [config.props.value, config.props?.script]);
+
+  // 对外暴露方法
+  useImperativeHandle(ref, () => {
+    return {
+      show() {
+        setVisible(true);
+      },
+      hide() {
+        setVisible(false);
+      },
+    };
+  });
+
+  const iconsList: { [key: string]: any } = icons;
+  return (
+    visible && (
+      <Statistic.Countdown
+        style={config.style}
+        {...config.props}
+        value={text}
+        format={config.props?.format || undefined}
+        prefix={config.props.prefix ? React.createElement(iconsList[config.props.prefix]) : null}
+        suffix={config.props.suffix ? React.createElement(iconsList[config.props.suffix]) : null}
+        onChange={(val) => onChange?.(val)}
+        onFinish={() => onFinish?.(text)}
+        data-id={id}
+        data-type={type}
+      />
+    )
+  );
+};
+export default forwardRef(CountDown);

packages/editor/src/packages/Basic/CountDown/Schema.tsx

@@ -0,0 +1,81 @@
+/**
+ * 组件配置和属性值
+ */
+
+import { FormInstance } from 'antd';
+import TextSetting from './TextSetting';
+
+export default {
+  // 组件属性配置JSON
+  attrs: [
+    {
+      type: 'Title',
+      label: '基础配置',
+      key: 'basic',
+    },
+    {
+      type: 'Input',
+      label: '标题',
+      name: 'title',
+    },
+    {
+      type: 'Variable',
+      label: '显示值',
+      name: 'value',
+    },
+    {
+      type: 'Input',
+      label: '格式',
+      name: 'format',
+    },
+    {
+      type: 'Icons',
+      label: '前缀',
+      name: ['prefix'],
+    },
+    {
+      type: 'Icons',
+      label: '前缀',
+      name: ['suffix'],
+    },
+    {
+      type: 'function',
+      label: '自定义渲染',
+      key: 'render',
+      render: (form: FormInstance) => {
+        form.setFieldValue(
+          'script',
+          `function render(value){
+    return value;
+}`,
+        );
+        return <TextSetting key="render" form={form} />;
+      },
+    },
+  ],
+  config: {
+    // 组件默认属性值
+    props: {
+      title: 'Countdown',
+      value: Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30,
+      format: 'HH:mm:ss',
+    },
+    style: {},
+    events: [],
+    api: {},
+    source: '',
+  },
+  // 组件事件
+  events: [
+    {
+      value: 'onChange',
+      name: '变化事件',
+    },
+    {
+      value: 'onFinish',
+      name: '完成事件',
+    },
+  ],
+  // 组件接口
+  api: {},
+};

packages/editor/src/packages/Basic/CountDown/TextSetting.tsx

@@ -0,0 +1,16 @@
+import { Form } from 'antd';
+import VsEditor from '@/components/VsEditor';
+
+/**
+ * 自定义渲染
+ */
+export default function TextSetting(props: any) {
+  return (
+    <>
+      <Form.Item label="自定义" tooltip="通过编程的方式，实现自定义渲染。"></Form.Item>
+      <Form.Item name={['script']} noStyle>
+        <VsEditor />
+      </Form.Item>
+    </>
+  );
+}

packages/editor/src/packages/Basic/CountDown/index.ts

@@ -0,0 +1,2 @@
+export { default as CountDown } from './CountDown';
+export { default as CountDownConfig } from './Schema';

packages/editor/src/packages/Basic/Statistic/Schema.tsx

@@ -0,0 +1,72 @@
+/**
+ * 组件配置和属性值
+ */
+
+import { FormInstance } from 'antd';
+import TextSetting from './TextSetting';
+
+export default {
+  // 组件属性配置JSON
+  attrs: [
+    {
+      type: 'Title',
+      label: '基础配置',
+      key: 'basic',
+    },
+    {
+      type: 'Input',
+      label: '标题',
+      name: 'title',
+    },
+    {
+      type: 'Variable',
+      label: '显示值',
+      name: 'value',
+    },
+    {
+      type: 'InputNumber',
+      label: '数值精度',
+      name: 'precision',
+    },
+    {
+      type: 'Icons',
+      label: '前缀',
+      name: ['prefix'],
+    },
+    {
+      type: 'Icons',
+      label: '前缀',
+      name: ['suffix'],
+    },
+    {
+      type: 'function',
+      label: '自定义渲染',
+      key: 'render',
+      render: (form: FormInstance) => {
+        form.setFieldValue(
+          'script',
+          `function render(value){
+    return value;
+}`,
+        );
+        return <TextSetting key="render" form={form} />;
+      },
+    },
+  ],
+  config: {
+    // 组件默认属性值
+    props: {
+      title: '账户余额',
+      value: 192672,
+      precision: 2,
+    },
+    style: {},
+    events: [],
+    api: {},
+    source: '',
+  },
+  // 组件事件
+  events: [],
+  // 组件接口
+  api: {},
+};

packages/editor/src/packages/Basic/Statistic/Statistic.tsx

@@ -0,0 +1,61 @@
+import React, { useState, useEffect, useImperativeHandle, forwardRef } from 'react';
+import { Statistic } from 'antd';
+import { ComponentType } from '@/packages/types';
+import * as icons from '@ant-design/icons';
+import { message } from '@/utils/AntdGlobal';
+
+/**
+ *
+ * @param props 组件本身属性
+ * @param style 组件样式
+ * @returns
+ */
+const MStatistic = ({ id, type, config }: ComponentType, ref: any) => {
+  const [text, setText] = useState('');
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const originText = config.props?.value?.toString() || '';
+    const script = config.props?.script;
+    let value: string | number = originText;
+
+    if (script) {
+      try {
+        const renderFn = new Function('value', `return (${script})(value);`);
+        value = renderFn(value);
+      } catch (error) {
+        console.error(`脚本解析失败`, error);
+        message.error(JSON.stringify(error));
+      }
+    }
+    setText(value?.toString());
+  }, [config.props.value, config.props?.script]);
+
+  // 对外暴露方法
+  useImperativeHandle(ref, () => {
+    return {
+      show() {
+        setVisible(true);
+      },
+      hide() {
+        setVisible(false);
+      },
+    };
+  });
+
+  const iconsList: { [key: string]: any } = icons;
+  return (
+    visible && (
+      <Statistic
+        style={config.style}
+        {...config.props}
+        value={text}
+        prefix={config.props.prefix ? React.createElement(iconsList[config.props.prefix]) : null}
+        suffix={config.props.suffix ? React.createElement(iconsList[config.props.suffix]) : null}
+        data-id={id}
+        data-type={type}
+      />
+    )
+  );
+};
+export default forwardRef(MStatistic);

packages/editor/src/packages/Basic/Statistic/TextSetting.tsx

@@ -0,0 +1,16 @@
+import { Form } from 'antd';
+import VsEditor from '@/components/VsEditor';
+
+/**
+ * 自定义渲染
+ */
+export default function TextSetting(props: any) {
+  return (
+    <>
+      <Form.Item label="自定义" tooltip="通过编程的方式，实现自定义渲染。"></Form.Item>
+      <Form.Item name={['script']} noStyle>
+        <VsEditor />
+      </Form.Item>
+    </>
+  );
+}

packages/editor/src/packages/Basic/Statistic/index.ts

@@ -0,0 +1,2 @@
+export { default as Statistic } from './Statistic';
+export { default as StatisticConfig } from './Schema';

packages/editor/src/packages/Basic/index.ts

@@ -4,3 +4,5 @@ export { Title, TitleConfig } from './Title';
 export { Link, LinkConfig } from './Link';
 export { Icon, IconConfig } from './Icon';
 export { Avatar, AvatarConfig } from './Avatar';
+export { Statistic, StatisticConfig } from './Statistic';
+export { CountDown, CountDownConfig } from './CountDown';

packages/editor/src/pages/welcome/Welcome.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Button } from 'antd';
 import { setNebulaCanvas } from '@/utils/canvas';
+import CountUp from 'react-countup';
 import style from './index.module.less';
 export default function Welcome() {
   const [isShadow, setShadow] = useState(false);
@@ -33,7 +34,7 @@ export default function Welcome() {
         }}
       >
         <div className={style.logo}>
-          <img src="/imgs/mars-logo.png" width="40" />
+          <img src="/imgs/mars-logo-light.png" width="40" />
           <span>Marsview</span>
         </div>
         <div className={style.doc}>
@@ -58,6 +59,10 @@ export default function Welcome() {
         <div className={style.content}>
           <h1 className={style.title}>Marsview 低代码搭建平台</h1>
           <p className={style.desc}>让搭建更简单，让开发更高效</p>
+          <div className={style.count}>
+            服务了 <CountUp end={1000} duration={3} />+ 个项目，
+            <CountUp end={1000} duration={3} />+ 个页面
+          </div>
           <div className={style.btnGroup}>
             <Button type="primary" ghost size="large" onClick={openDoc}>
               产品文档