Skip to content

phsl / new-api

Go to a project
Commit 8e802565 by Apple\Apple
Options

♻️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.
parent cb21e756
Showing with 253 additions and 115 deletions
web/src/i18n/locales/en.json
......@@ -1171,8 +1171,7 @@
"当前查看的分组为：{{group}}，倍率为：{{ratio}}": "Current group: {{group}}, ratio: {{ratio}}",
"添加用户": "Add user",
"角色": "Role",
"已绑定的GitHub账户": "已绑定的GitHub账户",
"已绑定的Telegram账户": "已绑定的Telegram账户",
"已绑定的 Telegram 账户": "Bound Telegram account",
"新额度": "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"
}
\ No newline at end of file
web/src/pages/Redemption/EditRedemption.js
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 { Divider } from 'semantic-ui-react';
import {
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}>
{isEdit ? t('更新兑换码信息') : t('创建新的兑换码')}
</Title>
<Space>
{isEdit ?
<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)' }}
bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
headerStyle={{
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'
size={'large'}
type={'tertiary'}
theme="light"
size="large"
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
style={{ marginTop: 20 }}
label={t('名称')}
name='name'
placeholder={t('请输入名称')}
onChange={(value) => handleInputChange('name', value)}
value={name}
autoComplete='new-password'
required={!isEdit}
/>
<Divider />
<div style={{ marginTop: 20 }}>
<Typography.Text>
{t('额度') + renderQuotaWithPrompt(quota)}
</Typography.Text>
<div className="p-6">
<Card className="!rounded-2xl shadow-sm border-0 mb-6">
<div className="flex items-center mb-4">
<div className="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center mr-4">
<IconGift size="large" className="text-blue-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('名称')}</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
import React, { useState } from 'react';
import { API, isMobile, showError, showSuccess } from '../../helpers';
import Title from '@douyinfe/semi-ui/lib/es/typography/title';
import { Button, Input, SideSheet, Space, Spin } from '@douyinfe/semi-ui';
import {
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>}
headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
title={
<Space>
<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'
size={'large'}
type={'tertiary'}
theme="light"
size="large"
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
style={{ marginTop: 20 }}
label='用户名'
name='username'
addonBefore={'用户名'}
placeholder={'请输入用户名'}
onChange={(value) => handleInputChange('username', value)}
value={username}
autoComplete='off'
/>
<Input
style={{ marginTop: 20 }}
addonBefore={'显示名'}
label='显示名称'
name='display_name'
autoComplete='off'
placeholder={'请输入显示名称'}
onChange={(value) => handleInputChange('display_name', value)}
value={display_name}
/>
<Input
style={{ marginTop: 20 }}
label='密 码'
name='password'
type={'password'}
addonBefore={'密码'}
placeholder={'请输入密码'}
onChange={(value) => handleInputChange('password', value)}
value={password}
autoComplete='off'
/>
<div className="p-6">
<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">
<IconUserAdd 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>
<Text strong className="block mb-2">{t('用户名')}</Text>
<Input
placeholder={t('请输入用户名')}
onChange={(value) => handleInputChange('username', value)}
value={username}
autoComplete="off"
size="large"
className="!rounded-lg"
prefix={<IconUser />}
showClear
required
/>
</div>
<div>
<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>
</>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment