♻️refactor: Modernize edit and add user components with unified design system

- Refactor EditRedemption.js with card-based layout and modern UI components
- Refactor EditUser.js with three-section card layout (basic info, permissions, bindings)
- Refactor AddUser.js with modern card design and improved user experience
- Replace inline styles with Tailwind CSS 3 classes throughout all components
- Add semantic icons (IconUser, IconKey, IconGift, IconCreditCard, etc.) for better UX
- Implement unified header design with colored tags and consistent typography
- Replace deprecated Title imports with destructured Typography components
- Add proper internationalization support with useTranslation hook
- Standardize form layouts with consistent spacing, rounded corners, and shadows
- Improve button styling with rounded design and loading states
- Fix IconTicket import error by replacing with existing IconGift
- Enhance modal designs with modern styling and icon integration
- Ensure responsive design consistency across all edit/add components

This update brings all user management interfaces in line with the modern
design system established in EditToken.js, providing a cohesive and
professional user experience.

web/src/i18n/locales/en.json

@@ -1171,8 +1171,7 @@
   "当前查看的分组为：{{group}}，倍率为：{{ratio}}": "Current group: {{group}}, ratio: {{ratio}}",
   "添加用户": "Add user",
   "角色": "Role",
-  "已绑定的GitHub账户": "已绑定的GitHub账户",
+  "已绑定的 Telegram 账户": "Bound Telegram account",
-  "已绑定的Telegram账户": "已绑定的Telegram账户",
   "新额度": "New quota",
   "需要添加的额度（支持负数）": "Need to add quota (supports negative numbers)",
   "此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改": "Read-only, user's personal settings, and cannot be modified directly",
@@ -1441,5 +1440,14 @@
   "收益": "Earnings",
   "无邀请人": "No Inviter",
   "邀请人": "Inviter",
-  "用户管理页面，可以查看和管理所有注册用户的信息、权限和状态。": "User management page, you can view and manage all registered user information, permissions, and status."
+  "用户管理页面，可以查看和管理所有注册用户的信息、权限和状态。": "User management page, you can view and manage all registered user information, permissions, and status.",
+  "设置兑换码的基本信息": "Set redemption code basic information",
+  "设置兑换码的额度和数量": "Set redemption code quota and quantity",
+  "编辑用户": "Edit User",
+  "权限设置": "Permission Settings",
+  "用户的基本账户信息": "User basic account information",
+  "用户分组和额度管理": "User Group and Quota Management",
+  "绑定信息": "Binding Information",
+  "第三方账户绑定状态（只读）": "Third-party account binding status (read-only)",
+  "已绑定的 OIDC 账户": "Bound OIDC accounts"
 }

web/src/pages/Redemption/EditRedemption.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
   API,
@@ -9,7 +8,6 @@ import {
   showSuccess,
 } from '../../helpers';
 import {
-  getQuotaPerUnit,
   renderQuota,
   renderQuotaWithPrompt,
 } from '../../helpers/render';
@@ -22,17 +20,24 @@ import {
   Space,
   Spin,
   Typography,
+  Card,
+  Tag,
 } from '@douyinfe/semi-ui';
