feat(web): ui upgrade

This commit is contained in:
zhaoying
2026-03-24 17:04:38 +08:00
parent c7275dccac
commit fb6ce839d2
8 changed files with 40 additions and 38 deletions

View File

@@ -1,5 +1,4 @@
.page-tabs:global(.ant-segmented) {
background-color: #F6F6F6;
padding: 4px;
}
.page-tabs:global(.ant-segmented .ant-segmented-item-label) {

View File

@@ -146,6 +146,9 @@ export const lightTheme: ThemeConfig = {
},
Progress: {
remainingColor: '#EBEBEB',
},
Segmented: {
trackBg: '#E1E2E7',
}
}
};

View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-03 16:29:41
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-19 21:10:38
* @Last Modified time: 2026-03-24 16:43:10
*/
import { type FC, useState, useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
@@ -163,20 +163,19 @@ const ReleasePage: FC<{data: Application; refresh: () => void}> = ({data, refres
title={t('application.changeLog')}
headerType="borderless"
>
<Flex gap={16} vertical>
{selectedVersion && (
<RbCard
headerType="borderless"
title={<div className="rb:text-[14px]">{formatDateTime(selectedVersion.published_at, 'YYYY-MM-DD HH:mm:ss')}</div>}
extra={<span className="rb:text-[12px] rb:text-[#5B6167] rb:leading-4">{selectedVersion.publisher_name}</span>}
bodyClassName="rb:pt-0! rb:pb-3! rb:px-4!"
variant="outlined"
>
<div className="rb:font-regular rb:text-[#5B6167] rb:leading-4">
<Markdown content={selectedVersion.release_notes} />
</div>
</RbCard>
)}
</Flex>
</RbCard>
</Flex>
}

View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-05 10:45:08
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-04 10:41:35
* @Last Modified time: 2026-03-24 16:59:57
*/
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import { List, Flex, Tooltip, Form } from 'antd';
@@ -185,19 +185,19 @@ const SkillListModal = forwardRef<SkillModalRef, SkillModalProps>(({
"rb:bg-[rgba(21,94,239,0.06)] rb:border-[#155EEF] rb:text-[#155EEF]": selectedIds.includes(item.id),
"rb:border-[#DFE4ED] rb:text-[#212332]": !selectedIds.includes(item.id),
})} onClick={() => handleSelect(item)}>
<Flex>
{/* Skill avatar showing first letter of name */}
<Flex align="center" justify="center" className="rb:size-12 rb:rounded-lg rb:mr-3.25! rb:bg-[#155eef] rb:text-[28px] rb:text-white">
{item.name[0]}
</Flex>
{/* Skill name and description */}
<div className="rb:flex-1 rb:max-w-[calc(100%-60px)]">
<div className="rb:font-medium rb:wrap-break-word rb:line-clamp-1">{item.name}</div>
<Tooltip title={item.description}>
<div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.25 rb:font-regular rb:-mt-1 rb:wrap-break-word rb:line-clamp-1">{item.description}</div>
</Tooltip>
</div>
</Flex>
{/* Skill name and description */}
<div className="rb:flex-1 rb:max-w-[calc(100%-60px)]">
<Tooltip title={item.name}>
<div className="rb:flex-1 rb:leading-5.5 rb:min-w-0 rb:whitespace-break-spaces rb:wrap-break-word rb:line-clamp-1 rb:font-medium rb:text-[16px] rb:mb-4">
{item.name}
</div>
</Tooltip>
{/* Skill description with tooltip */}
<Tooltip title={item.description}>
<div className="rb:h-10 rb:leading-5 rb:wrap-break-word rb:line-clamp-2">{item.description}</div>
</Tooltip>
</div>
</div>
</List.Item>
)}

View File

