rollback EditUser.js

web/src/pages/User/EditUser.js

@@ -1,12 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Form, Header, Segment } from 'semantic-ui-react';
 import { useParams, useNavigate } from 'react-router-dom';
-import {API, isMobile, showError, showSuccess} from '../../helpers';
+import { API, showError, showSuccess } from '../../helpers';
 import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
-import Title from "@douyinfe/semi-ui/lib/es/typography/title";
-import {SideSheet, Space} from "@douyinfe/semi-ui";
 
-const EditUser = (props) => {
+const EditUser = () => {
   const params = useParams();
   const userId = params.id;
   const [loading, setLoading] = useState(true);
@@ -22,7 +20,7 @@ const EditUser = (props) => {
   });
   const [groupOptions, setGroupOptions] = useState([]);
   const { username, display_name, password, github_id, wechat_id, email, quota, group } =
-    inputs;
+      inputs;
   const handleInputChange = (e, { name, value }) => {
     setInputs((inputs) => ({ ...inputs, [name]: value }));
   };
@@ -85,124 +83,107 @@ const EditUser = (props) => {
   };
 
   return (
-    <>
-      <SideSheet
-          placement={'left'}
-          title={<Title level={3}>更新用户信息</Title>}
-          headerStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
-          bodyStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
-          visible={props.visiable}
-          footer={
-            <div style={{display: 'flex', justifyContent: 'flex-end'}}>
-              <Space>
-                <Button theme='solid' size={'large'} onClick={submit}>提交</Button>
-                <Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
-              </Space>
-            </div>
-          }
-          closeIcon={null}
-          onCancel={() => handleCancel()}
-          width={isMobile() ? '100%' : 600}
-      >
-        <Form autoComplete='new-password'>
-          <Form.Field>
-            <Form.Input
-                label='用户名'
-                name='username'
-                placeholder={'请输入新的用户名'}
-                onChange={handleInputChange}
-                value={username}
-                autoComplete='new-password'
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-                label='密码'
-                name='password'
-                type={'password'}
-                placeholder={'请输入新的密码，最短 8 位'}
-                onChange={handleInputChange}
-                value={password}
-                autoComplete='new-password'
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-                label='显示名称'
-                name='display_name'
-                placeholder={'请输入新的显示名称'}
-                onChange={handleInputChange}
-                value={display_name}
-                autoComplete='new-password'
-            />
-          </Form.Field>
-          {
-              userId && <>
-                <Form.Field>
-                  <Form.Dropdown
-                      label='分组'
-                      placeholder={'请选择分组'}
-                      name='group'
-                      fluid
-                      search
-                      selection
-                      allowAdditions
-                      additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
-                      onChange={handleInputChange}
-                      value={inputs.group}
-                      autoComplete='new-password'
-                      options={groupOptions}
-                  />
-                </Form.Field>
-                <Form.Field>
-                  <Form.Input
-                      label={`剩余额度${renderQuotaWithPrompt(quota)}`}
-                      name='quota'
-                      placeholder={'请输入新的剩余额度'}
-                      onChange={handleInputChange}
-                      value={quota}
-                      type={'number'}
-                      autoComplete='new-password'
-                  />
-                </Form.Field>
-              </>
-          }
-          <Form.Field>
-            <Form.Input
-                label='已绑定的 GitHub 账户'
-                name='github_id'
-                value={github_id}
-                autoComplete='new-password'
-                placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
-                readOnly
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-                label='已绑定的微信账户'
-                name='wechat_id'
-                value={wechat_id}
-                autoComplete='new-password'
-                placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
-                readOnly
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-                label='已绑定的邮箱账户'
-                name='email'
-                value={email}
-                autoComplete='new-password'
-                placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
-                readOnly
-            />
-          </Form.Field>
-          <Button onClick={handleCancel}>取消</Button>
-          <Button positive onClick={submit}>提交</Button>
-        </Form>
-
-      </SideSheet>
-    </>
+      <>
+        <Segment loading={loading}>
+          <Header as='h3'>更新用户信息</Header>
+          <Form autoComplete='new-password'>
+            <Form.Field>
+              <Form.Input
+                  label='用户名'
+                  name='username'
+                  placeholder={'请输入新的用户名'}
+                  onChange={handleInputChange}
+                  value={username}
+                  autoComplete='new-password'
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                  label='密码'
+                  name='password'
+                  type={'password'}
+                  placeholder={'请输入新的密码，最短 8 位'}
+                  onChange={handleInputChange}
+                  value={password}
+                  autoComplete='new-password'
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                  label='显示名称'
+                  name='display_name'
+                  placeholder={'请输入新的显示名称'}
+                  onChange={handleInputChange}
+                  value={display_name}
+                  autoComplete='new-password'
+              />
+            </Form.Field>
+            {
+                userId && <>
+                  <Form.Field>
+                    <Form.Dropdown
+                        label='分组'
+                        placeholder={'请选择分组'}
+                        name='group'
+                        fluid
+                        search
+                        selection
+                        allowAdditions
+                        additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
+                        onChange={handleInputChange}
+                        value={inputs.group}
+                        autoComplete='new-password'
+                        options={groupOptions}
+                    />
+                  </Form.Field>
+                  <Form.Field>
+                    <Form.Input
+                        label={`剩余额度${renderQuotaWithPrompt(quota)}`}
+                        name='quota'
+                        placeholder={'请输入新的剩余额度'}
+                        onChange={handleInputChange}
+                        value={quota}
+                        type={'number'}
+                        autoComplete='new-password'
+                    />
+                  </Form.Field>
+                </>
+            }
+            <Form.Field>
+              <Form.Input
+                  label='已绑定的 GitHub 账户'
+                  name='github_id'
+                  value={github_id}
+                  autoComplete='new-password'
+                  placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+                  readOnly
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                  label='已绑定的微信账户'
+                  name='wechat_id'
+                  value={wechat_id}
+                  autoComplete='new-password'
+                  placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+                  readOnly
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                  label='已绑定的邮箱账户'
+                  name='email'
+                  value={email}
+                  autoComplete='new-password'
+                  placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+                  readOnly
+              />
+            </Form.Field>
+            <Button onClick={handleCancel}>取消</Button>
+            <Button positive onClick={submit}>提交</Button>
+          </Form>
+        </Segment>
+      </>
   );
 };