📝 refactor: reorganize payment settings into dedicated tab

Restructure payment settings into a separate tab for better organization and user experience. The changes include: 1. Create dedicated Payment components in the Setting directory structure 2. Move payment-related settings from SystemSetting to PaymentSetting 3. Add proper i18n support with useTranslation hook 4. Split payment settings into GeneralPayment and PaymentGateway components 5. Fix internationalization issues in placeholder text 6. Update navigation with CreditCard icon for payment tab This refactoring improves code maintainability by following the established project pattern of having specialized setting components in their own directories.
2025-06-21 04:16:01 +08:00
parent c3d2d07b68
commit 01ef1fe4e4
6 changed files with 405 additions and 152 deletions
--- a/web/src/components/settings/PaymentSetting.js
+++ b/web/src/components/settings/PaymentSetting.js
@@ -0,0 +1,88 @@
+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 { useTranslation } from 'react-i18next';
+
+const PaymentSetting = () => {
+  const { t } = useTranslation();
+  let [inputs, setInputs] = useState({
+    ServerAddress: '',
+    PayAddress: '',
+    EpayId: '',
+    EpayKey: '',
+    Price: 7.3,
+    MinTopUp: 1,
+    TopupGroupRatio: '',
+    CustomCallbackAddress: '',
+    PayMethods: '',
+  });
+
+  let [loading, setLoading] = useState(false);
+
+  const getOptions = async () => {
+    const res = await API.get('/api/option/');
+    const { success, message, data } = res.data;
+    if (success) {
+      let newInputs = {};
+      data.forEach((item) => {
+        switch (item.key) {
+          case 'TopupGroupRatio':
+            try {
+              newInputs[item.key] = JSON.stringify(JSON.parse(item.value), null, 2);
+            } catch (error) {
+              console.error('解析TopupGroupRatio出错:', error);
+              newInputs[item.key] = item.value;
+            }
+            break;
+          case 'Price':
+          case 'MinTopUp':
+            newInputs[item.key] = parseFloat(item.value);
+            break;
+          default:
+            if (item.key.endsWith('Enabled')) {
+              newInputs[item.key] = item.value === 'true' ? true : false;
+            } else {
+              newInputs[item.key] = item.value;
+            }
+            break;
+        }
+      });
+
+      setInputs(newInputs);
+    } else {
+      showError(t(message));
+    }
+  };
+
+  async function onRefresh() {
+    try {
+      setLoading(true);
+      await getOptions();
+    } catch (error) {
+      showError(t('刷新失败'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    onRefresh();
+  }, []);
+
+  return (
+    <>
+      <Spin spinning={loading} size='large'>
+        <Card style={{ marginTop: '10px' }}>
+          <SettingsGeneralPayment options={inputs} refresh={onRefresh} />
+        </Card>
+        <Card style={{ marginTop: '10px' }}>
+          <SettingsPaymentGateway options={inputs} refresh={onRefresh} />
+        </Card>
+      </Spin>
+    </>
+  );
+};
+
+export default PaymentSetting;