-import Title from '@douyinfe/semi-ui/lib/es/typography/title';
+import {
-import { Divider } from 'semantic-ui-react';
+  IconCreditCard,
+  IconSave,
+  IconClose,
+  IconPlusCircle,
+  IconGift,
+} from '@douyinfe/semi-icons';
+
+const { Text, Title } = Typography;
 
 const EditRedemption = (props) => {
   const { t } = useTranslation();
   const isEdit = props.editingRedemption.id !== undefined;
   const [loading, setLoading] = useState(isEdit);
 
-  const params = useParams();
-  const navigate = useNavigate();
   const originInputs = {
     name: '',
     quota: 100000,
@@ -134,24 +139,46 @@ const EditRedemption = (props) => {
       <SideSheet
         placement={isEdit ? 'right' : 'left'}
         title={
-          <Title level={3}>
+          <Space>
-            {isEdit ? t('更新兑换码信息') : t('创建新的兑换码')}
+            {isEdit ?
-          </Title>
+              <Tag color="blue" shape="circle">{t('更新')}</Tag> :
+              <Tag color="green" shape="circle">{t('新建')}</Tag>
+            }
+            <Title heading={4} className="m-0">
+              {isEdit ? t('更新兑换码信息') : t('创建新的兑换码')}
+            </Title>
+          </Space>
         }
-        headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
+        headerStyle={{
-        bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
+          borderBottom: '1px solid var(--semi-color-border)',
+          padding: '24px'
+        }}
+        bodyStyle={{
+          backgroundColor: 'var(--semi-color-bg-0)',
+          padding: '0'
+        }}
         visible={props.visiable}
+        width={isMobile() ? '100%' : 600}
         footer={
-          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <div className="flex justify-end bg-white">
             <Space>
-              <Button theme='solid' size={'large'} onClick={submit}>
+              <Button
+                theme="solid"
+                size="large"
+                className="!rounded-full"
+                onClick={submit}
+                icon={<IconSave />}
+                loading={loading}
+              >
                 {t('提交')}
               </Button>
               <Button
-                theme='solid'
+                theme="light"
-                size={'large'}
+                size="large"
-                type={'tertiary'}
+                className="!rounded-full"
+                type="primary"
                 onClick={handleCancel}
+                icon={<IconClose />}
               >
                 {t('取消')}
               </Button>
@@ -160,59 +187,92 @@ const EditRedemption = (props) => {
         }
         closeIcon={null}
         onCancel={() => handleCancel()}
-        width={isMobile() ? '100%' : 600}
       >
         <Spin spinning={loading}>
-          <Input
+          <div className="p-6">
-            style={{ marginTop: 20 }}
+            <Card className="!rounded-2xl shadow-sm border-0 mb-6">
-            label={t('名称')}
+              <div className="flex items-center mb-4">
-            name='name'
+                <div className="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center mr-4">
-            placeholder={t('请输入名称')}
+                  <IconGift size="large" className="text-blue-500" />
-            onChange={(value) => handleInputChange('name', value)}
+                </div>
-            value={name}
+                <div>
-            autoComplete='new-password'
+                  <Text className="text-lg font-medium">{t('基本信息')}</Text>
-            required={!isEdit}
+                  <div className="text-gray-500 text-sm">{t('设置兑换码的基本信息')}</div>
-          />
+                </div>
-          <Divider />
+              </div>
-          <div style={{ marginTop: 20 }}>
+
-            <Typography.Text>
+              <div className="space-y-4">
-              {t('额度') + renderQuotaWithPrompt(quota)}
+                <div>
-            </Typography.Text>
+                  <Text strong className="block mb-2">{t('名称')}</Text>
+                  <Input
+                    placeholder={t('请输入名称')}
+                    onChange={(value) => handleInputChange('name', value)}
+                    value={name}
+                    autoComplete="new-password"
+                    size="large"
+                    className="!rounded-lg"
+                    showClear
+                    required={!isEdit}
+                  />
+                </div>
+              </div>
+            </Card>
+
+            <Card className="!rounded-2xl shadow-sm border-0">
+              <div className="flex items-center mb-4">
+                <div className="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center mr-4">
+                  <IconCreditCard size="large" className="text-green-500" />
+                </div>
+                <div>
+                  <Text className="text-lg font-medium">{t('额度设置')}</Text>
+                  <div className="text-gray-500 text-sm">{t('设置兑换码的额度和数量')}</div>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <div>
+                  <div className="flex justify-between mb-2">
+                    <Text strong>{t('额度')}</Text>
+                    <Text type="tertiary">{renderQuotaWithPrompt(quota)}</Text>
+                  </div>
+                  <AutoComplete
+                    placeholder={t('请输入额度')}
+                    onChange={(value) => handleInputChange('quota', value)}
+                    value={quota}
+                    autoComplete="new-password"
+                    type="number"
+                    size="large"
+                    className="w-full !rounded-lg"
+                    prefix={<IconCreditCard />}
+                    data={[
+                      { value: 500000, label: '1$' },
+                      { value: 5000000, label: '10$' },
+                      { value: 25000000, label: '50$' },
+                      { value: 50000000, label: '100$' },
+                      { value: 250000000, label: '500$' },
+                      { value: 500000000, label: '1000$' },
+                    ]}
+                  />
+                </div>
+
+                {!isEdit && (
+                  <div>
+                    <Text strong className="block mb-2">{t('生成数量')}</Text>
+                    <Input
+                      placeholder={t('请输入生成数量')}
+                      onChange={(value) => handleInputChange('count', value)}
+                      value={count}
+                      autoComplete="new-password"
+                      type="number"
+                      size="large"
+                      className="!rounded-lg"
+                      prefix={<IconPlusCircle />}
+                    />
+                  </div>
+                )}
+              </div>
+            </Card>
           </div>
-          <AutoComplete
-            style={{ marginTop: 8 }}
-            name='quota'
-            placeholder={t('请输入额度')}
-            onChange={(value) => handleInputChange('quota', value)}
-            value={quota}
-            autoComplete='new-password'
-            type='number'
-            position={'bottom'}
-            data={[
-              { value: 500000, label: '1$' },
-              { value: 5000000, label: '10$' },
-              { value: 25000000, label: '50$' },
-              { value: 50000000, label: '100$' },
-              { value: 250000000, label: '500$' },
-              { value: 500000000, label: '1000$' },
-            ]}
-          />
-          {!isEdit && (
-            <>
-              <Divider />
-              <Typography.Text>{t('生成数量')}</Typography.Text>
-              <Input
-                style={{ marginTop: 8 }}
-                label={t('生成数量')}
-                name='count'
-                placeholder={t('请输入生成数量')}
-                onChange={(value) => handleInputChange('count', value)}
-                value={count}
-                autoComplete='new-password'
-                type='number'
-              />
-            </>
-          )}
         </Spin>
       </SideSheet>
     </>

web/src/pages/User/AddUser.js

@@ -1,9 +1,28 @@
 import React, { useState } from 'react';
 import { API, isMobile, showError, showSuccess } from '../../helpers';
-import Title from '@douyinfe/semi-ui/lib/es/typography/title';
+import {
-import { Button, Input, SideSheet, Space, Spin } from '@douyinfe/semi-ui';
+  Button,
+  Input,
+  SideSheet,
+  Space,
+  Spin,
+  Typography,
+  Card,
+  Tag
+} from '@douyinfe/semi-ui';
+import {
+  IconUser,
+  IconSave,
+  IconClose,
+  IconKey,
+  IconUserAdd,
+} from '@douyinfe/semi-icons';
+import { useTranslation } from 'react-i18next';
+
+const { Text, Title } = Typography;
 
 const AddUser = (props) => {
+  const { t } = useTranslation();
   const originInputs = {
     username: '',
     display_name: '',
@@ -21,13 +40,13 @@ const AddUser = (props) => {
     setLoading(true);
     if (inputs.username === '' || inputs.password === '') {
       setLoading(false);
-      showError('用户名和密码不能为空！');
+      showError(t('用户名和密码不能为空！'));
       return;
     }
     const res = await API.post(`/api/user/`, inputs);
     const { success, message } = res.data;
     if (success) {
-      showSuccess('用户账户创建成功！');
+      showSuccess(t('用户账户创建成功！'));
       setInputs(originInputs);
       props.refresh();
       props.handleClose();
@@ -45,63 +64,113 @@ const AddUser = (props) => {
     <>
       <SideSheet
         placement={'left'}
-        title={<Title level={3}>{'添加用户'}</Title>}
+        title={
-        headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
+          <Space>
-        bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
+            <Tag color="green" shape="circle">{t('新建')}</Tag>
+            <Title heading={4} className="m-0">
+              {t('添加用户')}
+            </Title>
+          </Space>
+        }
+        headerStyle={{
+          borderBottom: '1px solid var(--semi-color-border)',
+          padding: '24px'
+        }}
+        bodyStyle={{
+          backgroundColor: 'var(--semi-color-bg-0)',
+          padding: '0'
+        }}
         visible={props.visible}
+        width={isMobile() ? '100%' : 600}
         footer={
-          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <div className="flex justify-end bg-white">
             <Space>
-              <Button theme='solid' size={'large'} onClick={submit}>
+              <Button
-                提交
+                theme="solid"
+                size="large"
+                className="!rounded-full"
+                onClick={submit}
+                icon={<IconSave />}
+                loading={loading}
+              >
+                {t('提交')}
               </Button>
               <Button
-                theme='solid'
+                theme="light"
-                size={'large'}
+                size="large"
-                type={'tertiary'}
+                className="!rounded-full"
+                type="primary"
                 onClick={handleCancel}
+                icon={<IconClose />}
               >
-                取消
+                {t('取消')}
               </Button>
             </Space>
           </div>
         }
         closeIcon={null}
         onCancel={() => handleCancel()}
-        width={isMobile() ? '100%' : 600}
       >
         <Spin spinning={loading}>
-          <Input
+          <div className="p-6">
-            style={{ marginTop: 20 }}
+            <Card className="!rounded-2xl shadow-sm border-0">
-            label='用户名'
+              <div className="flex items-center mb-4">
-            name='username'
+                <div className="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center mr-4">
-            addonBefore={'用户名'}
+                  <IconUserAdd size="large" className="text-green-500" />
-            placeholder={'请输入用户名'}
+                </div>
-            onChange={(value) => handleInputChange('username', value)}
+                <div>
-            value={username}
+                  <Text className="text-lg font-medium">{t('用户信息')}</Text>
-            autoComplete='off'
+                  <div className="text-gray-500 text-sm">{t('创建新用户账户')}</div>
-          />
+                </div>
-          <Input
+              </div>
-            style={{ marginTop: 20 }}
+
-            addonBefore={'显示名'}
+              <div className="space-y-4">
-            label='显示名称'
+                <div>
-            name='display_name'
+                  <Text strong className="block mb-2">{t('用户名')}</Text>
-            autoComplete='off'
+                  <Input
-            placeholder={'请输入显示名称'}
+                    placeholder={t('请输入用户名')}
-            onChange={(value) => handleInputChange('display_name', value)}
+                    onChange={(value) => handleInputChange('username', value)}
-            value={display_name}
+                    value={username}
-          />
+                    autoComplete="off"
-          <Input
+                    size="large"
-            style={{ marginTop: 20 }}
+                    className="!rounded-lg"
-            label='密 码'
+                    prefix={<IconUser />}
-            name='password'
+                    showClear
-            type={'password'}
+                    required
-            addonBefore={'密码'}
+                  />
-            placeholder={'请输入密码'}
+                </div>
-            onChange={(value) => handleInputChange('password', value)}
+
-            value={password}
+                <div>
-            autoComplete='off'
+                  <Text strong className="block mb-2">{t('显示名称')}</Text>
-          />
+                  <Input
+                    placeholder={t('请输入显示名称')}
+                    onChange={(value) => handleInputChange('display_name', value)}
+                    value={display_name}
+                    autoComplete="off"
+                    size="large"
+                    className="!rounded-lg"
+                    prefix={<IconUser />}
+                    showClear
+                  />
+                </div>
+
+                <div>
+                  <Text strong className="block mb-2">{t('密码')}</Text>
+                  <Input
+                    type="password"
+                    placeholder={t('请输入密码')}
+                    onChange={(value) => handleInputChange('password', value)}
+                    value={password}
+                    autoComplete="off"
+                    size="large"
+                    className="!rounded-lg"
+                    prefix={<IconKey />}
+                    required
+                  />
+                </div>
+              </div>
+            </Card>
+          </div>
         </Spin>
       </SideSheet>
     </>

web/src/pages/User/EditUser.js

@@ -2,10 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { API, isMobile, showError, showSuccess } from '../../helpers';
 import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
-import Title from '@douyinfe/semi-ui/lib/es/typography/title';
 import {
   Button,
-  Divider,
   Input,
   Modal,
   Select,
@@ -13,9 +11,23 @@ import {
   Space,
   Spin,
   Typography,
+  Card,
+  Tag,
 } from '@douyinfe/semi-ui';
+import {
+  IconUser,
+  IconSave,
+  IconClose,
+  IconKey,
+  IconCreditCard,
+  IconLink,
+  IconUserGroup,
+  IconPlus,
+} from '@douyinfe/semi-icons';
 import { useTranslation } from 'react-i18next';
 
+const { Text, Title } = Typography;
+
 const EditUser = (props) => {
   const userId = props.editingUser.id;
   const [loading, setLoading] = useState(true);
@@ -129,21 +141,44 @@ const EditUser = (props) => {
     <>
       <SideSheet
         placement={'right'}
-        title={<Title level={3}>{t('编辑用户')}</Title>}
+        title={
-        headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
+          <Space>
-        bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
+            <Tag color="blue" shape="circle">{t('编辑')}</Tag>
+            <Title heading={4} className="m-0">
+              {t('编辑用户')}
+            </Title>
+          </Space>
+        }
+        headerStyle={{
+          borderBottom: '1px solid var(--semi-color-border)',
+          padding: '24px'
+        }}
+        bodyStyle={{
+          backgroundColor: 'var(--semi-color-bg-0)',
+          padding: '0'
+        }}
         visible={props.visible}
+        width={isMobile() ? '100%' : 600}
         footer={
-          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <div className="flex justify-end bg-white">
             <Space>
-              <Button theme='solid' size={'large'} onClick={submit}>
+              <Button
+                theme="solid"
+                size="large"
+                className="!rounded-full"
+                onClick={submit}
+                icon={<IconSave />}
+                loading={loading}
+              >
                 {t('提交')}
               </Button>
               <Button
-                theme='solid'
+                theme="light"
-                size={'large'}
+                size="large"
-                type={'tertiary'}
+                className="!rounded-full"
+                type="primary"
                 onClick={handleCancel}
+                icon={<IconClose />}
               >
                 {t('取消')}
               </Button>
@@ -152,141 +187,211 @@ const EditUser = (props) => {
         }
         closeIcon={null}
         onCancel={() => handleCancel()}
-        width={isMobile() ? '100%' : 600}
       >
         <Spin spinning={loading}>
-          <div style={{ marginTop: 20 }}>
+          <div className="p-6">
-            <Typography.Text>{t('用户名')}</Typography.Text>
+            <Card className="!rounded-2xl shadow-sm border-0 mb-6">
-          </div>
+              <div className="flex items-center mb-4">
-          <Input
+                <div className="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center mr-4">
-            label={t('用户名')}
+                  <IconUser size="large" className="text-blue-500" />
-            name='username'
+                </div>
-            placeholder={t('请输入新的用户名')}
+                <div>
-            onChange={(value) => handleInputChange('username', value)}
+                  <Text className="text-lg font-medium">{t('基本信息')}</Text>
-            value={username}
+                  <div className="text-gray-500 text-sm">{t('用户的基本账户信息')}</div>
-            autoComplete='new-password'
+                </div>
-          />
-          <div style={{ marginTop: 20 }}>
-            <Typography.Text>{t('密码')}</Typography.Text>
-          </div>
-          <Input
-            label={t('密码')}
-            name='password'
-            type={'password'}
-            placeholder={t('请输入新的密码，最短 8 位')}
-            onChange={(value) => handleInputChange('password', value)}
-            value={password}
-            autoComplete='new-password'
-          />
-          <div style={{ marginTop: 20 }}>
-            <Typography.Text>{t('显示名称')}</Typography.Text>
-          </div>
-          <Input
-            label={t('显示名称')}
-            name='display_name'
-            placeholder={t('请输入新的显示名称')}
-            onChange={(value) => handleInputChange('display_name', value)}
-            value={display_name}
-            autoComplete='new-password'
-          />
-          {userId && (
-            <>
-              <div style={{ marginTop: 20 }}>
-                <Typography.Text>{t('分组')}</Typography.Text>
               </div>
-              <Select
+
-                placeholder={t('请选择分组')}
+              <div className="space-y-4">
-                name='group'
+                <div>
-                fluid
+                  <Text strong className="block mb-2">{t('用户名')}</Text>
-                search
+                  <Input
-                selection
+                    placeholder={t('请输入新的用户名')}
-                allowAdditions
+                    onChange={(value) => handleInputChange('username', value)}
-                additionLabel={t(
+                    value={username}
-                  '请在系统设置页面编辑分组倍率以添加新的分组：',
+                    autoComplete="new-password"
-                )}
+                    size="large"
-                onChange={(value) => handleInputChange('group', value)}
+                    className="!rounded-lg"
-                value={inputs.group}
+                    showClear
-                autoComplete='new-password'
+                  />
-                optionList={groupOptions}
+                </div>
-              />
+
-              <div style={{ marginTop: 20 }}>
+                <div>
-                <Typography.Text>{`${t('剩余额度')}${renderQuotaWithPrompt(quota)}`}</Typography.Text>
+                  <Text strong className="block mb-2">{t('密码')}</Text>
+                  <Input
+                    type="password"
+                    placeholder={t('请输入新的密码，最短 8 位')}
+                    onChange={(value) => handleInputChange('password', value)}
+                    value={password}
+                    autoComplete="new-password"
+                    size="large"
+                    className="!rounded-lg"
+                    prefix={<IconKey />}
+                  />
+                </div>
+
+                <div>
+                  <Text strong className="block mb-2">{t('显示名称')}</Text>
+                  <Input
+                    placeholder={t('请输入新的显示名称')}
+                    onChange={(value) => handleInputChange('display_name', value)}
+                    value={display_name}
+                    autoComplete="new-password"
+                    size="large"
+                    className="!rounded-lg"
+                    showClear
+                  />
+                </div>
               </div>
-              <Space>
+            </Card>
-                <Input
+
-                  name='quota'
+            {userId && (
-                  placeholder={t('请输入新的剩余额度')}
+              <Card className="!rounded-2xl shadow-sm border-0 mb-6">
-                  onChange={(value) => handleInputChange('quota', value)}
+                <div className="flex items-center mb-4">
-                  value={quota}
+                  <div className="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center mr-4">
-                  type={'number'}
+                    <IconUserGroup size="large" className="text-green-500" />
-                  autoComplete='new-password'
+                  </div>
-                />
+                  <div>
-                <Button onClick={openAddQuotaModal}>{t('添加额度')}</Button>
+                    <Text className="text-lg font-medium">{t('权限设置')}</Text>
-              </Space>
+                    <div className="text-gray-500 text-sm">{t('用户分组和额度管理')}</div>
-            </>
+                  </div>
-          )}
+                </div>
-          <Divider style={{ marginTop: 20 }}>{t('以下信息不可修改')}</Divider>
+
-          <div style={{ marginTop: 20 }}>
+                <div className="space-y-4">
-            <Typography.Text>{t('已绑定的 GitHub 账户')}</Typography.Text>
+                  <div>
-          </div>
+                    <Text strong className="block mb-2">{t('分组')}</Text>
-          <Input
+                    <Select
-            name='github_id'
+                      placeholder={t('请选择分组')}
-            value={github_id}
+                      search
-            autoComplete='new-password'
+                      allowAdditions
-            placeholder={t(
+                      additionLabel={t(
-              '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
+                        '请在系统设置页面编辑分组倍率以添加新的分组：',
+                      )}
+                      onChange={(value) => handleInputChange('group', value)}
+                      value={inputs.group}
+                      autoComplete="new-password"
+                      optionList={groupOptions}
+                      size="large"
+                      className="w-full !rounded-lg"
+                      prefix={<IconUserGroup />}
+                    />
+                  </div>
+
+                  <div>
+                    <div className="flex justify-between mb-2">
+                      <Text strong>{t('剩余额度')}</Text>
+                      <Text type="tertiary">{renderQuotaWithPrompt(quota)}</Text>
+                    </div>
+                    <div className="flex gap-2">
+                      <Input
+                        placeholder={t('请输入新的剩余额度')}
+                        onChange={(value) => handleInputChange('quota', value)}
+                        value={quota}
+                        type="number"
+                        autoComplete="new-password"
+                        size="large"
+                        className="flex-1 !rounded-lg"
+                        prefix={<IconCreditCard />}
+                      />
+                      <Button
+                        onClick={openAddQuotaModal}
+                        size="large"
+                        className="!rounded-lg"
+                        icon={<IconPlus />}
+                      >
+                        {t('添加额度')}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </Card>
             )}
-            readonly
+
-          />
+            <Card className="!rounded-2xl shadow-sm border-0">
-          <div style={{ marginTop: 20 }}>
+              <div className="flex items-center mb-4">
-            <Typography.Text>{t('已绑定的 OIDC 账户')}</Typography.Text>
+                <div className="w-10 h-10 rounded-full bg-orange-50 flex items-center justify-center mr-4">
+                  <IconLink size="large" className="text-orange-500" />
+                </div>
+                <div>
+                  <Text className="text-lg font-medium">{t('绑定信息')}</Text>
+                  <div className="text-gray-500 text-sm">{t('第三方账户绑定状态（只读）')}</div>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <div>
+                  <Text strong className="block mb-2">{t('已绑定的 GitHub 账户')}</Text>
+                  <Input
+                    value={github_id}
+                    autoComplete="new-password"
+                    placeholder={t(
+                      '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
+                    )}
+                    readonly
+                    size="large"
+                    className="!rounded-lg"
+                  />
+                </div>
+
+                <div>
+                  <Text strong className="block mb-2">{t('已绑定的 OIDC 账户')}</Text>
+                  <Input
+                    value={oidc_id}
+                    placeholder={t(
+                      '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
+                    )}
+                    readonly
+                    size="large"
+                    className="!rounded-lg"
+                  />
+                </div>
+
+                <div>
+                  <Text strong className="block mb-2">{t('已绑定的微信账户')}</Text>
+                  <Input
+                    value={wechat_id}
+                    autoComplete="new-password"
+                    placeholder={t(
+                      '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
+                    )}
+                    readonly
+                    size="large"
+                    className="!rounded-lg"
+                  />
+                </div>
+
+                <div>
+                  <Text strong className="block mb-2">{t('已绑定的邮箱账户')}</Text>
+                  <Input
+                    value={email}
+                    autoComplete="new-password"
+                    placeholder={t(
+                      '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
+                    )}
+                    readonly
+                    size="large"
+                    className="!rounded-lg"
+                  />
+                </div>
+
+                <div>
+                  <Text strong className="block mb-2">{t('已绑定的 Telegram 账户')}</Text>
+                  <Input
+                    value={telegram_id}
+                    autoComplete="new-password"
+                    placeholder={t(
+                      '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
+                    )}
+                    readonly
+                    size="large"
+                    className="!rounded-lg"
+                  />
+                </div>
+              </div>
+            </Card>
           </div>
-          <Input
-            name='oidc_id'
-            value={oidc_id}
-            placeholder={t(
-              '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
-            )}
-            readonly
-          />
-          <div style={{ marginTop: 20 }}>
-            <Typography.Text>{t('已绑定的微信账户')}</Typography.Text>
-          </div>
-          <Input
-            name='wechat_id'
-            value={wechat_id}
-            autoComplete='new-password'
-            placeholder={t(
-              '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
-            )}
-            readonly
-          />
-          <div style={{ marginTop: 20 }}>
-            <Typography.Text>{t('已绑定的邮箱账户')}</Typography.Text>
-          </div>
-          <Input
-            name='email'
-            value={email}
-            autoComplete='new-password'
-            placeholder={t(
-              '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
-            )}
-            readonly
-          />
-          <div style={{ marginTop: 20 }}>
-            <Typography.Text>{t('已绑定的Telegram账户')}</Typography.Text>
-          </div>
-          <Input
-            name='telegram_id'
-            value={telegram_id}
-            autoComplete='new-password'
-            placeholder={t(
-              '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
-            )}
-            readonly
-          />
         </Spin>
       </SideSheet>
+
       <Modal
         centered={true}
         visible={addQuotaModalOpen}
@@ -296,19 +401,29 @@ const EditUser = (props) => {
         }}
         onCancel={() => setIsModalOpen(false)}
         closable={null}
+        title={
+          <div className="flex items-center">
+            <IconPlus className="mr-2" />
+            {t('添加额度')}
+          </div>
+        }
       >
-        <div style={{ marginTop: 20 }}>
+        <div className="mb-4">
-          <Typography.Text>{`${t('新额度')}${renderQuota(quota)} + ${renderQuota(addQuotaLocal)} = ${renderQuota(quota + parseInt(addQuotaLocal))}`}</Typography.Text>
+          <Text type="secondary" className="block mb-2">
+            {`${t('新额度')}${renderQuota(quota)} + ${renderQuota(addQuotaLocal)} = ${renderQuota(quota + parseInt(addQuotaLocal || 0))}`}
+          </Text>
         </div>
         <Input
-          name='addQuotaLocal'
           placeholder={t('需要添加的额度（支持负数）')}
           onChange={(value) => {
             setAddQuotaLocal(value);
           }}
           value={addQuotaLocal}
-          type={'number'}
+          type="number"
-          autoComplete='new-password'
+          autoComplete="new-password"
+          size="large"
+          className="!rounded-lg"
+          prefix={<IconCreditCard />}
         />
       </Modal>
     </>