@@ -1,8 +1,8 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:42:12
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:42:12
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-24 16:49:45
*/
/**
* Member Management Page
@@ -10,7 +10,7 @@
*/
import React, { useRef } from 'react';
import { App, Button, Space } from 'antd';
import { App, Button, Space, Flex } from 'antd';
import { useTranslation } from 'react-i18next';
import type { ColumnsType } from 'antd/es/table';
import type { AnyObject } from 'antd/es/_util/type';
@@ -106,12 +106,12 @@ const MemberManagement: React.FC = () => {
];
return (
<>
<div className="rb:flex rb:justify-end rb:mb-3">
<div className="rb:h-[calc(100vh-80px)] rb:overflow-hidden rb:bg-white rb:rounded-lg rb:pt-3 rb:px-3">
<Flex justify="end" className="rb:px-1! rb:mb-3!">
<Button type="primary" onClick={() => handleEdit()}>
{t('member.createMember')}
</Button>
</div>
</Flex>
<Table
ref={tableRef}
apiUrl={memberListUrl}
@@ -124,7 +124,7 @@ const MemberManagement: React.FC = () => {
ref={memberFormRef}
refreshTable={refreshTable}
/>
</>
</div>
);
};

View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-03 16:50:10
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-20 18:51:27
* @Last Modified time: 2026-03-24 16:52:48
*/
/**
* Model List View
@@ -11,7 +11,7 @@
*/
import { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import { Button, Flex, Row, Col, Tooltip, Space } from 'antd'
import { Button, Flex, Row, Col, Tooltip } from 'antd'
import { useTranslation } from 'react-i18next';
import type { ProviderModelItem, KeyConfigModalRef, ModelListDetailRef, ModelListItem, BaseRef } from './types'
@@ -75,9 +75,7 @@ const ModelList = forwardRef<BaseRef, { query: any; handleEdit: (vo?: ModelListI
<Tooltip title={t(`modelNew.${item.provider}`)}>
<div className="rb:wrap-break-word rb:line-clamp-1">{t(`modelNew.${item.provider}`)}</div>
</Tooltip>
<Space>
<Flex gap={8} wrap>{item.tags.map(tag => <Tag key={tag}>{t(`modelNew.${tag}`)}</Tag>)}</Flex>
</Space>
<Flex gap={8}>{item.tags.map(tag => <Tag key={tag}>{t(`modelNew.${tag}`)}</Tag>)}</Flex>
</Flex>}
isNeedTooltip={false}
footer={<Row gutter={9} className="rb:pt-2!">

View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-03 16:49:45
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-06 12:26:12
* @Last Modified time: 2026-03-24 16:55:30
*/
/**
* Model List Detail Drawer
@@ -146,16 +146,19 @@ const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({
}
extra={<Switch checked={item.is_active} disabled={loading} onChange={() => handleChange(item)} />}
bodyClassName="rb:relative rb:pb-[64px]! rb:h-[calc(100%-64px)]!"
variant="outlined"
>
<Tooltip title={item.description}>
<div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5 rb:font-regular rb:wrap-break-word rb:line-clamp-2">{item.description}</div>
</Tooltip>
<div className="rb:absolute rb:bottom-4 rb:left-6 rb:right-6">
<Row gutter={12}>
<Col span={12}>
{!item.model_id && <Button block onClick={() => handleEdit(item)}>{t('modelNew.modelConfiguration')}</Button>}
</Col>
<Col span={12}>
{!item.model_id &&
<Col span={12}>
<Button block onClick={() => handleEdit(item)}>{t('modelNew.modelConfiguration')}</Button>
</Col>
}
<Col span={!item.model_id ? 12 : 24}>
<Button type="primary" ghost block onClick={() => handleKeyConfig(item)}>{t('modelNew.keyConfig')}</Button>
</Col>
</Row>

View File

@@ -1,8 +1,8 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:48:03
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:48:03
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-24 17:01:59
*/
/**
* Space Configuration Page
@@ -63,7 +63,7 @@ const SpaceConfig: FC = () => {
}
return (
<div className="rb:h-full rb:max-w-140 rb:mx-auto">
<div className="rb:w-250 rb:bg-white rb:rounded-lg rb:py-3 rb:px-3">
{pageLoading
? <Skeleton active />
: <Form