Skip to content

phsl / new-api

Go to a project
Commit 33f4e404 by t0ng7u
Options

🍎style(button): Optimize the colors of all buttons to reduce visual fatigue

parent 5c55da29
Showing with 47 additions and 98 deletions
web/src/components/table/LogsTable.js
...@@ -697,22 +697,13 @@ const LogsTable = () => { ...@@ -697,22 +697,13 @@ const LogsTable = () => {
onCancel={() => setShowColumnSelector(false)} onCancel={() => setShowColumnSelector(false)}
footer={ footer={
<div className='flex justify-end'> <div className='flex justify-end'>
<Button <Button onClick={() => initDefaultColumns()}>
theme='light'
onClick={() => initDefaultColumns()}
>
{t('重置')} {t('重置')}
</Button> </Button>
<Button <Button onClick={() => setShowColumnSelector(false)}>
theme='light'
onClick={() => setShowColumnSelector(false)}
>
{t('取消')} {t('取消')}
</Button> </Button>
<Button <Button onClick={() => setShowColumnSelector(false)}>
type='primary'
onClick={() => setShowColumnSelector(false)}
>
{t('确定')} {t('确定')}
</Button> </Button>
</div> </div>
...@@ -1222,7 +1213,7 @@ const LogsTable = () => { ...@@ -1222,7 +1213,7 @@ const LogsTable = () => {
style={{ style={{
fontWeight: 500, fontWeight: 500,
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)', boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
padding: 15, padding: 13,
}} }}
className='!rounded-lg' className='!rounded-lg'
> >
...@@ -1233,7 +1224,7 @@ const LogsTable = () => { ...@@ -1233,7 +1224,7 @@ const LogsTable = () => {
style={{ style={{
fontWeight: 500, fontWeight: 500,
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)', boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
padding: 15, padding: 13,
}} }}
className='!rounded-lg' className='!rounded-lg'
> >
...@@ -1245,7 +1236,7 @@ const LogsTable = () => { ...@@ -1245,7 +1236,7 @@ const LogsTable = () => {
border: 'none', border: 'none',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)', boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
fontWeight: 500, fontWeight: 500,
padding: 15, padding: 13,
}} }}
className='!rounded-lg' className='!rounded-lg'
> >
...@@ -1254,8 +1245,7 @@ const LogsTable = () => { ...@@ -1254,8 +1245,7 @@ const LogsTable = () => {
</Space> </Space>
<Button <Button
theme='light' type='tertiary'
type='secondary'
className="w-full md:w-auto" className="w-full md:w-auto"
onClick={() => setCompactMode(!compactMode)} onClick={() => setCompactMode(!compactMode)}
size="small" size="small"
...@@ -1384,7 +1374,7 @@ const LogsTable = () => { ...@@ -1384,7 +1374,7 @@ const LogsTable = () => {
<div className='flex gap-2 w-full sm:w-auto justify-end'> <div className='flex gap-2 w-full sm:w-auto justify-end'>
<Button <Button
type='primary' type='tertiary'
htmlType='submit' htmlType='submit'
loading={loading} loading={loading}
size="small" size="small"
...@@ -1392,7 +1382,7 @@ const LogsTable = () => { ...@@ -1392,7 +1382,7 @@ const LogsTable = () => {
{t('查询')} {t('查询')}
</Button> </Button>
<Button <Button
theme='light' type='tertiary'
onClick={() => { onClick={() => {
if (formApi) { if (formApi) {
formApi.reset(); formApi.reset();
...@@ -1407,7 +1397,6 @@ const LogsTable = () => { ...@@ -1407,7 +1397,6 @@ const LogsTable = () => {
{t('重置')} {t('重置')}
</Button> </Button>
<Button <Button
theme='light'
type='tertiary' type='tertiary'
onClick={() => setShowColumnSelector(true)} onClick={() => setShowColumnSelector(true)}
size="small" size="small"
......
web/src/components/table/MjLogsTable.js
...@@ -741,22 +741,13 @@ const LogsTable = () => { ...@@ -741,22 +741,13 @@ const LogsTable = () => {
onCancel={() => setShowColumnSelector(false)} onCancel={() => setShowColumnSelector(false)}
footer={ footer={
<div className="flex justify-end"> <div className="flex justify-end">
<Button <Button onClick={() => initDefaultColumns()}>
theme="light"
onClick={() => initDefaultColumns()}
>
{t('重置')} {t('重置')}
</Button> </Button>
<Button <Button onClick={() => setShowColumnSelector(false)}>
theme="light"
onClick={() => setShowColumnSelector(false)}
>
{t('取消')} {t('取消')}
</Button> </Button>
<Button <Button onClick={() => setShowColumnSelector(false)}>
type='primary'
onClick={() => setShowColumnSelector(false)}
>
{t('确定')} {t('确定')}
</Button> </Button>
</div> </div>
...@@ -831,8 +822,7 @@ const LogsTable = () => { ...@@ -831,8 +822,7 @@ const LogsTable = () => {
)} )}
</div> </div>
<Button <Button
theme='light' type='tertiary'
type='secondary'
className="w-full md:w-auto" className="w-full md:w-auto"
onClick={() => setCompactMode(!compactMode)} onClick={() => setCompactMode(!compactMode)}
size="small" size="small"
...@@ -897,7 +887,7 @@ const LogsTable = () => { ...@@ -897,7 +887,7 @@ const LogsTable = () => {
<div></div> <div></div>
<div className="flex gap-2"> <div className="flex gap-2">
<Button <Button
type='primary' type='tertiary'
htmlType='submit' htmlType='submit'
loading={loading} loading={loading}
size="small" size="small"
...@@ -905,7 +895,7 @@ const LogsTable = () => { ...@@ -905,7 +895,7 @@ const LogsTable = () => {
{t('查询')} {t('查询')}
</Button> </Button>
<Button <Button
theme='light' type='tertiary'
onClick={() => { onClick={() => {
if (formApi) { if (formApi) {
formApi.reset(); formApi.reset();
...@@ -920,7 +910,6 @@ const LogsTable = () => { ...@@ -920,7 +910,6 @@ const LogsTable = () => {
{t('重置')} {t('重置')}
</Button> </Button>
<Button <Button
theme='light'
type='tertiary' type='tertiary'
onClick={() => setShowColumnSelector(true)} onClick={() => setShowColumnSelector(true)}
size="small" size="small"
......
web/src/components/table/RedemptionsTable.js
...@@ -139,6 +139,7 @@ const RedemptionsTable = () => { ...@@ -139,6 +139,7 @@ const RedemptionsTable = () => {
title: '', title: '',
dataIndex: 'operate', dataIndex: 'operate',
fixed: 'right', fixed: 'right',
width: 205,
render: (text, record, index) => { render: (text, record, index) => {
// 创建更多操作的下拉菜单项 // 创建更多操作的下拉菜单项
const moreMenuItems = [ const moreMenuItems = [
...@@ -191,7 +192,6 @@ const RedemptionsTable = () => { ...@@ -191,7 +192,6 @@ const RedemptionsTable = () => {
<Space> <Space>
<Popover content={record.key} style={{ padding: 20 }} position='top'> <Popover content={record.key} style={{ padding: 20 }} position='top'>
<Button <Button
theme='light'
type='tertiary' type='tertiary'
size="small" size="small"
> >
...@@ -199,8 +199,6 @@ const RedemptionsTable = () => { ...@@ -199,8 +199,6 @@ const RedemptionsTable = () => {
</Button> </Button>
</Popover> </Popover>
<Button <Button
theme='light'
type='secondary'
size="small" size="small"
onClick={async () => { onClick={async () => {
await copyText(record.key); await copyText(record.key);
...@@ -209,7 +207,6 @@ const RedemptionsTable = () => { ...@@ -209,7 +207,6 @@ const RedemptionsTable = () => {
{t('复制')} {t('复制')}
</Button> </Button>
<Button <Button
theme='light'
type='tertiary' type='tertiary'
size="small" size="small"
onClick={() => { onClick={() => {
...@@ -226,7 +223,6 @@ const RedemptionsTable = () => { ...@@ -226,7 +223,6 @@ const RedemptionsTable = () => {
menu={moreMenuItems} menu={moreMenuItems}
> >
<Button <Button
theme='light'
type='tertiary' type='tertiary'
size="small" size="small"
icon={<IconMore />} icon={<IconMore />}
...@@ -435,8 +431,7 @@ const RedemptionsTable = () => { ...@@ -435,8 +431,7 @@ const RedemptionsTable = () => {
<Text>{t('兑换码可以批量生成和分发，适合用于推广活动或批量充值。')}</Text> <Text>{t('兑换码可以批量生成和分发，适合用于推广活动或批量充值。')}</Text>
</div> </div>
<Button <Button
theme='light' type='tertiary'
type='secondary'
className="w-full md:w-auto" className="w-full md:w-auto"
onClick={() => setCompactMode(!compactMode)} onClick={() => setCompactMode(!compactMode)}
size="small" size="small"
...@@ -452,7 +447,6 @@ const RedemptionsTable = () => { ...@@ -452,7 +447,6 @@ const RedemptionsTable = () => {
<div className="flex flex-col sm:flex-row gap-2 w-full md:w-auto order-2 md:order-1"> <div className="flex flex-col sm:flex-row gap-2 w-full md:w-auto order-2 md:order-1">
<div className="flex gap-2 w-full sm:w-auto"> <div className="flex gap-2 w-full sm:w-auto">
<Button <Button
theme='light'
type='primary' type='primary'
className="w-full sm:w-auto" className="w-full sm:w-auto"
onClick={() => { onClick={() => {
...@@ -466,7 +460,7 @@ const RedemptionsTable = () => { ...@@ -466,7 +460,7 @@ const RedemptionsTable = () => {
{t('添加兑换码')} {t('添加兑换码')}
</Button> </Button>
<Button <Button
type='warning' type='tertiary'
className="w-full sm:w-auto" className="w-full sm:w-auto"
onClick={async () => { onClick={async () => {
if (selectedKeys.length === 0) { if (selectedKeys.length === 0) {
...@@ -539,7 +533,7 @@ const RedemptionsTable = () => { ...@@ -539,7 +533,7 @@ const RedemptionsTable = () => {
</div> </div>
<div className="flex gap-2 w-full md:w-auto"> <div className="flex gap-2 w-full md:w-auto">
<Button <Button
type="primary" type="tertiary"
htmlType="submit" htmlType="submit"
loading={loading || searching} loading={loading || searching}
className="flex-1 md:flex-initial md:w-auto" className="flex-1 md:flex-initial md:w-auto"
...@@ -548,7 +542,7 @@ const RedemptionsTable = () => { ...@@ -548,7 +542,7 @@ const RedemptionsTable = () => {
{t('查询')} {t('查询')}
</Button> </Button>
<Button <Button
theme="light" type="tertiary"
onClick={() => { onClick={() => {
if (formApi) { if (formApi) {
formApi.reset(); formApi.reset();
......
web/src/components/table/TaskLogsTable.js
...@@ -595,22 +595,13 @@ const LogsTable = () => { ...@@ -595,22 +595,13 @@ const LogsTable = () => {
onCancel={() => setShowColumnSelector(false)} onCancel={() => setShowColumnSelector(false)}
footer={ footer={
<div className="flex justify-end"> <div className="flex justify-end">
<Button <Button onClick={() => initDefaultColumns()}>
theme="light"
onClick={() => initDefaultColumns()}
>
{t('重置')} {t('重置')}
</Button> </Button>
<Button <Button onClick={() => setShowColumnSelector(false)}>
theme="light"
onClick={() => setShowColumnSelector(false)}
>
{t('取消')} {t('取消')}
</Button> </Button>
<Button <Button onClick={() => setShowColumnSelector(false)}>
type='primary'
onClick={() => setShowColumnSelector(false)}
>
{t('确定')} {t('确定')}
</Button> </Button>
</div> </div>
...@@ -667,8 +658,7 @@ const LogsTable = () => { ...@@ -667,8 +658,7 @@ const LogsTable = () => {
<Text>{t('任务记录')}</Text> <Text>{t('任务记录')}</Text>
</div> </div>
<Button <Button
theme='light' type='tertiary'
type='secondary'
className="w-full md:w-auto" className="w-full md:w-auto"
onClick={() => setCompactMode(!compactMode)} onClick={() => setCompactMode(!compactMode)}
size="small" size="small"
...@@ -733,7 +723,7 @@ const LogsTable = () => { ...@@ -733,7 +723,7 @@ const LogsTable = () => {
<div></div> <div></div>
<div className="flex gap-2"> <div className="flex gap-2">
<Button <Button
type='primary' type='tertiary'
htmlType='submit' htmlType='submit'
loading={loading} loading={loading}
size="small" size="small"
...@@ -741,7 +731,7 @@ const LogsTable = () => { ...@@ -741,7 +731,7 @@ const LogsTable = () => {
{t('查询')} {t('查询')}
</Button> </Button>
<Button <Button
theme='light' type='tertiary'
onClick={() => { onClick={() => {
if (formApi) { if (formApi) {
formApi.reset(); formApi.reset();
...@@ -756,7 +746,6 @@ const LogsTable = () => { ...@@ -756,7 +746,6 @@ const LogsTable = () => {
{t('重置')} {t('重置')}
</Button> </Button>
<Button <Button
theme='light'
type='tertiary' type='tertiary'
onClick={() => setShowColumnSelector(true)} onClick={() => setShowColumnSelector(true)}
size="small" size="small"
......
web/src/components/table/TokensTable.js
...@@ -372,9 +372,8 @@ const TokensTable = () => { ...@@ -372,9 +372,8 @@ const TokensTable = () => {
aria-label={t('项目操作按钮组')} aria-label={t('项目操作按钮组')}
> >
<Button <Button
theme='light'
size="small" size="small"
style={{ color: 'rgba(var(--semi-teal-7), 1)' }} type='tertiary'
onClick={() => { onClick={() => {
if (chatsArray.length === 0) { if (chatsArray.length === 0) {
showError(t('请联系管理员配置聊天链接')); showError(t('请联系管理员配置聊天链接'));
...@@ -395,11 +394,7 @@ const TokensTable = () => { ...@@ -395,11 +394,7 @@ const TokensTable = () => {
menu={chatsArray} menu={chatsArray}
> >
<Button <Button
style={{ type='tertiary'
padding: '4px 4px',
color: 'rgba(var(--semi-teal-7), 1)',
}}
type='primary'
icon={<IconTreeTriangleDown />} icon={<IconTreeTriangleDown />}
size="small" size="small"
></Button> ></Button>
...@@ -407,7 +402,6 @@ const TokensTable = () => { ...@@ -407,7 +402,6 @@ const TokensTable = () => {
</SplitButtonGroup> </SplitButtonGroup>
<Button <Button
theme='light'
type='tertiary' type='tertiary'
size="small" size="small"
onClick={() => { onClick={() => {
...@@ -419,7 +413,6 @@ const TokensTable = () => { ...@@ -419,7 +413,6 @@ const TokensTable = () => {
</Button> </Button>
<Button <Button
theme='light'
type='danger' type='danger'
size="small" size="small"
onClick={() => { onClick={() => {
...@@ -705,8 +698,7 @@ const TokensTable = () => { ...@@ -705,8 +698,7 @@ const TokensTable = () => {
<Text>{t('令牌用于API访问认证，可以设置额度限制和模型权限。')}</Text> <Text>{t('令牌用于API访问认证，可以设置额度限制和模型权限。')}</Text>
</div> </div>
<Button <Button
theme="light" type="tertiary"
type="secondary"
className="w-full md:w-auto" className="w-full md:w-auto"
onClick={() => setCompactMode(!compactMode)} onClick={() => setCompactMode(!compactMode)}
size="small" size="small"
...@@ -721,7 +713,6 @@ const TokensTable = () => { ...@@ -721,7 +713,6 @@ const TokensTable = () => {
<div className="flex flex-col md:flex-row justify-between items-center gap-4 w-full"> <div className="flex flex-col md:flex-row justify-between items-center gap-4 w-full">
<div className="flex flex-wrap gap-2 w-full md:w-auto order-2 md:order-1"> <div className="flex flex-wrap gap-2 w-full md:w-auto order-2 md:order-1">
<Button <Button
theme="light"
type="primary" type="primary"
className="flex-1 md:flex-initial" className="flex-1 md:flex-initial"
onClick={() => { onClick={() => {
...@@ -735,8 +726,7 @@ const TokensTable = () => { ...@@ -735,8 +726,7 @@ const TokensTable = () => {
{t('添加令牌')} {t('添加令牌')}
</Button> </Button>
<Button <Button
theme="light" type='tertiary'
type="warning"
className="flex-1 md:flex-initial" className="flex-1 md:flex-initial"
onClick={() => { onClick={() => {
if (selectedKeys.length === 0) { if (selectedKeys.length === 0) {
...@@ -750,8 +740,7 @@ const TokensTable = () => { ...@@ -750,8 +740,7 @@ const TokensTable = () => {
footer: ( footer: (
<Space> <Space>
<Button <Button
type="primary" type='tertiary'
theme="solid"
onClick={async () => { onClick={async () => {
let content = ''; let content = '';
for (let i = 0; i < selectedKeys.length; i++) { for (let i = 0; i < selectedKeys.length; i++) {
...@@ -765,7 +754,6 @@ const TokensTable = () => { ...@@ -765,7 +754,6 @@ const TokensTable = () => {
{t('名称+密钥')} {t('名称+密钥')}
</Button> </Button>
<Button <Button
theme="light"
onClick={async () => { onClick={async () => {
let content = ''; let content = '';
for (let i = 0; i < selectedKeys.length; i++) { for (let i = 0; i < selectedKeys.length; i++) {
...@@ -786,8 +774,7 @@ const TokensTable = () => { ...@@ -786,8 +774,7 @@ const TokensTable = () => {
{t('复制所选令牌')} {t('复制所选令牌')}
</Button> </Button>
<Button <Button
theme="light" type='danger'
type="danger"
className="w-full md:w-auto" className="w-full md:w-auto"
onClick={() => { onClick={() => {
if (selectedKeys.length === 0) { if (selectedKeys.length === 0) {
...@@ -844,7 +831,7 @@ const TokensTable = () => { ...@@ -844,7 +831,7 @@ const TokensTable = () => {
</div> </div>
<div className="flex gap-2 w-full md:w-auto"> <div className="flex gap-2 w-full md:w-auto">
<Button <Button
type="primary" type="tertiary"
htmlType="submit" htmlType="submit"
loading={loading || searching} loading={loading || searching}
className="flex-1 md:flex-initial md:w-auto" className="flex-1 md:flex-initial md:w-auto"
...@@ -853,7 +840,7 @@ const TokensTable = () => { ...@@ -853,7 +840,7 @@ const TokensTable = () => {
{t('查询')} {t('查询')}
</Button> </Button>
<Button <Button
theme="light" type='tertiary'
onClick={() => { onClick={() => {
if (formApi) { if (formApi) {
formApi.reset(); formApi.reset();
......
web/src/components/table/UsersTable.js
...@@ -287,7 +287,6 @@ const UsersTable = () => { ...@@ -287,7 +287,6 @@ const UsersTable = () => {
return ( return (
<Space> <Space>
<Button <Button
theme='light'
type='tertiary' type='tertiary'
size="small" size="small"
onClick={() => { onClick={() => {
...@@ -303,7 +302,6 @@ const UsersTable = () => { ...@@ -303,7 +302,6 @@ const UsersTable = () => {
menu={moreMenuItems} menu={moreMenuItems}
> >
<Button <Button
theme='light'
type='tertiary' type='tertiary'
size="small" size="small"
icon={<IconMore />} icon={<IconMore />}
...@@ -525,8 +523,7 @@ const UsersTable = () => { ...@@ -525,8 +523,7 @@ const UsersTable = () => {
<Text>{t('用户管理页面，可以查看和管理所有注册用户的信息、权限和状态。')}</Text> <Text>{t('用户管理页面，可以查看和管理所有注册用户的信息、权限和状态。')}</Text>
</div> </div>
<Button <Button
theme='light' type='tertiary'
type='secondary'
className="w-full md:w-auto" className="w-full md:w-auto"
onClick={() => setCompactMode(!compactMode)} onClick={() => setCompactMode(!compactMode)}
size="small" size="small"
...@@ -541,8 +538,6 @@ const UsersTable = () => { ...@@ -541,8 +538,6 @@ const UsersTable = () => {
<div className="flex flex-col md:flex-row justify-between items-center gap-4 w-full"> <div className="flex flex-col md:flex-row justify-between items-center gap-4 w-full">
<div className="flex gap-2 w-full md:w-auto order-2 md:order-1"> <div className="flex gap-2 w-full md:w-auto order-2 md:order-1">
<Button <Button
theme='light'
type='primary'
className="w-full md:w-auto" className="w-full md:w-auto"
onClick={() => { onClick={() => {
setShowAddUser(true); setShowAddUser(true);
...@@ -598,7 +593,7 @@ const UsersTable = () => { ...@@ -598,7 +593,7 @@ const UsersTable = () => {
</div> </div>
<div className="flex gap-2 w-full md:w-auto"> <div className="flex gap-2 w-full md:w-auto">
<Button <Button
type="primary" type="tertiary"
htmlType="submit" htmlType="submit"
loading={loading || searching} loading={loading || searching}
className="flex-1 md:flex-initial md:w-auto" className="flex-1 md:flex-initial md:w-auto"
...@@ -607,7 +602,7 @@ const UsersTable = () => { ...@@ -607,7 +602,7 @@ const UsersTable = () => {
{t('查询')} {t('查询')}
</Button> </Button>
<Button <Button
theme="light" type='tertiary'
onClick={() => { onClick={() => {
if (formApi) { if (formApi) {
formApi.reset(); formApi.reset();
......
web/src/helpers/render.js
...@@ -53,18 +53,18 @@ import { ...@@ -53,18 +53,18 @@ import {
// 侧边栏图标颜色映射 // 侧边栏图标颜色映射
export const sidebarIconColors = { export const sidebarIconColors = {
dashboard: '#4F46E5', // 紫蓝色 dashboard: '#10B981', // 绿色
terminal: '#10B981', // 绿色 terminal: '#10B981', // 绿色
message: '#06B6D4', // 青色 message: '#06B6D4', // 青色
key: '#3B82F6', // 蓝色 key: '#3B82F6', // 蓝色
chart: '#8B5CF6', // 紫色 chart: '#F59E0B', // 琥珀色
image: '#EC4899', // 粉色 image: '#EC4899', // 粉色
check: '#F59E0B', // 琥珀色 check: '#F59E0B', // 琥珀色
credit: '#F97316', // 橙色 credit: '#F97316', // 橙色
layers: '#EF4444', // 红色 layers: '#EF4444', // 红色
gift: '#F43F5E', // 玫红色 gift: '#F43F5E', // 玫红色
user: '#6366F1', // 靛蓝色 user: '#10B981', // 绿色
settings: '#6B7280', // 灰色 settings: '#F97316', // 橙色
}; };
// 获取侧边栏Lucide图标组件 // 获取侧边栏Lucide图标组件
......
web/src/index.css
...@@ -59,6 +59,11 @@ code { ...@@ -59,6 +59,11 @@ code {
.semi-navigation-item { .semi-navigation-item {
margin-bottom: 4px !important; margin-bottom: 4px !important;
padding: 4px 12px !important;
}
.semi-navigation-sub-title {
padding: 0 !important;
} }
.semi-navigation-item-icon { .semi-navigation-item-icon {
...@@ -70,6 +75,7 @@ code { ...@@ -70,6 +75,7 @@ code {
margin-right: 0; margin-right: 0;
} }
.semi-navigation-item,
.semi-navigation-sub-title { .semi-navigation-sub-title {
height: 100% !important; height: 100% !important;
} }
......
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