From eba661ad1e46c2ba3fc743584fa4cf8a504d70ed Mon Sep 17 00:00:00 2001 From: "Apple\\Apple" Date: Fri, 23 May 2025 17:33:32 +0800 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8Frefactor:=20Modernize=20edit?= =?UTF-8?q?=20and=20add=20user=20components=20with=20unified=20design=20sy?= =?UTF-8?q?stem?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 | 14 +- web/src/pages/Redemption/EditRedemption.js | 192 ++++++---- web/src/pages/User/AddUser.js | 161 ++++++--- web/src/pages/User/EditUser.js | 399 +++++++++++++-------- 4 files changed, 509 insertions(+), 257 deletions(-) diff --git a/web/src/i18n/locales/en.json b/web/src/i18n/locales/en.json index e41d76d3..eef1bb20 100644 --- a/web/src/i18n/locales/en.json +++ b/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 diff --git a/web/src/pages/Redemption/EditRedemption.js b/web/src/pages/Redemption/EditRedemption.js index e4f279d0..33279395 100644 --- a/web/src/pages/Redemption/EditRedemption.js +++ b/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 { 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) => { - {isEdit ? t('更新兑换码信息') : t('创建新的兑换码')} - + + {isEdit ? + {t('更新')} : + {t('新建')} + } + + {isEdit ? t('更新兑换码信息') : t('创建新的兑换码')} + + } - 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={ -
+
- @@ -160,59 +187,92 @@ const EditRedemption = (props) => { } closeIcon={null} onCancel={() => handleCancel()} - width={isMobile() ? '100%' : 600} > - handleInputChange('name', value)} - value={name} - autoComplete='new-password' - required={!isEdit} - /> - -
- - {t('额度') + renderQuotaWithPrompt(quota)} - +
+ +
+
+ +
+
+ {t('基本信息')} +
{t('设置兑换码的基本信息')}
+
+
+ +
+
+ {t('名称')} + handleInputChange('name', value)} + value={name} + autoComplete="new-password" + size="large" + className="!rounded-lg" + showClear + required={!isEdit} + /> +
+
+ + + +
+
+ +
+
+ {t('额度设置')} +
{t('设置兑换码的额度和数量')}
+
+
+ +
+
+
+ {t('额度')} + {renderQuotaWithPrompt(quota)} +
+ handleInputChange('quota', value)} + value={quota} + autoComplete="new-password" + type="number" + size="large" + className="w-full !rounded-lg" + prefix={} + 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 && ( +
+ {t('生成数量')} + handleInputChange('count', value)} + value={count} + autoComplete="new-password" + type="number" + size="large" + className="!rounded-lg" + prefix={} + /> +
+ )} +
+
- 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 && ( - <> - - {t('生成数量')} - handleInputChange('count', value)} - value={count} - autoComplete='new-password' - type='number' - /> - - )} diff --git a/web/src/pages/User/AddUser.js b/web/src/pages/User/AddUser.js index 13480206..cb0b410b 100644 --- a/web/src/pages/User/AddUser.js +++ b/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 { 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) => { <> {'添加用户'}} - headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }} - bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }} + title={ + + {t('新建')} + + {t('添加用户')} + + + } + 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={ -
+
-
} closeIcon={null} onCancel={() => handleCancel()} - width={isMobile() ? '100%' : 600} > - handleInputChange('username', value)} - value={username} - autoComplete='off' - /> - handleInputChange('display_name', value)} - value={display_name} - /> - handleInputChange('password', value)} - value={password} - autoComplete='off' - /> +
+ +
+
+ +
+
+ {t('用户信息')} +
{t('创建新用户账户')}
+
+
+ +
+
+ {t('用户名')} + handleInputChange('username', value)} + value={username} + autoComplete="off" + size="large" + className="!rounded-lg" + prefix={} + showClear + required + /> +
+ +
+ {t('显示名称')} + handleInputChange('display_name', value)} + value={display_name} + autoComplete="off" + size="large" + className="!rounded-lg" + prefix={} + showClear + /> +
+ +
+ {t('密码')} + handleInputChange('password', value)} + value={password} + autoComplete="off" + size="large" + className="!rounded-lg" + prefix={} + required + /> +
+
+ +
diff --git a/web/src/pages/User/EditUser.js b/web/src/pages/User/EditUser.js index 36e54727..51fcd5b3 100644 --- a/web/src/pages/User/EditUser.js +++ b/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) => { <> {t('编辑用户')}} - headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }} - bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }} + title={ + + {t('编辑')} + + {t('编辑用户')} + + + } + 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={ -
+
- @@ -152,141 +187,211 @@ const EditUser = (props) => { } closeIcon={null} onCancel={() => handleCancel()} - width={isMobile() ? '100%' : 600} > -
- {t('用户名')} -
- handleInputChange('username', value)} - value={username} - autoComplete='new-password' - /> -
- {t('密码')} -
- handleInputChange('password', value)} - value={password} - autoComplete='new-password' - /> -
- {t('显示名称')} -
- handleInputChange('display_name', value)} - value={display_name} - autoComplete='new-password' - /> - {userId && ( - <> -
- {t('分组')} +
+ +
+
+ +
+
+ {t('基本信息')} +
{t('用户的基本账户信息')}
+
- handleInputChange('username', value)} + value={username} + autoComplete="new-password" + size="large" + className="!rounded-lg" + showClear + /> +
+ +
+ {t('密码')} + handleInputChange('password', value)} + value={password} + autoComplete="new-password" + size="large" + className="!rounded-lg" + prefix={} + /> +
+ +
+ {t('显示名称')} + handleInputChange('display_name', value)} + value={display_name} + autoComplete="new-password" + size="large" + className="!rounded-lg" + showClear + /> +
- - handleInputChange('quota', value)} - value={quota} - type={'number'} - autoComplete='new-password' - /> - - - - )} - {t('以下信息不可修改')} -
- {t('已绑定的 GitHub 账户')} -
- + + {userId && ( + +
+
+ +
+
+ {t('权限设置')} +
{t('用户分组和额度管理')}
+
+
+ +
+
+ {t('分组')} + handleInputChange('quota', value)} + value={quota} + type="number" + autoComplete="new-password" + size="large" + className="flex-1 !rounded-lg" + prefix={} + /> + +
+
+
+ )} - readonly - /> -
- {t('已绑定的 OIDC 账户')} + + +
+
+ +
+
+ {t('绑定信息')} +
{t('第三方账户绑定状态（只读）')}
+
+
+ +
+
+ {t('已绑定的 GitHub 账户')} + +
+ +
+ {t('已绑定的 OIDC 账户')} + +
+ +
+ {t('已绑定的微信账户')} + +
+ +
+ {t('已绑定的邮箱账户')} + +
+ +
+ {t('已绑定的 Telegram 账户')} + +
+
+
- -
- {t('已绑定的微信账户')} -
- -
- {t('已绑定的邮箱账户')} -
- -
- {t('已绑定的Telegram账户')} -
- + { }} onCancel={() => setIsModalOpen(false)} closable={null} + title={ +
+ + {t('添加额度')} +
+ } > -
- {`${t('新额度')}${renderQuota(quota)} + ${renderQuota(addQuotaLocal)} = ${renderQuota(quota + parseInt(addQuotaLocal))}`} +
+ + {`${t('新额度')}${renderQuota(quota)} + ${renderQuota(addQuotaLocal)} = ${renderQuota(quota + parseInt(addQuotaLocal || 0))}`} +
{ setAddQuotaLocal(value); }} value={addQuotaLocal} - type={'number'} - autoComplete='new-password' + type="number" + autoComplete="new-password" + size="large" + className="!rounded-lg" + prefix={} />