style(web): format code

web/src/pages/Setup/index.js

@@ -1,11 +1,27 @@
 import React, { useContext, useEffect, useState, useRef } from 'react';
-import { Card, Col, Row, Form, Button, Typography, Space, RadioGroup, Radio, Modal, Banner } from '@douyinfe/semi-ui';
+import {
+  Card,
+  Col,
+  Row,
+  Form,
+  Button,
+  Typography,
+  Space,
+  RadioGroup,
+  Radio,
+  Modal,
+  Banner,
+} from '@douyinfe/semi-ui';
 import { API, showError, showNotice, timestamp2string } from '../../helpers';
 import { StatusContext } from '../../context/Status';
 import { marked } from 'marked';
 import { StyleContext } from '../../context/Style/index.js';
 import { useTranslation } from 'react-i18next';
-import { IconHelpCircle, IconInfoCircle, IconAlertTriangle } from '@douyinfe/semi-icons';
+import {
+  IconHelpCircle,
+  IconInfoCircle,
+  IconAlertTriangle,
+} from '@douyinfe/semi-icons';
 
 const Setup = () => {
   const { t, i18n } = useTranslation();
@@ -16,16 +32,16 @@ const Setup = () => {
   const [setupStatus, setSetupStatus] = useState({
     status: false,
     root_init: false,
-    database_type: ''
+    database_type: '',
   });
   const { Text, Title } = Typography;
   const formRef = useRef(null);
-  
+
   const [formData, setFormData] = useState({
     username: '',
     password: '',
     confirmPassword: '',
-    usageMode: 'external'
+    usageMode: 'external',
   });
 
   useEffect(() => {
@@ -38,7 +54,7 @@ const Setup = () => {
       const { success, data } = res.data;
       if (success) {
         setSetupStatus(data);
-        
+
         // If setup is already completed, redirect to home
         if (data.status) {
           window.location.href = '/';
@@ -53,54 +69,54 @@ const Setup = () => {
   };
 
   const handleUsageModeChange = (val) => {
-    setFormData({...formData, usageMode: val});
+    setFormData({ ...formData, usageMode: val });
   };
 
   const onSubmit = () => {
     if (!formRef.current) {
-      console.error("Form reference is null");
+      console.error('Form reference is null');
       showError(t('表单引用错误，请刷新页面重试'));
       return;
     }
-    
+
     const values = formRef.current.getValues();
-    console.log("Form values:", values);
-    
+    console.log('Form values:', values);
+
     // For root_init=false, validate admin username and password
     if (!setupStatus.root_init) {
       if (!values.username || !values.username.trim()) {
         showError(t('请输入管理员用户名'));
         return;
       }
-      
+
       if (!values.password || values.password.length < 8) {
         showError(t('密码长度至少为8个字符'));
         return;
       }
-      
+
       if (values.password !== values.confirmPassword) {
         showError(t('两次输入的密码不一致'));
         return;
       }
     }
-    
+
     // Prepare submission data
-    const formValues = {...values};
+    const formValues = { ...values };
     formValues.SelfUseModeEnabled = values.usageMode === 'self';
     formValues.DemoSiteEnabled = values.usageMode === 'demo';
-    
+
     // Remove usageMode as it's not needed by the backend
     delete formValues.usageMode;
-    
-    console.log("Submitting data to backend:", formValues);
+
+    console.log('Submitting data to backend:', formValues);
     setLoading(true);
-    
+
     // Submit to backend
     API.post('/api/setup', formValues)
-      .then(res => {
+      .then((res) => {
         const { success, message } = res.data;
-        console.log("API response:", res.data);
-        
+        console.log('API response:', res.data);
+
         if (success) {
           showNotice(t('系统初始化成功，正在跳转...'));
           setTimeout(() => {
@@ -110,7 +126,7 @@ const Setup = () => {
           showError(message || t('初始化失败，请重试'));
         }
       })
-      .catch(error => {
+      .catch((error) => {
         console.error('API error:', error);
         showError(t('系统初始化失败，请重试'));
         setLoading(false);
@@ -124,31 +140,44 @@ const Setup = () => {
     <>
       <div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
         <Card>
-          <Title heading={2} style={{ marginBottom: '24px' }}>{t('系统初始化')}</Title>
-          
+          <Title heading={2} style={{ marginBottom: '24px' }}>
+            {t('系统初始化')}
+          </Title>
+
           {setupStatus.database_type === 'sqlite' && (
             <Banner
-              type="warning"
-              icon={<IconAlertTriangle size="large" />}
+              type='warning'
+              icon={<IconAlertTriangle size='large' />}
               closeIcon={null}
               title={t('数据库警告')}
               description={
                 <div>
-                  <p>{t('您正在使用 SQLite 数据库。如果您在容器环境中运行，请确保已正确设置数据库文件的持久化映射，否则容器重启后所有数据将丢失！')}</p>
-                  <p>{t('建议在生产环境中使用 MySQL 或 PostgreSQL 数据库，或确保 SQLite 数据库文件已映射到宿主机的持久化存储。')}</p>
+                  <p>
+                    {t(
+                      '您正在使用 SQLite 数据库。如果您在容器环境中运行，请确保已正确设置数据库文件的持久化映射，否则容器重启后所有数据将丢失！',
+                    )}
+                  </p>
+                  <p>
+                    {t(
+                      '建议在生产环境中使用 MySQL 或 PostgreSQL 数据库，或确保 SQLite 数据库文件已映射到宿主机的持久化存储。',
+                    )}
+                  </p>
                 </div>
               }
               style={{ marginBottom: '24px' }}
             />
           )}
-          
+
           <Form
-            getFormApi={(formApi) => { formRef.current = formApi; console.log("Form API set:", formApi); }}
+            getFormApi={(formApi) => {
+              formRef.current = formApi;
+              console.log('Form API set:', formApi);
+            }}
             initValues={formData}
           >
             {setupStatus.root_init ? (
               <Banner
-                type="info"
+                type='info'
                 icon={<IconInfoCircle />}
                 closeIcon={null}
                 description={t('管理员账号已经初始化过，请继续设置系统参数')}
@@ -157,43 +186,56 @@ const Setup = () => {
             ) : (
               <Form.Section text={t('管理员账号')}>
                 <Form.Input
-                  field="username"
+                  field='username'
                   label={t('用户名')}
                   placeholder={t('请输入管理员用户名')}
                   showClear
-                  onChange={(value) => setFormData({...formData, username: value})}
+                  onChange={(value) =>
+                    setFormData({ ...formData, username: value })
+                  }
                 />
                 <Form.Input
-                  field="password"
+                  field='password'
                   label={t('密码')}
                   placeholder={t('请输入管理员密码')}
-                  type="password"
+                  type='password'
                   showClear
-                  onChange={(value) => setFormData({...formData, password: value})}
+                  onChange={(value) =>
+                    setFormData({ ...formData, password: value })
+                  }
                 />
                 <Form.Input
-                  field="confirmPassword"
+                  field='confirmPassword'
                   label={t('确认密码')}
                   placeholder={t('请确认管理员密码')}
-                  type="password"
+                  type='password'
                   showClear
-                  onChange={(value) => setFormData({...formData, confirmPassword: value})}
+                  onChange={(value) =>
+                    setFormData({ ...formData, confirmPassword: value })
+                  }
                 />
               </Form.Section>
             )}
-            
-            <Form.Section text={
-              <div style={{ display: 'flex', alignItems: 'center' }}>
-                {t('系统设置')}
-              </div>
-            }>
-              <Form.RadioGroup 
-                field="usageMode" 
+
+            <Form.Section
+              text={
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                  {t('系统设置')}
+                </div>
+              }
+            >
+              <Form.RadioGroup
+                field='usageMode'
                 label={
                   <div style={{ display: 'flex', alignItems: 'center' }}>
                     {t('使用模式')}
-                    <IconHelpCircle 
-                      style={{ marginLeft: '4px', color: 'var(--semi-color-primary)', verticalAlign: 'middle', cursor: 'pointer' }} 
+                    <IconHelpCircle
+                      style={{
+                        marginLeft: '4px',
+                        color: 'var(--semi-color-primary)',
+                        verticalAlign: 'middle',
+                        cursor: 'pointer',
+                      }}
                       onClick={(e) => {
                         // e.preventDefault();
                         // e.stopPropagation();
@@ -203,18 +245,18 @@ const Setup = () => {
                   </div>
                 }
                 extraText={t('可在初始化后修改')}
-                initValue="external"
+                initValue='external'
                 onChange={handleUsageModeChange}
               >
-                <Form.Radio value="external">{t('对外运营模式')}</Form.Radio>
-                <Form.Radio value="self">{t('自用模式')}</Form.Radio>
-                <Form.Radio value="demo">{t('演示站点模式')}</Form.Radio>
+                <Form.Radio value='external'>{t('对外运营模式')}</Form.Radio>
+                <Form.Radio value='self'>{t('自用模式')}</Form.Radio>
+                <Form.Radio value='demo'>{t('演示站点模式')}</Form.Radio>
               </Form.RadioGroup>
             </Form.Section>
           </Form>
 
           <div style={{ marginTop: '24px', textAlign: 'right' }}>
-            <Button type="primary" onClick={onSubmit} loading={loading}>
+            <Button type='primary' onClick={onSubmit} loading={loading}>
               {t('初始化系统')}
             </Button>
           </div>
@@ -233,12 +275,18 @@ const Setup = () => {
         <div style={{ padding: '8px 0' }}>
           <Title heading={6}>{t('对外运营模式')}</Title>
           <p>{t('默认模式，适用于为多个用户提供服务的场景。')}</p>
-          <p>{t('此模式下，系统将计算每次调用的用量，您需要对每个模型都设置价格，如果没有设置价格，用户将无法使用该模型。')}</p>
+          <p>
+            {t(
+              '此模式下，系统将计算每次调用的用量，您需要对每个模型都设置价格，如果没有设置价格，用户将无法使用该模型。',
+            )}
+          </p>
         </div>
         <div style={{ padding: '8px 0' }}>
           <Title heading={6}>{t('自用模式')}</Title>
           <p>{t('适用于个人使用的场景。')}</p>
-          <p>{t('不需要设置模型价格，系统将弱化用量计算，您可专注于使用模型。')}</p>
+          <p>
+            {t('不需要设置模型价格，系统将弱化用量计算，您可专注于使用模型。')}
+          </p>
         </div>
         <div style={{ padding: '8px 0' }}>
           <Title heading={6}>{t('演示站点模式')}</Title>