完善个人中心

web/src/pages/Setting/index.js

@@ -1,55 +1,53 @@
 import React from 'react';
-import { Segment, Tab } from 'semantic-ui-react';
 import SystemSetting from '../../components/SystemSetting';
-import { isRoot } from '../../helpers';
+import {isRoot} from '../../helpers';
 import OtherSetting from '../../components/OtherSetting';
 import PersonalSetting from '../../components/PersonalSetting';
 import OperationSetting from '../../components/OperationSetting';
+import {Layout, TabPane, Tabs} from "@douyinfe/semi-ui";
 
 const Setting = () => {
-  let panes = [
-    {
-      menuItem: '个人设置',
-      render: () => (
-        <Tab.Pane attached={false}>
-          <PersonalSetting />
-        </Tab.Pane>
-      )
+    let panes = [
+        {
+            tab: '个人设置',
+            content: <PersonalSetting/>,
+            itemKey: '1'
+        }
+    ];
+
+    if (isRoot()) {
+        panes.push({
+            tab: '运营设置',
+            content: <OperationSetting/>,
+            itemKey: '2'
+        });
+        panes.push({
+            tab: '系统设置',
+            content: <SystemSetting/>,
+            itemKey: '3'
+        });
+        panes.push({
+            tab: '其他设置',
+            content: <OtherSetting/>,
+            itemKey: '4'
+        });
     }
-  ];
 
-  if (isRoot()) {
-    panes.push({
-      menuItem: '运营设置',
-      render: () => (
-        <Tab.Pane attached={false}>
-          <OperationSetting />
-        </Tab.Pane>
-      )
-    });
-    panes.push({
-      menuItem: '系统设置',
-      render: () => (
-        <Tab.Pane attached={false}>
-          <SystemSetting />
-        </Tab.Pane>
-      )
-    });
-    panes.push({
-      menuItem: '其他设置',
-      render: () => (
-        <Tab.Pane attached={false}>
-          <OtherSetting />
-        </Tab.Pane>
-      )
-    });
-  }
-
-  return (
-    <Segment>
-      <Tab menu={{ secondary: true, pointing: true }} panes={panes} />
-    </Segment>
-  );
+    return (
+        <div>
+            <Layout>
+                <Layout.Content>
+                    <Tabs type="line" defaultActiveKey="1">
+                        {panes.map(pane => (
+                            <TabPane itemKey={pane.itemKey} tab={pane.tab}>
+                                {pane.content}
+                            </TabPane>
+                        ))}
+                    </Tabs>
+                </Layout.Content>
+            </Layout>
+        </div>
+    );
 };
 
 export default Setting;

web/src/pages/User/EditUser.js

@@ -1,10 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Form, Header, Segment } from 'semantic-ui-react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { API, showError, showSuccess } from '../../helpers';
+import {API, isMobile, 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 = () => {
+const EditUser = (props) => {
   const params = useParams();
   const userId = params.id;
   const [loading, setLoading] = useState(true);
@@ -84,105 +86,122 @@ const EditUser = () => {
 
   return (
     <>
-      <Segment loading={loading}>
-        <Header as='h3'>更新用户信息</Header>
+      <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'
+                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'
+                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'
+                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>
-            </>
+              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
+                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
+                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
+                label='已绑定的邮箱账户'
+                name='email'
+                value={email}
+                autoComplete='new-password'
+                placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+                readOnly
             />
           </Form.Field>
           <Button onClick={handleCancel}>取消</Button>
           <Button positive onClick={submit}>提交</Button>
         </Form>
-      </Segment>
+
+      </SideSheet>
     </>
   );
 };