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 127 additions and 217 deletions
web/src/components/table/ChannelsTable.js
......@@ -563,7 +563,7 @@ const ChannelsTable = () => {
{
node: 'item',
name: t('复制'),
type: 'primary',
type: 'tertiary',
onClick: () => {
Modal.confirm({
title: t('确定是否要复制此渠道？'),
......@@ -581,15 +581,15 @@ const ChannelsTable = () => {
aria-label={t('测试单个渠道操作项目组')}
>
<Button
theme='light'
size="small"
type='tertiary'
onClick={() => testChannel(record, '')}
>
{t('测试')}
</Button>
<Button
theme='light'
size="small"
type='tertiary'
icon={<IconTreeTriangleDown />}
onClick={() => {
setCurrentTestChannel(record);
......@@ -605,8 +605,7 @@ const ChannelsTable = () => {
{
record.status === 1 ? (
<Button
theme='light'
type='warning'
type='danger'
size="small"
onClick={() => manageChannel(record.id, 'disable', record)}
>
......@@ -614,8 +613,6 @@ const ChannelsTable = () => {
</Button>
) : (
<Button
theme='light'
type='secondary'
size="small"
onClick={() => manageChannel(record.id, 'enable', record)}
>
......@@ -635,7 +632,6 @@ const ChannelsTable = () => {
]}
>
<Button
theme='light'
type='tertiary'
size="small"
icon={<IconTreeTriangleDown />}
......@@ -645,8 +641,7 @@ const ChannelsTable = () => {
) : (
record.status === 1 ? (
<Button
theme='light'
type='warning'
type='danger'
size="small"
onClick={() => manageChannel(record.id, 'disable', record)}
>
......@@ -654,8 +649,6 @@ const ChannelsTable = () => {
</Button>
) : (
<Button
theme='light'
type='secondary'
size="small"
onClick={() => manageChannel(record.id, 'enable', record)}
>
......@@ -665,7 +658,6 @@ const ChannelsTable = () => {
)}
<Button
theme='light'
type='tertiary'
size="small"
onClick={() => {
......@@ -683,7 +675,6 @@ const ChannelsTable = () => {
>
<Button
icon={<IconMore />}
theme='light'
type='tertiary'
size="small"
/>
......@@ -695,23 +686,20 @@ const ChannelsTable = () => {
return (
<Space wrap>
<Button
theme='light'
type='secondary'
type='tertiary'
size="small"
onClick={() => manageTag(record.key, 'enable')}
>
{t('启用全部')}
</Button>
<Button
theme='light'
type='warning'
type='tertiary'
size="small"
onClick={() => manageTag(record.key, 'disable')}
>
{t('禁用全部')}
</Button>
<Button
theme='light'
type='tertiary'
size="small"
onClick={() => {
......@@ -783,22 +771,13 @@ const ChannelsTable = () => {
onCancel={() => setShowColumnSelector(false)}
footer={
<div className="flex justify-end">
<Button
theme="light"
onClick={() => initDefaultColumns()}
>
<Button onClick={() => initDefaultColumns()}>
{t('重置')}
</Button>
<Button
theme="light"
onClick={() => setShowColumnSelector(false)}
>
<Button onClick={() => setShowColumnSelector(false)}>
{t('取消')}
</Button>
<Button
type='primary'
onClick={() => setShowColumnSelector(false)}
>
<Button onClick={() => setShowColumnSelector(false)}>
{t('确定')}
</Button>
</div>
......@@ -1605,7 +1584,6 @@ const ChannelsTable = () => {
<Button
size='small'
disabled={!enableBatchDelete}
theme='light'
type='danger'
className="w-full md:w-auto"
onClick={() => {
......@@ -1622,8 +1600,7 @@ const ChannelsTable = () => {
<Button
size='small'
disabled={!enableBatchDelete}
theme='light'
type='primary'
type='tertiary'
onClick={() => setShowBatchSetTag(true)}
className="w-full md:w-auto"
>
......@@ -1638,8 +1615,7 @@ const ChannelsTable = () => {
<Dropdown.Item>
<Button
size='small'
theme='light'
type='warning'
type='tertiary'
className="w-full"
onClick={() => {
Modal.confirm({
......@@ -1657,58 +1633,54 @@ const ChannelsTable = () => {
<Dropdown.Item>
<Button
size='small'
theme='light'
type='secondary'
className="w-full"
onClick={() => {
Modal.confirm({
title: t('确定？'),
content: t('确定要更新所有已启用通道余额吗？'),
onOk: () => updateAllChannelsBalance(),
title: t('确定是否要修复数据库一致性？'),
content: t('进行该操作时，可能导致渠道访问错误，请仅在数据库出现问题时使用'),
onOk: () => fixChannelsAbilities(),
size: 'sm',
centered: true,
});
}}
>
{t('更新所有已启用通道余额')}
{t('修复数据库一致性')}
</Button>
</Dropdown.Item>
<Dropdown.Item>
<Button
size='small'
theme='light'
type='danger'
type='secondary'
className="w-full"
onClick={() => {
Modal.confirm({
title: t('确定是否要删除禁用通道？'),
content: t('此修改将不可逆'),
onOk: () => deleteAllDisabledChannels(),
title: t('确定？'),
content: t('确定要更新所有已启用通道余额吗？'),
onOk: () => updateAllChannelsBalance(),
size: 'sm',
centered: true,
});
}}
>
{t('删除禁用通道')}
{t('更新所有已启用通道余额')}
</Button>
</Dropdown.Item>
<Dropdown.Item>
<Button
size='small'
theme='light'
type='tertiary'
type='danger'
className="w-full"
onClick={() => {
Modal.confirm({
title: t('确定是否要修复数据库一致性？'),
content: t('进行该操作时，可能导致渠道访问错误，请仅在数据库出现问题时使用'),
onOk: () => fixChannelsAbilities(),
title: t('确定是否要删除禁用通道？'),
content: t('此修改将不可逆'),
onOk: () => deleteAllDisabledChannels(),
size: 'sm',
centered: true,
});
}}
>
{t('修复数据库一致性')}
{t('删除禁用通道')}
</Button>
</Dropdown.Item>
</Dropdown.Menu>
......@@ -1721,8 +1693,7 @@ const ChannelsTable = () => {
<Button
size='small'
theme='light'
type='secondary'
type='tertiary'
className="w-full md:w-auto"
onClick={() => setCompactMode(!compactMode)}
>
......@@ -1825,8 +1796,7 @@ const ChannelsTable = () => {
<Button
size='small'
theme='light'
type='primary'
type='tertiary'
className="w-full md:w-auto"
onClick={refresh}
>
......@@ -1835,7 +1805,6 @@ const ChannelsTable = () => {
<Button
size='small'
theme='light'
type='tertiary'
onClick={() => setShowColumnSelector(true)}
className="w-full md:w-auto"
......@@ -1898,7 +1867,7 @@ const ChannelsTable = () => {
</div>
<Button
size='small'
type="primary"
type="tertiary"
htmlType="submit"
loading={loading || searching}
className="w-full md:w-auto"
......@@ -1907,7 +1876,7 @@ const ChannelsTable = () => {
</Button>
<Button
size='small'
theme='light'
type='tertiary'
onClick={() => {
if (formApi) {
formApi.reset();
......@@ -2033,9 +2002,55 @@ const ChannelsTable = () => {
{t('共')} {currentTestChannel.models.split(',').length} {t('个模型')}
</Typography.Text>
</div>
</div>
)
}
visible={showModelTestModal && currentTestChannel !== null}
onCancel={handleCloseModal}
footer={
<div className="flex justify-end">
{isBatchTesting ? (
<Button
type='danger'
onClick={handleCloseModal}
>
{t('停止测试')}
</Button>
) : (
<Button
type='tertiary'
onClick={handleCloseModal}
>
{t('取消')}
</Button>
)}
<Button
onClick={batchTestModels}
loading={isBatchTesting}
disabled={isBatchTesting}
>
{isBatchTesting ? t('测试中...') : t('批量测试${count}个模型').replace(
'${count}',
currentTestChannel
? currentTestChannel.models
.split(',')
.filter((model) =>
model.toLowerCase().includes(modelSearchKeyword.toLowerCase())
).length
: 0
)}
</Button>
</div>
}
maskClosable={!isBatchTesting}
className="!rounded-lg"
size={isMobile() ? 'full-width' : 'large'}
>
<div className="model-test-scroll">
{currentTestChannel && (
<div>
{/* 搜索与操作按钮 */}
<div className="flex items-center justify-end gap-2 w-full">
<div className="flex items-center justify-end gap-2 w-full mb-2">
<Input
placeholder={t('搜索模型...')}
value={modelSearchKeyword}
......@@ -2049,7 +2064,6 @@ const ChannelsTable = () => {
/>
<Button
theme='light'
onClick={() => {
if (selectedModelKeys.length === 0) {
showError(t('请先选择模型！'));
......@@ -2068,8 +2082,7 @@ const ChannelsTable = () => {
</Button>
<Button
theme='light'
type='primary'
type='tertiary'
onClick={() => {
if (!currentTestChannel) return;
const successKeys = currentTestChannel.models
......@@ -2088,57 +2101,6 @@ const ChannelsTable = () => {
{t('选择成功')}
</Button>
</div>
</div>
)
}
visible={showModelTestModal && currentTestChannel !== null}
onCancel={handleCloseModal}
footer={
<div className="flex justify-end">
{isBatchTesting ? (
<Button
theme='light'
type='warning'
onClick={handleCloseModal}
>
{t('停止测试')}
</Button>
) : (
<Button
theme='light'
type='tertiary'
onClick={handleCloseModal}
>
{t('取消')}
</Button>
)}
<Button
theme='light'
type='primary'
onClick={batchTestModels}
loading={isBatchTesting}
disabled={isBatchTesting}
>
{isBatchTesting ? t('测试中...') : t('批量测试${count}个模型').replace(
'${count}',
currentTestChannel
? currentTestChannel.models
.split(',')
.filter((model) =>
model.toLowerCase().includes(modelSearchKeyword.toLowerCase())
).length
: 0
)}
</Button>
</div>
}
maskClosable={!isBatchTesting}
className="!rounded-lg"
size={isMobile() ? 'full-width' : 'large'}
>
<div className="model-test-scroll">
{currentTestChannel && (
<div>
<Table
columns={[
{
......@@ -2197,8 +2159,7 @@ const ChannelsTable = () => {
const isTesting = testingModels.has(record.model);
return (
<Button
theme='light'
type='primary'
type='tertiary'
onClick={() => testChannel(currentTestChannel, record.model)}
loading={isTesting}
size='small'
......
web/src/components/table/LogsTable.js
......@@ -697,22 +697,13 @@ const LogsTable = () => {
onCancel={() => setShowColumnSelector(false)}
footer={
<div className='flex justify-end'>
<Button
theme='light'
onClick={() => initDefaultColumns()}
>
<Button onClick={() => initDefaultColumns()}>
{t('重置')}
</Button>
<Button
theme='light'
onClick={() => setShowColumnSelector(false)}
>
<Button onClick={() => setShowColumnSelector(false)}>
{t('取消')}
</Button>
<Button
type='primary'
onClick={() => setShowColumnSelector(false)}
>
<Button onClick={() => setShowColumnSelector(false)}>
{t('确定')}
</Button>
</div>
......@@ -1222,7 +1213,7 @@ const LogsTable = () => {
style={{
fontWeight: 500,
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
padding: 15,
padding: 13,
}}
className='!rounded-lg'
>
......@@ -1233,7 +1224,7 @@ const LogsTable = () => {
style={{
fontWeight: 500,
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
padding: 15,
padding: 13,
}}
className='!rounded-lg'
>
......@@ -1245,7 +1236,7 @@ const LogsTable = () => {
border: 'none',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
fontWeight: 500,
padding: 15,
padding: 13,
}}
className='!rounded-lg'
>
......@@ -1254,8 +1245,7 @@ const LogsTable = () => {
</Space>
<Button
theme='light'
type='secondary'
type='tertiary'
className="w-full md:w-auto"
onClick={() => setCompactMode(!compactMode)}
size="small"
......@@ -1384,7 +1374,7 @@ const LogsTable = () => {
<div className='flex gap-2 w-full sm:w-auto justify-end'>
<Button
type='primary'
type='tertiary'
htmlType='submit'
loading={loading}
size="small"
......@@ -1392,7 +1382,7 @@ const LogsTable = () => {
{t('查询')}
</Button>
<Button
theme='light'
type='tertiary'
onClick={() => {
if (formApi) {
formApi.reset();
......@@ -1407,7 +1397,6 @@ const LogsTable = () => {
{t('重置')}
</Button>
<Button
theme='light'
type='tertiary'
onClick={() => setShowColumnSelector(true)}
size="small"
......
web/src/components/table/MjLogsTable.js
......@@ -741,22 +741,13 @@ const LogsTable = () => {
onCancel={() => setShowColumnSelector(false)}
footer={
<div className="flex justify-end">
<Button
theme="light"
onClick={() => initDefaultColumns()}
>
<Button onClick={() => initDefaultColumns()}>
{t('重置')}
</Button>
<Button
theme="light"
onClick={() => setShowColumnSelector(false)}
>
<Button onClick={() => setShowColumnSelector(false)}>
{t('取消')}
</Button>
<Button
type='primary'
onClick={() => setShowColumnSelector(false)}
>
<Button onClick={() => setShowColumnSelector(false)}>
{t('确定')}
</Button>
</div>
......@@ -831,8 +822,7 @@ const LogsTable = () => {
)}
</div>
<Button
theme='light'
type='secondary'
type='tertiary'
className="w-full md:w-auto"
onClick={() => setCompactMode(!compactMode)}
size="small"
......@@ -897,7 +887,7 @@ const LogsTable = () => {
<div></div>
<div className="flex gap-2">
<Button
type='primary'
type='tertiary'
htmlType='submit'
loading={loading}
size="small"
......@@ -905,7 +895,7 @@ const LogsTable = () => {
{t('查询')}
</Button>
<Button
theme='light'
type='tertiary'
onClick={() => {
if (formApi) {
formApi.reset();
......@@ -920,7 +910,6 @@ const LogsTable = () => {
{t('重置')}
</Button>
<Button
theme='light'
type='tertiary'
onClick={() => setShowColumnSelector(true)}
size="small"
......
web/src/components/table/RedemptionsTable.js
......@@ -139,6 +139,7 @@ const RedemptionsTable = () => {
title: '',
dataIndex: 'operate',
fixed: 'right',
width: 205,
render: (text, record, index) => {
// 创建更多操作的下拉菜单项
const moreMenuItems = [
......@@ -191,7 +192,6 @@ const RedemptionsTable = () => {
<Space>
<Popover content={record.key} style={{ padding: 20 }} position='top'>
<Button
theme='light'
type='tertiary'
size="small"
>
......@@ -199,8 +199,6 @@ const RedemptionsTable = () => {
</Button>
</Popover>
<Button
theme='light'
type='secondary'
size="small"
onClick={async () => {
await copyText(record.key);
......@@ -209,7 +207,6 @@ const RedemptionsTable = () => {
{t('复制')}
</Button>
<Button
theme='light'
type='tertiary'
size="small"
onClick={() => {
......@@ -226,7 +223,6 @@ const RedemptionsTable = () => {
menu={moreMenuItems}
>
<Button
theme='light'
type='tertiary'
size="small"
icon={<IconMore />}
......@@ -435,8 +431,7 @@ const RedemptionsTable = () => {
<Text>{t('兑换码可以批量生成和分发，适合用于推广活动或批量充值。')}</Text>
</div>
<Button
theme='light'
type='secondary'
type='tertiary'
className="w-full md:w-auto"
onClick={() => setCompactMode(!compactMode)}
size="small"
......@@ -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 gap-2 w-full sm:w-auto">
<Button
theme='light'
type='primary'
className="w-full sm:w-auto"
onClick={() => {
......@@ -466,7 +460,7 @@ const RedemptionsTable = () => {
{t('添加兑换码')}
</Button>
<Button
type='warning'
type='tertiary'
className="w-full sm:w-auto"
onClick={async () => {
if (selectedKeys.length === 0) {
......@@ -539,7 +533,7 @@ const RedemptionsTable = () => {
</div>
<div className="flex gap-2 w-full md:w-auto">
<Button
type="primary"
type="tertiary"
htmlType="submit"
loading={loading || searching}
className="flex-1 md:flex-initial md:w-auto"
......@@ -548,7 +542,7 @@ const RedemptionsTable = () => {
{t('查询')}
</Button>
<Button
theme="light"
type="tertiary"
onClick={() => {
if (formApi) {
formApi.reset();
......
web/src/components/table/TaskLogsTable.js
......@@ -595,22 +595,13 @@ const LogsTable = () => {
onCancel={() => setShowColumnSelector(false)}
footer={
<div className="flex justify-end">
<Button
theme="light"
onClick={() => initDefaultColumns()}
>
<Button onClick={() => initDefaultColumns()}>
{t('重置')}
</Button>
<Button
theme="light"
onClick={() => setShowColumnSelector(false)}
>
<Button onClick={() => setShowColumnSelector(false)}>
{t('取消')}
</Button>
<Button
type='primary'
onClick={() => setShowColumnSelector(false)}
>
<Button onClick={() => setShowColumnSelector(false)}>
{t('确定')}
</Button>
</div>
......@@ -667,8 +658,7 @@ const LogsTable = () => {
<Text>{t('任务记录')}</Text>
</div>
<Button
theme='light'
type='secondary'
type='tertiary'
className="w-full md:w-auto"
onClick={() => setCompactMode(!compactMode)}
size="small"
......@@ -733,7 +723,7 @@ const LogsTable = () => {
<div></div>
<div className="flex gap-2">
<Button
type='primary'
type='tertiary'
htmlType='submit'
loading={loading}
size="small"
......@@ -741,7 +731,7 @@ const LogsTable = () => {
{t('查询')}
</Button>
<Button
theme='light'
type='tertiary'
onClick={() => {
if (formApi) {
formApi.reset();
......@@ -756,7 +746,6 @@ const LogsTable = () => {
{t('重置')}
</Button>
<Button
theme='light'
type='tertiary'
onClick={() => setShowColumnSelector(true)}
size="small"
......
web/src/components/table/TokensTable.js
......@@ -372,9 +372,8 @@ const TokensTable = () => {
aria-label={t('项目操作按钮组')}
>
<Button
theme='light'
size="small"
style={{ color: 'rgba(var(--semi-teal-7), 1)' }}
type='tertiary'
onClick={() => {
if (chatsArray.length === 0) {
showError(t('请联系管理员配置聊天链接'));
......@@ -395,11 +394,7 @@ const TokensTable = () => {
menu={chatsArray}
>
<Button
style={{
padding: '4px 4px',
color: 'rgba(var(--semi-teal-7), 1)',
}}
type='primary'
type='tertiary'
icon={<IconTreeTriangleDown />}
size="small"
></Button>
......@@ -407,7 +402,6 @@ const TokensTable = () => {
</SplitButtonGroup>
<Button
theme='light'
type='tertiary'
size="small"
onClick={() => {
......@@ -419,7 +413,6 @@ const TokensTable = () => {
</Button>
<Button
theme='light'
type='danger'
size="small"
onClick={() => {
......@@ -705,8 +698,7 @@ const TokensTable = () => {
<Text>{t('令牌用于API访问认证，可以设置额度限制和模型权限。')}</Text>
</div>
<Button
theme="light"
type="secondary"
type="tertiary"
className="w-full md:w-auto"
onClick={() => setCompactMode(!compactMode)}
size="small"
......@@ -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-wrap gap-2 w-full md:w-auto order-2 md:order-1">
<Button
theme="light"
type="primary"
className="flex-1 md:flex-initial"
onClick={() => {
......@@ -735,8 +726,7 @@ const TokensTable = () => {
{t('添加令牌')}
</Button>
<Button
theme="light"
type="warning"
type='tertiary'
className="flex-1 md:flex-initial"
onClick={() => {
if (selectedKeys.length === 0) {
......@@ -750,8 +740,7 @@ const TokensTable = () => {
footer: (
<Space>
<Button
type="primary"
theme="solid"
type='tertiary'
onClick={async () => {
let content = '';
for (let i = 0; i < selectedKeys.length; i++) {
......@@ -765,7 +754,6 @@ const TokensTable = () => {
{t('名称+密钥')}
</Button>
<Button
theme="light"
onClick={async () => {
let content = '';
for (let i = 0; i < selectedKeys.length; i++) {
......@@ -786,8 +774,7 @@ const TokensTable = () => {
{t('复制所选令牌')}
</Button>
<Button
theme="light"
type="danger"
type='danger'
className="w-full md:w-auto"
onClick={() => {
if (selectedKeys.length === 0) {
......@@ -844,7 +831,7 @@ const TokensTable = () => {
</div>
<div className="flex gap-2 w-full md:w-auto">
<Button
type="primary"
type="tertiary"
htmlType="submit"
loading={loading || searching}
className="flex-1 md:flex-initial md:w-auto"
......@@ -853,7 +840,7 @@ const TokensTable = () => {
{t('查询')}
</Button>
<Button
theme="light"
type='tertiary'
onClick={() => {
if (formApi) {
formApi.reset();
......
web/src/components/table/UsersTable.js
......@@ -287,7 +287,6 @@ const UsersTable = () => {
return (
<Space>
<Button
theme='light'
type='tertiary'
size="small"
onClick={() => {
......@@ -303,7 +302,6 @@ const UsersTable = () => {
menu={moreMenuItems}
>
<Button
theme='light'
type='tertiary'
size="small"
icon={<IconMore />}
......@@ -525,8 +523,7 @@ const UsersTable = () => {
<Text>{t('用户管理页面，可以查看和管理所有注册用户的信息、权限和状态。')}</Text>
</div>
<Button
theme='light'
type='secondary'
type='tertiary'
className="w-full md:w-auto"
onClick={() => setCompactMode(!compactMode)}
size="small"
......@@ -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 gap-2 w-full md:w-auto order-2 md:order-1">
<Button
theme='light'
type='primary'
className="w-full md:w-auto"
onClick={() => {
setShowAddUser(true);
......@@ -598,7 +593,7 @@ const UsersTable = () => {
</div>
<div className="flex gap-2 w-full md:w-auto">
<Button
type="primary"
type="tertiary"
htmlType="submit"
loading={loading || searching}
className="flex-1 md:flex-initial md:w-auto"
......@@ -607,7 +602,7 @@ const UsersTable = () => {
{t('查询')}
</Button>
<Button
theme="light"
type='tertiary'
onClick={() => {
if (formApi) {
formApi.reset();
......
web/src/helpers/render.js
......@@ -53,18 +53,18 @@ import {
// 侧边栏图标颜色映射
export const sidebarIconColors = {
dashboard: '#4F46E5', // 紫蓝色
dashboard: '#10B981', // 绿色
terminal: '#10B981', // 绿色
message: '#06B6D4', // 青色
key: '#3B82F6', // 蓝色
chart: '#8B5CF6', // 紫色
chart: '#F59E0B', // 琥珀色
image: '#EC4899', // 粉色
check: '#F59E0B', // 琥珀色
credit: '#F97316', // 橙色
layers: '#EF4444', // 红色
gift: '#F43F5E', // 玫红色
user: '#6366F1', // 靛蓝色
settings: '#6B7280', // 灰色
user: '#10B981', // 绿色
settings: '#F97316', // 橙色
};
// 获取侧边栏Lucide图标组件
......
web/src/index.css
......@@ -59,6 +59,11 @@ code {
.semi-navigation-item {
margin-bottom: 4px !important;
padding: 4px 12px !important;
}
.semi-navigation-sub-title {
padding: 0 !important;
}
.semi-navigation-item-icon {
......@@ -70,6 +75,7 @@ code {
margin-right: 0;
}
.semi-navigation-item,
.semi-navigation-sub-title {
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