tailchat/server/admin/src/client/routes/system/index.tsx

import React, { useEffect } from 'react';
import { request } from '../../request';
import {
  useAsyncRequest,
  useEditValue,
  Button,
  Input,
  Spin,
  Message,
  Form,
  Upload,
  useTranslation,
} from 'tushan';
import { IconCheck, IconClose, IconDelete } from 'tushan/icon';
import { TailchatImage } from '../../components/TailchatImage';

/**
 * Tailchat 系统设置
 */
export const SystemConfig: React.FC = React.memo(() => {
  const [{ value: config = {}, loading, error }, fetchConfig] = useAsyncRequest(
    async () => {
      const { data } = await request.get('/config/client');

      return data.config ?? {};
    }
  );
  const { t } = useTranslation();

  useEffect(() => {
    fetchConfig();
  }, []);

  const [serverName, setServerName, saveServerName] = useEditValue(
    config?.serverName,
    async (val) => {
      if (val === config?.serverName) {
        return;
      }

      try {
        await request.patch('/config/client', {
          key: 'serverName',
          value: val,
        });
        fetchConfig();
        Message.success('Success');
      } catch (err) {
        console.log(err);
        Message.error(String(err));
      }
    }
  );

  const [{}, handleChangeServerEntryImage] = useAsyncRequest(
    async (file: File | null) => {
      if (file) {
        const formdata = new FormData();
        formdata.append('file', file);

        const { data } = await request.put('/file/upload', formdata, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });

        const fileInfo = data.files[0];

        if (!fileInfo) {
          throw new Error('not get file');
        }

        const url = fileInfo.url;
        await request.patch('/config/client', {
          key: 'serverEntryImage',
          value: url,
        });
        fetchConfig();
      } else {
        // delete
        await request.patch('/config/client', {
          key: 'serverEntryImage',
          value: '',
        });
        fetchConfig();
      }
    }
  );

  if (loading) {
    return <Spin />;
  }

  if (error) {
    console.log('error', error);
    return <div>{String(error)}</div>;
  }

  return (
    <Form>
      <Form.Item label={t('custom.config.uploadFileLimit')}>
        {config.uploadFileLimit}
      </Form.Item>

      <Form.Item label={t('custom.config.emailVerification')}>
        {config.emailVerification ? <IconCheck /> : <IconClose />}
      </Form.Item>

      <Form.Item label={t('custom.config.allowGuestLogin')}>
        {!config.disableGuestLogin ? <IconCheck /> : <IconClose />}
      </Form.Item>

      <Form.Item label={t('custom.config.allowUserRegister')}>
        {!config.disableUserRegister ? <IconCheck /> : <IconClose />}
      </Form.Item>

      <Form.Item label={t('custom.config.serverName')}>
        <Input
          value={serverName}
          onChange={(val) => setServerName(val)}
          onBlur={() => saveServerName()}
          placeholder="Tailchat"
        />
      </Form.Item>

      <Form.Item label={t('custom.config.serverEntryImage')}>
        <div>
          {config?.serverEntryImage ? (
            <div style={{ marginTop: 10 }}>
              <div>
                <TailchatImage
                  style={{
                    maxWidth: '100%',
                    maxHeight: 360,
                    overflow: 'hidden',
                    marginBottom: 4,
                  }}
                  src={config?.serverEntryImage}
                />
              </div>

              <Button
                type="primary"
                icon={<IconDelete />}
                onClick={() => handleChangeServerEntryImage(null)}
              >
                Delete
              </Button>
            </div>
          ) : (
            <Upload
              onChange={(_, file) => {
                handleChangeServerEntryImage(file.originFile);
              }}
            />
          )}
        </div>
      </Form.Item>
    </Form>
  );
});
SystemConfig.displayName = 'SystemConfig';