🚀 feat(frontend): add robust boolean handling across settings pages

Summary ------- 1. Introduced a reusable `toBoolean` utility (`web/src/helpers/boolean.js`) that converts strings (`'true'/'false'`, `'1'/'0'`), numbers, and native booleans to a proper boolean. 2. Re-exported `toBoolean` via `web/src/helpers/index.js` for simple one-line imports. Refactors --------- • Systematically replaced all legacy `item.value === 'true'` checks with `toBoolean(item.value)` in the following components: – `SystemSetting.js` – `OperationSetting.js` – `PaymentSetting.js` – `RatioSetting.js` – `RateLimitSetting.js` – `ModelSetting.js` – `DrawingSetting.js` – `DashboardSetting.js` – `ChatsSetting.js` • Unified import statements to `import { …, toBoolean } from '../../helpers';` removing redundant `../../helpers/boolean` paths. Why --- SQLite sometimes returns `1/0` or boolean literals instead of the string `'true'/'false'`, causing checkbox states to reset on page reload. The new utility guarantees consistent boolean parsing, fixing the issue across all environments (SQLite, MySQL, etc.) while improving code clarity.
2025-07-15 17:18:48 +08:00
parent 06ad5e3f8c
commit b2b018ab93
11 changed files with 29 additions and 17 deletions
--- a/web/src/components/settings/ChatsSetting.js
+++ b/web/src/components/settings/ChatsSetting.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Card, Spin } from '@douyinfe/semi-ui';
 import SettingsChats from '../../pages/Setting/Chat/SettingsChats.js';
-import { API, showError } from '../../helpers';
+import { API, showError, toBoolean } from '../../helpers';

 const ChatsSetting = () => {
  let [inputs, setInputs] = useState({
@@ -21,7 +21,7 @@ const ChatsSetting = () => {
          item.key.endsWith('Enabled') ||
          ['DefaultCollapseSidebar'].includes(item.key)
        ) {
-          newInputs[item.key] = item.value === 'true' ? true : false;
+          newInputs[item.key] = toBoolean(item.value);
        } else {
          newInputs[item.key] = item.value;
        }
--- a/web/src/components/settings/DashboardSetting.js
+++ b/web/src/components/settings/DashboardSetting.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useMemo } from 'react';
 import { Card, Spin, Button, Modal } from '@douyinfe/semi-ui';
-import { API, showError, showSuccess } from '../../helpers';
+import { API, showError, showSuccess, toBoolean } from '../../helpers';
 import SettingsAPIInfo from '../../pages/Setting/Dashboard/SettingsAPIInfo.js';
 import SettingsAnnouncements from '../../pages/Setting/Dashboard/SettingsAnnouncements.js';
 import SettingsFAQ from '../../pages/Setting/Dashboard/SettingsFAQ.js';
@@ -45,7 +45,7 @@ const DashboardSetting = () => {
        }
        if (item.key.endsWith('Enabled') &&
          (item.key === 'DataExportEnabled')) {
-          newInputs[item.key] = item.value === 'true' ? true : false;
+          newInputs[item.key] = toBoolean(item.value);
        }
      });
      setInputs(newInputs);
--- a/web/src/components/settings/DrawingSetting.js
+++ b/web/src/components/settings/DrawingSetting.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Card, Spin } from '@douyinfe/semi-ui';
 import SettingsDrawing from '../../pages/Setting/Drawing/SettingsDrawing.js';
