Skip to content

phsl / new-api

Go to a project
Commit f80eb958 by t0ng7u
Options

🎨 style: unify card header UI, switch to Avatar icons & remove oversized props 

Summary
• Replaced gradient header blocks with compact, neutral headers wrapped in `Avatar` across the following pages:
  - Channel / EditChannel.js
  - Channel / EditTagModal.js
  - Redemption / EditRedemption.js
  - Token / EditToken.js
  - User / EditUser.js
  - User / AddUser.js

Details
1. Added `Avatar` import and substituted raw icon elements, assigning semantic colors (`blue`, `green`, `purple`, `orange`, etc.) and consistent 16 px icons for a cleaner look.
2. Removed gradient backgrounds, decorative “blur-ball” shapes, and extra paddings from header containers to achieve a tight, flat design.
3. Stripped all `size="large"` attributes from `Button`, `Input`, `Select`, `DatePicker`, `AutoComplete`, and `Avatar` components, allowing default sizing for better visual density.
4. Eliminated redundant `bodyStyle` background overrides in some `SideSheet` components.
5. No business logic touched; all changes are purely presentational.

Result
The editing and creation dialogs now share a unified, compact style consistent with the latest design language, improving readability and user experience without altering functionality.
parent a976d9d3
Showing with 116 additions and 303 deletions
web/src/helpers/render.js
......@@ -1397,7 +1397,7 @@ export function renderQuotaWithPrompt(quota, digits) {
displayInCurrency = displayInCurrency === 'true';
if (displayInCurrency) {
return (
' | ' + i18next.t('等价金额') + ': ' + renderQuota(quota, digits) + ''
i18next.t('等价金额：') + renderQuota(quota, digits)
);
}
return '';
......
web/src/i18n/locales/en.json
......@@ -397,7 +397,7 @@
"删除用户": "Delete User",
"添加新的用户": "Add New User",
"自定义": "Custom",
"等价金额": "Equivalent Amount",
"等价金额：": "Equivalent Amount: ",
"未登录或登录已过期，请重新登录": "Not logged in or login has expired, please log in again",
"请求次数过多，请稍后再试": "Too many requests, please try again later",
"服务器内部错误，请联系管理员": "Server internal error, please contact the administrator",
......
web/src/pages/Channel/EditTagModal.js
......@@ -19,6 +19,7 @@ import {
TextArea,
Card,
Tag,
Avatar,
} from '@douyinfe/semi-ui';
import {
IconSave,
......@@ -277,10 +278,7 @@ const EditTagModal = (props) => {
borderBottom: '1px solid var(--semi-color-border)',
padding: '24px'
}}
bodyStyle={{
backgroundColor: 'var(--semi-color-bg-0)',
padding: '0'
}}
bodyStyle={{ padding: '0' }}
visible={visible}
width={600}
onCancel={handleClose}
......@@ -289,7 +287,6 @@ const EditTagModal = (props) => {
<Space>
<Button
theme="solid"
size="large"
className="!rounded-full"
onClick={handleSave}
loading={loading}
......@@ -299,7 +296,6 @@ const EditTagModal = (props) => {
</Button>
<Button
theme="light"
size="large"
className="!rounded-full"
type="primary"
onClick={handleClose}
......@@ -315,20 +311,14 @@ const EditTagModal = (props) => {
<Spin spinning={loading}>
<div className="p-6">
<Card className="!rounded-2xl shadow-sm border-0 mb-6">
<div className="flex items-center mb-4 p-6 rounded-xl" style={{
background: 'linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%)',
position: 'relative'
}}>
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
<div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
</div>
<div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
<IconBookmark size="large" style={{ color: '#ffffff' }} />
</div>
<div className="relative">
<Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('标签信息')}</Text>
<div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('标签的基本配置')}</div>
{/* Header: Tag Info */}
<div className="flex items-center mb-2">
<Avatar size="small" color="blue" className="mr-2 shadow-md">
<IconBookmark size={16} />
</Avatar>
<div>
<Text className="text-lg font-medium">{t('标签信息')}</Text>
<div className="text-xs text-gray-600">{t('标签的基本配置')}</div>
</div>
</div>
......@@ -345,7 +335,6 @@ const EditTagModal = (props) => {
value={inputs.new_tag}
onChange={(value) => setInputs({ ...inputs, new_tag: value })}
placeholder={t('请输入新标签，留空则解散标签')}
size="large"
className="!rounded-lg"
/>
</div>
......@@ -353,20 +342,14 @@ const EditTagModal = (props) => {
</Card>
<Card className="!rounded-2xl shadow-sm border-0 mb-6">
<div className="flex items-center mb-4 p-6 rounded-xl" style={{
background: 'linear-gradient(135deg, #4c1d95 0%, #6d28d9 50%, #7c3aed 100%)',
position: 'relative'
}}>
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
<div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
</div>
<div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
<IconCode size="large" style={{ color: '#ffffff' }} />
</div>
<div className="relative">
<Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('模型配置')}</Text>
<div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('模型选择和映射设置')}</div>
{/* Header: Model Config */}
<div className="flex items-center mb-2">
<Avatar size="small" color="purple" className="mr-2 shadow-md">
<IconCode size={16} />
</Avatar>
<div>
<Text className="text-lg font-medium">{t('模型配置')}</Text>
<div className="text-xs text-gray-600">{t('模型选择和映射设置')}</div>
</div>
</div>
......@@ -387,7 +370,6 @@ const EditTagModal = (props) => {
onChange={(value) => handleInputChange('models', value)}
value={inputs.models}
optionList={modelOptions}
size="large"
className="!rounded-lg"
/>
</div>
......@@ -402,7 +384,6 @@ const EditTagModal = (props) => {
placeholder={t('输入自定义模型名称')}
value={customModel}
onChange={(value) => setCustomModel(value.trim())}
size="large"
className="!rounded-lg"
/>
</div>
......@@ -442,20 +423,14 @@ const EditTagModal = (props) => {
</Card>
<Card className="!rounded-2xl shadow-sm border-0">
<div className="flex items-center mb-4 p-6 rounded-xl" style={{
background: 'linear-gradient(135deg, #065f46 0%, #059669 50%, #10b981 100%)',
position: 'relative'
}}>
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
<div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
</div>
<div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
<IconUser size="large" style={{ color: '#ffffff' }} />
</div>
<div className="relative">
<Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('分组设置')}</Text>
<div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('用户分组配置')}</div>
{/* Header: Group Settings */}
<div className="flex items-center mb-2">
<Avatar size="small" color="green" className="mr-2 shadow-md">
<IconUser size={16} />
</Avatar>
<div>
<Text className="text-lg font-medium">{t('分组设置')}</Text>
<div className="text-xs text-gray-600">{t('用户分组配置')}</div>
</div>
</div>
......@@ -471,7 +446,6 @@ const EditTagModal = (props) => {
onChange={(value) => handleInputChange('groups', value)}
value={inputs.groups}
optionList={groupOptions}
size="large"
className="!rounded-lg"
/>
</div>
......
web/src/pages/Redemption/EditRedemption.js
......@@ -22,6 +22,7 @@ import {
Tag,
Form,
DatePicker,
Avatar,
} from '@douyinfe/semi-ui';
import {
IconCreditCard,
......@@ -157,10 +158,7 @@ const EditRedemption = (props) => {
borderBottom: '1px solid var(--semi-color-border)',
padding: '24px'
}}
bodyStyle={{
backgroundColor: 'var(--semi-color-bg-0)',
padding: '0'
}}
bodyStyle={{ padding: '0' }}
visible={props.visiable}
width={isMobile() ? '100%' : 600}
footer={
......@@ -168,7 +166,6 @@ const EditRedemption = (props) => {
<Space>
<Button
theme="solid"
size="large"
className="!rounded-full"
onClick={submit}
icon={<IconSave />}
......@@ -178,7 +175,6 @@ const EditRedemption = (props) => {
</Button>
<Button
theme="light"
size="large"
className="!rounded-full"
type="primary"
onClick={handleCancel}
......@@ -195,20 +191,14 @@ const EditRedemption = (props) => {
<Spin spinning={loading}>
<div className="p-6">
<Card className="!rounded-2xl shadow-sm border-0 mb-6">
<div className="flex items-center mb-4 p-6 rounded-xl" style={{
background: 'linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%)',
position: 'relative'
}}>
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
<div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
</div>
<div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
<IconGift size="large" style={{ color: '#ffffff' }} />
</div>
<div className="relative">
<Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('基本信息')}</Text>
<div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('设置兑换码的基本信息')}</div>
{/* Header: Basic Info */}
<div className="flex items-center mb-2">
<Avatar size="small" color="blue" className="mr-2 shadow-md">
<IconGift size={16} />
</Avatar>
<div>
<Text className="text-lg font-medium">{t('基本信息')}</Text>
<div className="text-xs text-gray-600">{t('设置兑换码的基本信息')}</div>
</div>
</div>
......@@ -220,7 +210,6 @@ const EditRedemption = (props) => {
onChange={(value) => handleInputChange('name', value)}
value={name}
autoComplete="new-password"
size="large"
className="!rounded-lg"
showClear
required={!isEdit}
......@@ -241,7 +230,6 @@ const EditRedemption = (props) => {
handleInputChange('expired_time', timestamp);
}
}}
size="large"
className="!rounded-lg w-full"
/>
</div>
......@@ -249,20 +237,14 @@ const EditRedemption = (props) => {
</Card>
<Card className="!rounded-2xl shadow-sm border-0">
<div className="flex items-center mb-4 p-6 rounded-xl" style={{
background: 'linear-gradient(135deg, #065f46 0%, #059669 50%, #10b981 100%)',
position: 'relative'
}}>
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
<div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
</div>
<div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
<IconCreditCard size="large" style={{ color: '#ffffff' }} />
</div>
<div className="relative">
<Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('额度设置')}</Text>
<div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('设置兑换码的额度和数量')}</div>
{/* Header: Quota Settings */}
<div className="flex items-center mb-2">
<Avatar size="small" color="green" className="mr-2 shadow-md">
<IconCreditCard size={16} />
</Avatar>
<div>
<Text className="text-lg font-medium">{t('额度设置')}</Text>
<div className="text-xs text-gray-600">{t('设置兑换码的额度和数量')}</div>
</div>
</div>
......@@ -278,7 +260,6 @@ const EditRedemption = (props) => {
value={quota}
autoComplete="new-password"
type="number"
size="large"
className="w-full !rounded-lg"
prefix={<IconCreditCard />}
data={[
......@@ -301,7 +282,6 @@ const EditRedemption = (props) => {
value={count}
autoComplete="new-password"
type="number"
size="large"
className="!rounded-lg"
prefix={<IconPlusCircle />}
/>
......
web/src/pages/User/AddUser.js
......@@ -8,7 +8,8 @@ import {
Spin,
Typography,
Card,
Tag
Tag,
Avatar
} from '@douyinfe/semi-ui';
import {
IconUser,
......@@ -78,10 +79,7 @@ const AddUser = (props) => {
borderBottom: '1px solid var(--semi-color-border)',
padding: '24px'
}}
bodyStyle={{
backgroundColor: 'var(--semi-color-bg-0)',
padding: '0'
}}
bodyStyle={{ padding: '0' }}
visible={props.visible}
width={isMobile() ? '100%' : 600}
footer={
......@@ -89,7 +87,6 @@ const AddUser = (props) => {
<Space>
<Button
theme="solid"
size="large"
className="!rounded-full"
onClick={submit}
icon={<IconSave />}
......@@ -99,7 +96,6 @@ const AddUser = (props) => {
</Button>
<Button
theme="light"
size="large"
className="!rounded-full"
type="primary"
onClick={handleCancel}
......@@ -116,20 +112,13 @@ const AddUser = (props) => {
<Spin spinning={loading}>
<div className="p-6">
<Card className="!rounded-2xl shadow-sm border-0">
<div className="flex items-center mb-4 p-6 rounded-xl" style={{
background: 'linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%)',
position: 'relative'
}}>
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
<div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
</div>
<div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
<IconUserAdd size="large" style={{ color: '#ffffff' }} />
</div>
<div className="relative">
<Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('用户信息')}</Text>
<div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('创建新用户账户')}</div>
<div className="flex items-center mb-2">
<Avatar size="small" color="blue" className="mr-2 shadow-md">
<IconUserAdd size={16} />
</Avatar>
<div>
<Text className="text-lg font-medium">{t('用户信息')}</Text>
<div className="text-xs text-gray-600">{t('创建新用户账户')}</div>
</div>
</div>
......@@ -141,7 +130,6 @@ const AddUser = (props) => {
onChange={(value) => handleInputChange('username', value)}
value={username}
autoComplete="off"
size="large"
className="!rounded-lg"
prefix={<IconUser />}
showClear
......@@ -156,7 +144,6 @@ const AddUser = (props) => {
onChange={(value) => handleInputChange('display_name', value)}
value={display_name}
autoComplete="off"
size="large"
className="!rounded-lg"
prefix={<IconUser />}
showClear
......@@ -171,7 +158,6 @@ const AddUser = (props) => {
onChange={(value) => handleInputChange('password', value)}
value={password}
autoComplete="off"
size="large"
className="!rounded-lg"
prefix={<IconKey />}
required
......@@ -185,7 +171,6 @@ const AddUser = (props) => {
onChange={(value) => handleInputChange('remark', value)}
value={remark}
autoComplete="off"
size="large"
className="!rounded-lg"
prefix={<IconEdit />}
showClear
......
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