feat: enhance SettingsLog component with confirmation modal for log deletion and…

feat: enhance SettingsLog component with confirmation modal for log deletion and improve user feedback

web/src/pages/Setting/Operation/SettingsLog.jsx

@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 */
 
 
 import React, { useEffect, useState, useRef } from 'react';
 import React, { useEffect, useState, useRef } from 'react';
-import { Button, Col, Form, Row, Spin, DatePicker } from '@douyinfe/semi-ui';
+import { Button, Col, Form, Row, Spin, DatePicker, Typography, Modal } from '@douyinfe/semi-ui';
 import dayjs from 'dayjs';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { useTranslation } from 'react-i18next';
 import {
 import {
@@ -29,6 +29,8 @@ import {
   showWarning,
   showWarning,
 } from '../../../helpers';
 } from '../../../helpers';
 
 
+const { Text } = Typography;
+
 export default function SettingsLog(props) {
 export default function SettingsLog(props) {
   const { t } = useTranslation();
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -78,24 +80,75 @@ export default function SettingsLog(props) {
       });
       });
   }
   }
   async function onCleanHistoryLog() {
   async function onCleanHistoryLog() {
-    try {
-      setLoadingCleanHistoryLog(true);
-      if (!inputs.historyTimestamp) throw new Error(t('请选择日志记录时间'));
-      const res = await API.delete(
-        `/api/log/?target_timestamp=${Date.parse(inputs.historyTimestamp) / 1000}`,
-      );
-      const { success, message, data } = res.data;
-      if (success) {
-        showSuccess(`${data} ${t('条日志已清理！')}`);
-        return;
-      } else {
-        throw new Error(t('日志清理失败：') + message);
-      }
-    } catch (error) {
-      showError(error.message);
-    } finally {
-      setLoadingCleanHistoryLog(false);
+    if (!inputs.historyTimestamp) {
+      showError(t('请选择日志记录时间'));
+      return;
     }
     }
+
+    const now = dayjs();
+    const targetDate = dayjs(inputs.historyTimestamp);
+    const targetTime = targetDate.format('YYYY-MM-DD HH:mm:ss');
+    const currentTime = now.format('YYYY-MM-DD HH:mm:ss');
+    const daysDiff = now.diff(targetDate, 'day');
+    
+    Modal.confirm({
+      title: t('确认清除历史日志'),
+      content: (
+        <div style={{ lineHeight: '1.8' }}>
+          <p>
+            <Text>{t('当前时间')}：</Text>
+            <Text strong style={{ color: '#52c41a' }}>{currentTime}</Text>
+          </p>
+          <p>
+            <Text>{t('选择时间')}：</Text>
+            <Text strong type="danger">{targetTime}</Text>
+            {daysDiff > 0 && (
+              <Text type="tertiary"> ({t('约')} {daysDiff} {t('天前')})</Text>
+            )}
+          </p>
+          <div style={{ 
+            background: '#fff7e6', 
+            border: '1px solid #ffd591', 
+            padding: '12px', 
+            borderRadius: '4px',
+            marginTop: '12px'
+          }}>
+            <Text type="warning" strong>⚠️ {t('注意')}：</Text>
+            <Text>{t('将删除')} </Text>
+            <Text strong type="danger">{targetTime}</Text>
+            {daysDiff > 0 && (
+              <Text type="tertiary"> ({t('约')} {daysDiff} {t('天前')})</Text>
+            )}
+            <Text> {t('之前的所有日志')}</Text>
+          </div>
+          <p style={{ marginTop: '12px' }}>
+            <Text type="danger">{t('此操作不可恢复，请仔细确认时间后再操作！')}</Text>
+          </p>
+        </div>
+      ),
+      okText: t('确认删除'),
+      cancelText: t('取消'),
+      okType: 'danger',
+      onOk: async () => {
+        try {
+          setLoadingCleanHistoryLog(true);
+          const res = await API.delete(
+            `/api/log/?target_timestamp=${Date.parse(inputs.historyTimestamp) / 1000}`,
+          );
+          const { success, message, data } = res.data;
+          if (success) {
+            showSuccess(`${data} ${t('条日志已清理！')}`);
+            return;
+          } else {
+            throw new Error(t('日志清理失败：') + message);
+          }
+        } catch (error) {
+          showError(error.message);
+        } finally {
+          setLoadingCleanHistoryLog(false);
+        }
+      },
+    });
   }
   }
 
 
   useEffect(() => {
   useEffect(() => {
@@ -138,7 +191,7 @@ export default function SettingsLog(props) {
               <Col xs={24} sm={12} md={8} lg={8} xl={8}>
               <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Spin spinning={loadingCleanHistoryLog}>
                 <Spin spinning={loadingCleanHistoryLog}>
                   <Form.DatePicker
                   <Form.DatePicker
-                    label={t('日志记录时间')}
+                    label={t('清除历史日志')}
                     field={'historyTimestamp'}
                     field={'historyTimestamp'}
                     type='dateTime'
                     type='dateTime'
                     inputReadOnly={true}
                     inputReadOnly={true}
@@ -149,7 +202,10 @@ export default function SettingsLog(props) {
                       });
                       });
                     }}
                     }}
                   />
                   />
-                  <Button size='default' onClick={onCleanHistoryLog}>
+                  <Text type="tertiary" size="small" style={{ display: 'block', marginTop: 4, marginBottom: 8 }}>
+                    {t('将清除选定时间之前的所有日志')}
+                  </Text>
+                  <Button size='default' type='danger' onClick={onCleanHistoryLog}>
                     {t('清除历史日志')}
                     {t('清除历史日志')}
                   </Button>
                   </Button>
                 </Spin>
                 </Spin>