-import { API, showError } from '../../helpers';
+import { API, showError, toBoolean } from '../../helpers';

 const DrawingSetting = () => {
  let [inputs, setInputs] = useState({
@@ -23,7 +23,7 @@ const DrawingSetting = () => {
      let newInputs = {};
      data.forEach((item) => {
        if (item.key.endsWith('Enabled')) {
-          newInputs[item.key] = item.value === 'true' ? true : false;
+          newInputs[item.key] = toBoolean(item.value);
        } else {
          newInputs[item.key] = item.value;
        }
--- a/web/src/components/settings/ModelSetting.js
+++ b/web/src/components/settings/ModelSetting.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Card, Spin, Tabs } from '@douyinfe/semi-ui';

-import { API, showError, showSuccess } from '../../helpers';
+import { API, showError, showSuccess, toBoolean } from '../../helpers';
 import { useTranslation } from 'react-i18next';
 import SettingGeminiModel from '../../pages/Setting/Model/SettingGeminiModel.js';
 import SettingClaudeModel from '../../pages/Setting/Model/SettingClaudeModel.js';
@@ -44,7 +44,7 @@ const ModelSetting = () => {
          }
        }
        if (item.key.endsWith('Enabled') || item.key.endsWith('enabled')) {
-          newInputs[item.key] = item.value === 'true' ? true : false;
+          newInputs[item.key] = toBoolean(item.value);
        } else {
          newInputs[item.key] = item.value;
        }
--- a/web/src/components/settings/OperationSetting.js
+++ b/web/src/components/settings/OperationSetting.js
@@ -5,7 +5,7 @@ import SettingsSensitiveWords from '../../pages/Setting/Operation/SettingsSensit
 import SettingsLog from '../../pages/Setting/Operation/SettingsLog.js';
 import SettingsMonitoring from '../../pages/Setting/Operation/SettingsMonitoring.js';
 import SettingsCreditLimit from '../../pages/Setting/Operation/SettingsCreditLimit.js';
-import { API, showError } from '../../helpers';
+import { API, showError, toBoolean } from '../../helpers';

 const OperationSetting = () => {
  let [inputs, setInputs] = useState({
@@ -54,7 +54,7 @@ const OperationSetting = () => {
          item.key.endsWith('Enabled') ||
          ['DefaultCollapseSidebar'].includes(item.key)
        ) {
-          newInputs[item.key] = item.value === 'true' ? true : false;
+          newInputs[item.key] = toBoolean(item.value);
        } else {
          newInputs[item.key] = item.value;
        }
--- a/web/src/components/settings/PaymentSetting.js
+++ b/web/src/components/settings/PaymentSetting.js
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Card, Spin } from '@douyinfe/semi-ui';
 import SettingsGeneralPayment from '../../pages/Setting/Payment/SettingsGeneralPayment.js';
 import SettingsPaymentGateway from '../../pages/Setting/Payment/SettingsPaymentGateway.js';
-import { API, showError } from '../../helpers';
+import { API, showError, toBoolean } from '../../helpers';
 import { useTranslation } from 'react-i18next';

 const PaymentSetting = () => {
@@ -42,7 +42,7 @@ const PaymentSetting = () => {
            break;
          default:
            if (item.key.endsWith('Enabled')) {
-              newInputs[item.key] = item.value === 'true' ? true : false;
+              newInputs[item.key] = toBoolean(item.value);
            } else {
              newInputs[item.key] = item.value;
            }
--- a/web/src/components/settings/RateLimitSetting.js
+++ b/web/src/components/settings/RateLimitSetting.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Card, Spin } from '@douyinfe/semi-ui';

-import { API, showError } from '../../helpers/index.js';
+import { API, showError, toBoolean } from '../../helpers/index.js';
 import { useTranslation } from 'react-i18next';
 import RequestRateLimit from '../../pages/Setting/RateLimit/SettingsRequestRateLimit.js';

@@ -28,7 +28,7 @@ const RateLimitSetting = () => {
        }

        if (item.key.endsWith('Enabled')) {
-          newInputs[item.key] = item.value === 'true' ? true : false;
+          newInputs[item.key] = toBoolean(item.value);
        } else {
          newInputs[item.key] = item.value;
        }
--- a/web/src/components/settings/RatioSetting.js
+++ b/web/src/components/settings/RatioSetting.js
@@ -8,7 +8,7 @@ import ModelSettingsVisualEditor from '../../pages/Setting/Ratio/ModelSettingsVi
 import ModelRatioNotSetEditor from '../../pages/Setting/Ratio/ModelRationNotSetEditor.js';
 import UpstreamRatioSync from '../../pages/Setting/Ratio/UpstreamRatioSync.js';

-import { API, showError } from '../../helpers';
+import { API, showError, toBoolean } from '../../helpers';

 const RatioSetting = () => {
  const { t } = useTranslation();
@@ -51,7 +51,7 @@ const RatioSetting = () => {
          }
        }
        if (['DefaultUseAutoGroup', 'ExposeRatioEnabled'].includes(item.key)) {
-          newInputs[item.key] = item.value === 'true' ? true : false;
+          newInputs[item.key] = toBoolean(item.value);
        } else {
          newInputs[item.key] = item.value;
        }
--- a/web/src/components/settings/SystemSetting.js
+++ b/web/src/components/settings/SystemSetting.js
@@ -17,6 +17,7 @@ import {
  removeTrailingSlash,
  showError,
  showSuccess,
+  toBoolean,
 } from '../../helpers';
 import axios from 'axios';
 import { useTranslation } from 'react-i18next';
@@ -106,7 +107,7 @@ const SystemSetting = () => {
          case 'LinuxDOOAuthEnabled':
          case 'oidc.enabled':
          case 'WorkerAllowHttpImageRequestEnabled':
-            item.value = item.value === 'true';
+            item.value = toBoolean(item.value);
            break;
          case 'Price':
          case 'MinTopUp':
--- a/web/src/helpers/boolean.js
+++ b/web/src/helpers/boolean.js
@@ -0,0 +1,10 @@
+export const toBoolean = (value) => {
+  // 兼容字符串、数字以及布尔原生类型
+  if (typeof value === 'boolean') return value;
+  if (typeof value === 'number') return value === 1;
+  if (typeof value === 'string') {
+    const v = value.toLowerCase();
+    return v === 'true' || v === '1';
+  }
+  return false;
+}; 
--- a/web/src/helpers/index.js
+++ b/web/src/helpers/index.js
@@ -6,3 +6,4 @@ export * from './render';
 export * from './log';
 export * from './data';
 export * from './token';
+export * from './boolean';