refactor: 运营设置-屏蔽词过滤设置

web/src/components/OperationSetting.js

@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { Divider, Form, Grid, Header } from 'semantic-ui-react';
 import { Card } from '@douyinfe/semi-ui';
-import GeneralSettings from '../pages/Setting/Operation/GeneralSettings.js';
-import DrawingSettings from '../pages/Setting/Operation/DrawingSettings.js';
+import SettingsGeneral from '../pages/Setting/Operation/SettingsGeneral.js';
+import SettingsDrawing from '../pages/Setting/Operation/SettingsDrawing.js';
+import SettingsSensitiveWords from '../pages/Setting/Operation/SettingsSensitiveWords.js';
+
 import {
   API,
   showError,
@@ -238,40 +240,19 @@ const OperationSetting = () => {
     <>
       {/* 通用设置 */}
       <Card>
-        <GeneralSettings options={inputs} />
+        <SettingsGeneral options={inputs} />
       </Card>
       {/* 绘图设置 */}
       <Card style={{ marginTop: '10px' }}>
-        <DrawingSettings options={inputs} />
+        <SettingsDrawing options={inputs} />
+      </Card>
+      {/* 屏蔽词过滤设置 */}
+      <Card style={{ marginTop: '10px' }}>
+        <SettingsSensitiveWords options={inputs} />
       </Card>
       <Grid columns={1}>
         <Grid.Column>
           <Form loading={loading} inverted={isDark}>
-            <Header as='h3' inverted={isDark}>
-              屏蔽词过滤设置
-            </Header>
-            <Form.Group inline>
-              <Form.Checkbox
-                checked={inputs.CheckSensitiveEnabled === 'true'}
-                label='启用屏蔽词过滤功能'
-                name='CheckSensitiveEnabled'
-                onChange={handleInputChange}
-              />
-            </Form.Group>
-            <Form.Group inline>
-              <Form.Checkbox
-                checked={inputs.CheckSensitiveOnPromptEnabled === 'true'}
-                label='启用prompt检查'
-                name='CheckSensitiveOnPromptEnabled'
-                onChange={handleInputChange}
-              />
-              {/*<Form.Checkbox*/}
-              {/*  checked={inputs.CheckSensitiveOnCompletionEnabled === 'true'}*/}
-              {/*  label='启用生成内容检查'*/}
-              {/*  name='CheckSensitiveOnCompletionEnabled'*/}
-              {/*  onChange={handleInputChange}*/}
-              {/*/>*/}
-            </Form.Group>
             {/*<Form.Group inline>*/}
             {/*  <Form.Checkbox*/}
             {/*    checked={inputs.StopOnSensitiveEnabled === 'true'}*/}
@@ -291,27 +272,7 @@ const OperationSetting = () => {
             {/*    placeholder="例如：10"*/}
             {/*  />*/}
             {/*</Form.Group>*/}
-            <Form.Group widths='equal'>
-              <Form.TextArea
-                label='屏蔽词列表，一行一个屏蔽词，不需要符号分割'
-                name='SensitiveWords'
-                onChange={handleInputChange}
-                style={{
-                  minHeight: 250,
-                  fontFamily: 'JetBrains Mono, Consolas',
-                }}
-                value={inputs.SensitiveWords}
-                placeholder='一行一个屏蔽词'
-              />
-            </Form.Group>
-            <Form.Button
-              onClick={() => {
-                submitConfig('words').then();
-              }}
-            >
-              保存屏蔽词设置
-            </Form.Button>
-            <Divider />
+
             <Header as='h3' inverted={isDark}>
               日志设置
             </Header>

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

@@ -8,7 +8,7 @@ import {
   showWarning,
 } from '../../../helpers';
 
-export default function GeneralSettings(props) {
+export default function SettingsDrawing(props) {
   const [loading, setLoading] = useState(false);
   const [inputs, setInputs] = useState({
     DrawingEnabled: false,

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

@@ -0,0 +1,139 @@
+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 SettingsSensitiveWords(props) {
+  const [loading, setLoading] = useState(false);
+  const [inputs, setInputs] = useState({
+    CheckSensitiveEnabled: false,
+    CheckSensitiveOnPromptEnabled: false,
+    SensitiveWords: '',
+  });
+  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);
+  }, [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={'CheckSensitiveEnabled'}
+                  label={'启用屏蔽词过滤功能'}
+                  size='large'
+                  checkedText='｜'
+                  uncheckedText='〇'
+                  defaultChecked={false}
+                  checked={false}
+                  onChange={(value) => {
+                    setInputs({
+                      ...inputs,
+                      CheckSensitiveEnabled: value,
+                    });
+                  }}
+                />
+              </Col>
+              <Col span={8}>
+                <Form.Switch
+                  field={'CheckSensitiveOnPromptEnabled'}
+                  label={'启用 Prompt 检查'}
+                  size='large'
+                  checkedText='｜'
+                  uncheckedText='〇'
+                  defaultChecked={false}
+                  checked={false}
+                  onChange={(value) =>
+                    setInputs({
+                      ...inputs,
+                      CheckSensitiveOnPromptEnabled: value,
+                    })
+                  }
+                />
+              </Col>
+            </Row>
+            <Row>
+              <Col span={16}>
+                <Form.TextArea
+                  label={'屏蔽词列表'}
+                  extraText={'一行一个屏蔽词，不需要符号分割'}
+                  placeholder={'一行一个屏蔽词，不需要符号分割'}
+                  field={'SensitiveWords'}
+                  onChange={(value) =>
+                    setInputs({
+                      ...inputs,
+                      SensitiveWords: value,
+                    })
+                  }
+                  style={{ fontFamily: 'JetBrains Mono, Consolas' }}
+                  autosize={{ minRows: 6, maxRows: 12 }}
+                />
+              </Col>
+            </Row>
+            <Row>
+              <Button size='large' onClick={onSubmit}>
+                保存屏蔽词过滤设置
+              </Button>
+            </Row>
+          </Form.Section>
+        </Form>
+      </Spin>
+    </>
+  );
+}