refactor: 运营设置-数据看板设置

web/src/pages/Setting/Operation/SettingsDataDashboard.js

@@ -0,0 +1,147 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Button, Col, Form, Row, Spin, Tag } from '@douyinfe/semi-ui';
+import {
+  compareObjects,
+  API,
+  showError,
+  showSuccess,
+  showWarning,
+} from '../../../helpers';
+
+export default function DataDashboard(props) {
+  const optionsDataExportDefaultTime = [
+    { key: 'hour', label: '小时', value: 'hour' },
+    { key: 'day', label: '天', value: 'day' },
+    { key: 'week', label: '周', value: 'week' },
+  ];
+  const [loading, setLoading] = useState(false);
+  const [inputs, setInputs] = useState({
+    DataExportEnabled: false,
+    DataExportInterval: '',
+    DataExportDefaultTime: '',
+  });
+  const refForm = useRef();
+  const [inputsRow, setInputsRow] = useState(inputs);
+
+  function onSubmit() {
+    const updateArray = compareObjects(inputs, inputsRow);
+    if (!updateArray.length) return showWarning('你似乎并没有修改什么');
+    const requestQueue = updateArray.map((item) => {
+      let value = '';
+      if (typeof inputs[item.key] === 'boolean') {
+        value = String(inputs[item.key]);
+      } else {
+        value = inputs[item.key];
+      }
+      return API.put('/api/option/', {
+        key: item.key,
+        value,
+      });
+    });
+    setLoading(true);
+    Promise.all(requestQueue)
+      .then((res) => {
+        if (requestQueue.length === 1) {
+          if (res.includes(undefined)) return;
+        } else if (requestQueue.length > 1) {
+          if (res.includes(undefined)) return showError('部分更新失败');
+        }
+        showSuccess('更新成功');
+      })
+      .catch(() => {
+        showError('更新失败');
+      })
+      .finally(() => {
+        setLoading(false);
+        setInputsRow(structuredClone(inputs));
+      });
+  }
+
+  useEffect(() => {
+    const currentInputs = {};
+    for (let key in props.options) {
+      if (Object.keys(inputs).includes(key)) {
+        currentInputs[key] = props.options[key];
+      }
+    }
+    setInputs(currentInputs);
+    setInputsRow(structuredClone(currentInputs));
+    refForm.current.setValues(currentInputs);
+    localStorage.setItem(
+      'data_export_default_time',
+      String(inputs.DataExportDefaultTime),
+    );
+  }, [props.options]);
+
+  return (
+    <>
+      <Spin spinning={loading}>
+        <Form
+          values={inputs}
+          getFormApi={(formAPI) => (refForm.current = formAPI)}
+          style={{ marginBottom: 15 }}
+        >
+          <Form.Section text={'数据看板设置'}>
+            <Row gutter={16}>
+              <Col span={8}>
+                <Form.Switch
+                  field={'DataExportEnabled'}
+                  label={'启用数据看板（实验性）'}
+                  size='large'
+                  checkedText='｜'
+                  uncheckedText='〇'
+                  onChange={(value) => {
+                    setInputs({
+                      ...inputs,
+                      DataExportEnabled: value,
+                    });
+                  }}
+                />
+              </Col>
+            </Row>
+            <Row>
+              <Col span={8}>
+                <Form.InputNumber
+                  label={'数据看板更新间隔 '}
+                  step={1}
+                  min={1}
+                  suffix={'分钟'}
+                  extraText={'设置过短会影响数据库性能'}
+                  placeholder={'数据看板更新间隔'}
+                  field={'DataExportInterval'}
+                  onChange={(value) =>
+                    setInputs({
+                      ...inputs,
+                      DataExportInterval: String(value),
+                    })
+                  }
+                />
+              </Col>
+              <Col span={8}>
+                <Form.Select
+                  label='数据看板默认时间粒度'
+                  optionList={optionsDataExportDefaultTime}
+                  field={'DataExportDefaultTime'}
+                  extraText={'仅修改展示粒度，统计精确到小时'}
+                  placeholder={'数据看板默认时间粒度'}
+                  style={{ width: 180 }}
+                  onChange={(value) =>
+                    setInputs({
+                      ...inputs,
+                      DataExportDefaultTime: String(value),
+                    })
+                  }
+                />
+              </Col>
+            </Row>
+            <Row>
+              <Button size='large' onClick={onSubmit}>
+                保存数据看板设置
+              </Button>
+            </Row>
+          </Form.Section>
+        </Form>
+      </Spin>
+    </>
+  );
+}

web/src/pages/Setting/Operation/SettingsDrawing.js

@@ -64,6 +64,7 @@ export default function SettingsDrawing(props) {
     setInputs(currentInputs);
     setInputsRow(structuredClone(currentInputs));
     refForm.current.setValues(currentInputs);
+    localStorage.setItem('mj_notify_enabled', String(inputs.MjNotifyEnabled));
   }, [props.options]);
   return (
     <>