diff --git a/web/package.json b/web/package.json
index 4f9eced..e814d65 100644
--- a/web/package.json
+++ b/web/package.json
@@ -5,11 +5,12 @@
   "type": "module",
   "dependencies": {
     "@douyinfe/semi-icons": "^2.46.1",
-    "@douyinfe/semi-ui": "^2.46.1",
+    "@douyinfe/semi-ui": "^2.55.3",
     "@visactor/react-vchart": "~1.8.8",
     "@visactor/vchart": "~1.8.8",
     "@visactor/vchart-semi-theme": "~1.8.8",
     "axios": "^0.27.2",
+    "dayjs": "^1.11.11",
     "history": "^5.3.0",
     "marked": "^4.1.1",
     "react": "^18.2.0",
diff --git a/web/src/components/OperationSetting.js b/web/src/components/OperationSetting.js
index 3da0dcc..6835e1a 100644
--- a/web/src/components/OperationSetting.js
+++ b/web/src/components/OperationSetting.js
@@ -4,6 +4,7 @@ import { Card } from '@douyinfe/semi-ui';
 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 SettingsLog from '../pages/Setting/Operation/SettingsLog.js';
 
 import {
   API,
@@ -34,19 +35,19 @@ const OperationSetting = () => {
     AutomaticDisableChannelEnabled: '',
     AutomaticEnableChannelEnabled: '',
     ChannelDisableThreshold: 0,
-    LogConsumeEnabled: '',
+    LogConsumeEnabled: false,
     DisplayInCurrencyEnabled: false,
     DisplayTokenStatEnabled: false,
-    CheckSensitiveEnabled: '',
-    CheckSensitiveOnPromptEnabled: '',
+    CheckSensitiveEnabled: false,
+    CheckSensitiveOnPromptEnabled: false,
     CheckSensitiveOnCompletionEnabled: '',
     StopOnSensitiveEnabled: '',
     SensitiveWords: '',
-    MjNotifyEnabled: '',
-    MjAccountFilterEnabled: '',
-    MjModeClearEnabled: '',
-    MjForwardUrlEnabled: '',
-    DrawingEnabled: '',
+    MjNotifyEnabled: false,
+    MjAccountFilterEnabled: false,
+    MjModeClearEnabled: false,
+    MjForwardUrlEnabled: false,
+    DrawingEnabled: false,
     DataExportEnabled: '',
     DataExportDefaultTime: 'hour',
     DataExportInterval: 5,
@@ -223,19 +224,6 @@ const OperationSetting = () => {
         break;
     }
   };
-
-  const deleteHistoryLogs = async () => {
-    console.log(inputs);
-    const res = await API.delete(
-      `/api/log/?target_timestamp=${Date.parse(historyTimestamp) / 1000}`,
-    );
-    const { success, message, data } = res.data;
-    if (success) {
-      showSuccess(`${data} 条日志已清理！`);
-      return;
-    }
-    showError('日志清理失败：' + message);
-  };
   return (
     <>
       {/* 通用设置 */}
@@ -250,6 +238,10 @@ const OperationSetting = () => {
       <Card style={{ marginTop: '10px' }}>
         <SettingsSensitiveWords options={inputs} />
       </Card>
+      {/* 日志设置 */}
+      <Card style={{ marginTop: '10px' }}>
+        <SettingsLog options={inputs} />
+      </Card>
       <Grid columns={1}>
         <Grid.Column>
           <Form loading={loading} inverted={isDark}>
@@ -273,36 +265,6 @@ const OperationSetting = () => {
             {/*  />*/}
             {/*</Form.Group>*/}
 
-            <Header as='h3' inverted={isDark}>
-              日志设置
-            </Header>
-            <Form.Group inline>
-              <Form.Checkbox
-                checked={inputs.LogConsumeEnabled === 'true'}
-                label='启用额度消费日志记录'
-                name='LogConsumeEnabled'
-                onChange={handleInputChange}
-              />
-            </Form.Group>
-            <Form.Group widths={4}>
-              <Form.Input
-                label='目标时间'
-                value={historyTimestamp}
-                type='datetime-local'
-                name='history_timestamp'
-                onChange={(e, { name, value }) => {
-                  setHistoryTimestamp(value);
-                }}
-              />
-            </Form.Group>
-            <Form.Button
-              onClick={() => {
-                deleteHistoryLogs().then();
-              }}
-            >
-              清理历史日志
-            </Form.Button>
-            <Divider />
             <Header as='h3' inverted={isDark}>
               数据看板
             </Header>
diff --git a/web/src/pages/Setting/Operation/SettingsLog.js b/web/src/pages/Setting/Operation/SettingsLog.js
new file mode 100644
index 0000000..77120ea
--- /dev/null
+++ b/web/src/pages/Setting/Operation/SettingsLog.js
@@ -0,0 +1,150 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Button, Col, Form, Row, Spin, DatePicker } from '@douyinfe/semi-ui';
+import dayjs from 'dayjs';
+import {
+  compareObjects,
+  API,
+  showError,
+  showSuccess,
+  showWarning,
+} from '../../../helpers';
+
+export default function SettingsLog(props) {
+  const [loading, setLoading] = useState(false);
+  const [loadingCleanHistoryLog, setLoadingCleanHistoryLog] = useState(false);
+  const [inputs, setInputs] = useState({
+    LogConsumeEnabled: false,
+    historyTimestamp: dayjs().subtract(1, 'month').toDate(),
+  });
+  // const [historyTimestamp, setHistoryTimestamp] = useState(
+  //   dayjs().subtract(1, 'month').toDate(),
+  // );
+  const refForm = useRef();
+  const [inputsRow, setInputsRow] = useState(inputs);
+
+  function onSubmit() {
+    const updateArray = compareObjects(inputs, inputsRow).filter(
+      (item) => item.key !== 'historyTimestamp',
+    );
+
+    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));
+      });
+  }
+  async function onCleanHistoryLog() {
+    try {
+      setLoadingCleanHistoryLog(true);
+      if (!inputs.historyTimestamp) throw new Error('请选择日志记录时间');
+      const res = await API.delete(
+        `/api/log/?target_timestamp=${Date.parse(inputs.historyTimestamp) / 1000}`,
+      );
+      const { success, message, data } = res.data;
+      if (success) {
+        showSuccess(`${data} 条日志已清理！`);
+        return;
+      } else {
+        throw new Error('日志清理失败：' + message);
+      }
+    } catch (error) {
+      showError(error.message);
+    } finally {
+      setLoadingCleanHistoryLog(false);
+    }
+  }
+
+  useEffect(() => {
+    const currentInputs = {};
+    for (let key in props.options) {
+      if (Object.keys(inputs).includes(key)) {
+        currentInputs[key] = props.options[key];
+      }
+    }
+    currentInputs['historyTimestamp'] = inputs.historyTimestamp;
+    setInputs(Object.assign(inputs, 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={'LogConsumeEnabled'}
+                  label={'启用额度消费日志记录'}
+                  size='large'
+                  checkedText='｜'
+                  uncheckedText='〇'
+                  onChange={(value) => {
+                    setInputs({
+                      ...inputs,
+                      LogConsumeEnabled: value,
+                    });
+                  }}
+                />
+              </Col>
+              <Col span={8}>
+                <Spin spinning={loadingCleanHistoryLog}>
+                  <Form.DatePicker
+                    label='日志记录时间'
+                    field={'historyTimestamp'}
+                    type='dateTime'
+                    inputReadOnly={true}
+                    onChange={(value) => {
+                      setInputs({
+                        ...inputs,
+                        historyTimestamp: value,
+                      });
+                    }}
+                  />
+                  <Button size='default' onClick={onCleanHistoryLog}>
+                    清除历史日志
+                  </Button>
+                </Spin>
+              </Col>
+            </Row>
+
+            <Row>
+              <Button size='large' onClick={onSubmit}>
+                保存日志设置
+              </Button>
+            </Row>
+          </Form.Section>
+        </Form>
+      </Spin>
+    </>
+  );
+}